最官方的react16.0更新功能

React v16.0

September 26, 2017 by Andrew Clark

新版本的render能够返回数组、字符串、react组件、数字、boolean值

• 若是返回数组必须给每个数组元素添加一个惟一标识key，可是从v16.2开始reat

  // 第一种返回数组
  render() {
    // 这里不一样于v15.x必需要一个标签来包裹
    return [
      // key是必须的，通常不要把数组的index索引做为key，这样可能会致使页面不会按照你想象的效果进行渲染
      <li key="A">First item</li>,
      <li key="B">Second item</li>,
      <li key="C">Third item</li>,
    ];
  }
  
  // 第二种返回字符串
  render() {
    return 'Look ma, no spans!';
  }

更好的错误处理方式

• 以前react在渲染过程当中或者是生命周期内出现了致命的错误，react会从根组件上把全部的组件都卸载下来，以防止展示错误的数据，但这不是最好的用户体验。React 16修复了这一点，引入了Error Boundary的概念，中文译为“错误边界”，当某个组件发生错误时，咱们能够经过Error Boundary捕获到错误并对错误作优雅处理。（注：它并不能捕获runtime全部的错误，好比组件回调事件里的错误，能够把它想象成传统的try-catch语句）

  class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  // 新增了componentDidCatch这个生命周期函数，它能够捕获自身及子树上的错误并对错误作优雅处理，包括上报错误日志、展现出错提示，而不是卸载整个组件树。
    componentDidCatch(error, info) {
      // 错误代理组件的展现与否
      this.setState({ hasError: true });
      // 在这里咱们能够对错误进行记录
      logErrorToMyService(error, info);
    }
  
    render() {
      if (this.state.hasError) {
        // 在这里咱们能够书写本身想要展现的ui组件
        return <h1>Something went wrong.</h1>;
      }
      return this.props.children;
    }
  }

• 上面的组件是当页面中有错误时咱们想要展现的效果，具体用法以下:

  render(){
    return (
      <div>
        <ErrorBoundary>    // 外层组件咱们定义的错误组件
          <Profile user={this.state.user} />     // 内层组件是咱们将要监视的自定义组件
        </ErrorBoundary>
        <button onClick={this.onClick}>Update</button>
      </div>
    )
  }

• 这个组件可以不单单可以监听到本组件的错误，连同它下面的子组件的错误也能够监听到

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

• 以前的setState无论传入什么只要调用了这么方法就会渲染

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

v16.0支持自定义的dom属性

• 以前的版本对于自定义属性react会在属性前加上data-**来进行处理，如今对于部分属性去除了这种写法，拥抱了原生dom，这样能够减小react的代码，提高了性能

从数据来讲，React v16比v15.6版本缩小了32%

• 更好的服务器端渲染：React 16的SSR被彻底重写，新的实现很是快，接近3倍性能于React 15，如今提供一种流模式streaming，能够更快地把渲染的字节发送到客户端。

扩展

• react v16采用了最新的技术“Fiber.”，你能够在点击这里来阅读官方文档
• 暂时就这么多，后续发现更多我再进行更新，但愿你们喜欢