本篇文章主要的介绍了关于react16的一些新特性，还有关于react16的详细功能介绍。下面就让我们一起来看这篇文章的正文内容吧

React 16更新

新js环境要求

react16依靠Map和Set集合和requestAnimationFrame（一个针对动画效果的API）

新功能

- Fragments：render函数可以返回数组和字符串 - error boundaries：错误处理 - portals ：支持声明性地将子树渲染到另一个DOM节点 - custom DOM attributes ：ReactDom允许传递非标准属性 - improved server-side rendering:提升服务端渲染性能

1. Fragments

   render() { return [ 
   First item
   , 
   Second item
   , 
   Third item
   , ]; }

   Nach dem Login kopieren

   详见API

2. error boundaries

   之前，一旦某个组件发生错误，整个组件树将会从根节点被unmount下来。React 16修复了这一点，引入了Error Boundary的概念，中文译为“错误边界”，当某个组件发生错误时，我们可以通过Error Boundary捕获到错误并对错误做优雅处理，如使用Error Boundary提供的内容替代错误组件。Error Boundary可以看作是一种特殊的React组件，新增了componentDidCatch这个生命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示出错提示，而不是卸载整个组件树。（注：它并不能捕获runtime所有的错误，比如组件回调事件里的错误，可以把它想象成传统的try-catch语句）

   实践：

   抽象出检查错误边界公共组件：

   class ErrorBoundary extends React.Component{ constructor(props){ super(props); this.state=({ ifError:false }); } componentDidCatch(err, info) { this.setState({ ifError: true }) console.log(err); } render(){ if(this.state.ifError){ return `this or its children has error`; } return this.props.children } }

   Nach dem Login kopieren

   创建一个简单的包含错误的子组件：

   class ErrorComponent extends React.Component{ render(){ const str = '123'; return str.toFixed(2); } }

   Nach dem Login kopieren

   使用错误边界组件包裹可能出错的组件

   class MainShowComponent extends React.Component{ render(){ return ( 
       
    ) } }

   Nach dem Login kopieren

   当被错误边界组件包裹的子组件中出现错误，会将错误组件替换为字符串：this or its children has error，而不会导致整体组件树被卸载。（想看更多就到PHP中文网React参考手册栏目中学习）

3. Portals

   Portals提供了一种一流的方法来将子代呈现到父组件的DOM层次结构之外的DOM节点。

   ReactDOM.createPortal( child, container );

   Nach dem Login kopieren

   第一个参数（child）是任何可渲染的React子元素，如元素，字符串或片段。第二个参数（container）是一个DOM元素。

   通常，当您从组件的render方法返回一个元素时，它将作为最近的父节点的子元素装载到DOM中：

   render() { // React mounts a new p and renders the children into it return ( 
    {this.props.children} 
    ); }

   Nach dem Login kopieren

   但是，有时将子项插入到DOM中的其他位置会很有用：

   render() { // React does *not* create a new p. It renders the children into `pNode`. // `pNode` is any valid DOM node, regardless of its location in the DOM. return React.createPortal( this.props.children, pNode, ); }

   Nach dem Login kopieren

   有关Portals 和其事件冒泡详见官网和CodePen例子

4. custom DOM attributes

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

   {}}>
    //错误

   Nach dem Login kopieren

5. improved server-side rendering

   提升服务端渲染性能，React 16的SSR被完全重写，新的实现非常快，接近3倍性能于React 15，现在提供一种流模式streaming，可以更快地把渲染的字节发送到客户端。

打破改变

• 调度和生命周期的改变

• 调用setState返回null将不会更新render，这样可以让你在更新方法中自己决定是否更新。

  this.setState( (state)=>{ if(state.curCount%2 === 0){ return {curCount:state.curCount+1} }else{ return null; } } )

  Nach dem Login kopieren

• 在render方法中调用setState总是会导致更新，之前版本不支持，但尽量不要在render中调用setState。

• setState的回调函数会在componentDidMount/ componentDidUpdate 执行之后立即执行，而不是在所有组件渲染之后。

  this.setState( (state)=>{ if(state.curCount%2 === 0){ return {curCount:state.curCount+1} }else{ return null; } }, ()=>{ console.log(this.state.curCount); } )

  Nach dem Login kopieren

1. ReactDOM.render()和ReactDom.unstable_renderIntoContainer()如果在生命周期函数中调用将会返回null。所以解决此类问题可以使用portals或者refs

2. setState的改变：

3. 当两个组件和>发生替换时，B.componentWillMount总是会在A.componentWillUnmount之前执行，而在之前，A.componentWillUnmount有可能会提前执行。

4. 之前版本，当改变一个组件的ref时，ref和dom会在组件的render方法被调用之前分离。现在，我们延迟了ref的改变，直到dom元素被改变了，ref才会和dom分离。

5. 对于不使用React而是使用其他方法来重新渲染容器是不安全的。这在以前的版本中也许会生效，但是我们觉得不支持这样做。现在对于这种情况我们会发出一个警告，而且你需要使用ReactDOM.unmountComponentAtNode来清空你的节点树。

   ReactDOM.render(, p); p.innerHTML = 'nope'; ReactDOM.render(, p);//渲染一些没有被正确清理的东西

   Nach dem Login kopieren

   而你需要：

   ReactDOM.render(, p); ReactDOM.unmountComponentAtNode(p); p.innerHTML = 'nope'; ReactDOM.render(, p); // Now it's okay

   Nach dem Login kopieren

   查看此issue

6. componentDidUpdate生命周期不再接受prevContext参数。

7. 使用不唯一的key可能会导致子组件的复制或者遗失，使用不唯一的key并不支持，并且也从未支持，但之前这是一个硬性错误。

8. Shallow renderer（浅层渲染）不再触发componentDidUpdate()，因为DOM的refs是不可用的。这也使得它与componentDidMount()之前版本中的调用一致。

9. Shallow renderer不再支持unstable_batchedUpdates()。

10. ReactDOM.unstable_batchedUpdates 现在回调之后只有一个额外的参数。