React16版本的新特性

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是对核心算法的一次重新实现”，后续再深入学习。