React16版本更新的新特性

2018年05月03日 21:27:56

阅读数：188

1、render方法的返回值类型：New render return types
之前的方式：

class App extends Component{ render(){ return ( <div>hello</div> ) } }

在react16版本中：返回值支持fragments and strings

//返回字符串的方式
class App extends Component{ render(){ return 'hello react!' } } //返回数组的方式 class App1 extends Component{ render(){ return [ <li key='A'>item1</li>, <li key='B'>item2</li>, <li key='C'>item3</li>, ] } }

2、更好的错误处理：Better error handling
核心是componentDidCatch周期函数。

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { // Display fallback UI this.setState({ hasError: true }); // You can also log the error to an error reporting service logErrorToMyService(error, info); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; } }

使用的时候，这样处理：

render(){
    return ( 
        <ErrorBoundary><User /></ErrorBoundary> ) }

这是一种错误处理的方式。

3、Portals，把一个组件挂载到界面的任意DOM上。
使用场景：给一个界面添加Modal层。

render() {
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

4、setState传入null时不会再触发更新

selectCity(e){
  const newValue = e.target.value;
  this.setState((state)=>{
    if(state.city===newValue){ return null; } return {city:newValue} }) )

5、支持自定义DOM属性

在之前的版本中，React会忽略无法识别的HTML和SVG属性，自定义属性只能通过data-*形式添加，现在它会把这些属性直接传递给DOM（这个改动让React可以去掉属性白名单，从而减少了文件大小），不过有些写法仍然是无效的。如DOM传递的自定义属性是函数类型或event handler时，依然会被React忽略。

6、基于流模式的服务端渲染

React 16的SSR被完全重写，新的实现非常快，接近3倍性能于React 15，现在提供一种流模式streaming，可以更快地把渲染的字节发送到客户端。另外，React 16在hydrating(注：指在客户端基于服务器返回的HTML再次重新渲染）方面也表现的更好，React 16不再要求客户端的初始渲染完全和服务器返回的渲染结果一致，而是尽量重用已经存在的DOM元素。不会再有checksum（标记验证）！并对不一致发出警告。一般来说，在服务器和客户端渲染不同的内容是不建议的，但这样做在某些情况下也是有用的（比如，生成timestamp)。

7、新的打包策略

新的打包策略中去掉了process.env检查。
React 16的体积比上个版本减小了32%（30% post-gzip），文件尺寸的减小一部分要归功于打包方法的改变。
React 16采用了新的核心架构React Fiber。官方解释是“React Fiber是对核心算法的一次重新实现”，后续再深入学习。

React16版本的新特性

React16版本更新的新特性

猜你喜欢