本篇文章主要的介绍了关于react16的一些新特性，还有关于react16的详细功能介绍。下面就让我们一起来看这篇文章的正文内容吧
React 16更新
新js环境要求
react16依靠Map和Set集合和requestAnimationFrame（一个针对动画效果的API）
新功能
- Fragments：render函数可以返回数组和字符串 - error boundaries：错误处理 - portals ：支持声明性地将子树渲染到另一个DOM节点 - custom DOM attributes ：ReactDom允许传递非标准属性 - improved server-side rendering:提升服务端渲染性能
-
Fragments
render() { return [ <li key="A"/>First item</li>, <li key="B"/>Second item</li>, <li key="C"/>Third item</li>, ]; }详见API
-
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 } }创建一个简单的包含错误的子组件：
class ErrorComponent extends React.Component{ render(){ const str = '123'; return str.toFixed(2); } }使用错误边界组件包裹可能出错的组件
class MainShowComponent extends React.Component{ render(){ return ( <p> <ErrorBoundary> <ErrorComponent/> </ErrorBoundary> </p> ) } }当被错误边界组件包裹的子组件中出现错误，会将错误组件替换为字符串：this or its children has error，而不会导致整体组件树被卸载。（想看更多就到PHP中文网React参考手册栏目中学习）
-
Portals
Portals提供了一种一流的方法来将子代呈现到父组件的DOM层次结构之外的DOM节点。
ReactDOM.createPortal( child, container );
第一个参数（child）是任何可渲染的React子元素，如元素，字符串或片段。第二个参数（container）是一个DOM元素。
通常，当您从组件的render方法返回一个元素时，它将作为最近的父节点的子元素装载到DOM中：
render() { // React mounts a new p and renders the children into it return ( <p> {this.props.children} </p> ); }但是，有时将子项插入到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, ); }有关Portals 和其事件冒泡详见官网和CodePen例子
-
custom DOM attributes
支持非标准的自定义DOM属性，在之前的版本中，React会忽略无法识别的HTML和SVG属性，自定义属性只能通过data-*形式添加，现在它会把这些属性直接传递给DOM，这个改动让React可以去掉属性白名单，从而减少了文件大小。但当DOM传递的自定义属性是函数类型或event handler类型时，也会被React忽略掉。
<p a={()=>{}}></p> //错误 -
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; } } ) 在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); } )
ReactDOM.render()和ReactDom.unstable_renderIntoContainer()如果在生命周期函数中调用将会返回null。所以解决此类问题可以使用portals或者refs
setState的改变：
当两个组件
<a></a>和<b> >发生替换时，B.componentWillMount总是会在A.componentWillUnmount之前执行，而在之前，A.componentWillUnmount有可能会提前执行。</b>之前版本，当改变一个组件的ref时，ref和dom会在组件的render方法被调用之前分离。现在，我们延迟了ref的改变，直到dom元素被改变了，ref才会和dom分离。
-
对于不使用React而是使用其他方法来重新渲染容器是不安全的。这在以前的版本中也许会生效，但是我们觉得不支持这样做。现在对于这种情况我们会发出一个警告，而且你需要使用ReactDOM.unmountComponentAtNode来清空你的节点树。
ReactDOM.render(<App />, p); p.innerHTML = 'nope'; ReactDOM.render(<App />, p);//渲染一些没有被正确清理的东西
而你需要：
ReactDOM.render(<App />, p); ReactDOM.unmountComponentAtNode(p); p.innerHTML = 'nope'; ReactDOM.render(<App />, p); // Now it's okay
查看此issue
componentDidUpdate生命周期不再接受prevContext参数。
使用不唯一的key可能会导致子组件的复制或者遗失，使用不唯一的key并不支持，并且也从未支持，但之前这是一个硬性错误。
Shallow renderer（浅层渲染）不再触发componentDidUpdate()，因为DOM的refs是不可用的。这也使得它与componentDidMount()之前版本中的调用一致。
Shallow renderer不再支持unstable_batchedUpdates()。
ReactDOM.unstable_batchedUpdates 现在回调之后只有一个额外的参数。
单文件浏览器版本的名称和路径已经改变，以强调开发和生产版本之间的差异
react/dist/react.js → react/umd/react.development.js
react/dist/react.min.js → react/umd/react.production.min.js
react-dom/dist/react-dom.js → react-dom/umd/react-dom.development.js
react-dom/dist/react-dom.min.js → react-dom/umd/react-dom.production.min.js
重写并改进服务器渲染器
服务器渲染不再使用标记验证，而是尽力附加到现有的DOM，警告不一致。它也不再使用每个节点上的空白组件和数据反馈属性的注释。
为服务器渲染容器现在有一个明确的API。使用ReactDOM.hydrate而不是ReactDOM.render如果你正在恢复服务器呈现的HTML。继续使用，ReactDOM.render如果你只是做客户端渲染。
当未知的属性传递给DOM组件时，如果是有效的值，React会渲染进DOM。查看文档
在render和生命周期函数中的错误默认会卸载整个DOM树，为了阻止这个，可以在UI的相应位置添加错误边界。
弃用
不再构建react-with-addons.js，所有兼容的插件都是在npm上单独发布的，如果你需要它们，可以使用单文件浏览器版本。
在15.x版本中的弃用已经从核心包中删除，React.createClass现在可以作为 create-react-class，React.PropTypes可以作为prop-types，React.DOM 作为 react-dom-factories，react-addons-test-utils 作为 react-dom/test-utils使用， shallow renderer 作为 react-test-renderer/shallow使用。参阅15.5.0和15.6.0文档参考。
本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。
