React16的新变化

render方法支持直接返回string，number，boolean，null，portal，以及fragments(带有key属性的数组)：

终于不需要再将多个同级元素包裹在一个冗余的 DOM 元素中了，但每个同级元素还是需要唯一的 key 值方便 react 进行更新。而且在未来，react 可能还会提供一个特殊的 jsx 片段来支持无 key 值的 DOM 元素。

异常处理方式的升级：

在老版本的 react 中，某个组件在 render 阶段的运行错误可能会 break 掉整个应用，而且抛出的异常信息含义也非常模糊，难以确定错误的发生位置。在 v16.0 中，如果某个组件在执行 render 或其他生命周期函数时出错，整个组件将被从根节点上移除掉，方便开发者快速定位异常组件。在定位到异常组件后，开发者可以为该组件添加 componentDidCatch 方法，并在这个方法中为组件定义一个备用视图用于渲染异常状态下的组件。当然，在这个新的生命周期函数中，开发者也可以获得更加有帮助的错误信息进行 debug。这被称作组件的"错误边界"，大家可以理解为组件层面的 try catch 声明。

新的组件类型portals：

ReactDOM.createPortal(child, container) 可以将子组件直接渲染到当前容器组件 DOM 结构之外的任意 DOM 节点中，这将使得开发对话框，浮层，提示信息等需要打破当前 DOM 结构的组件更为方便。

更好的服务端渲染：

与之前 renderToString 方法不同，新版本提供的 renderToNodeStream 将返回 Readable，可以持续产生字节流（a stream of bytes）并在下一部分的 document 生成之前将之前已生成的部分 document 传回给客户端。通常来讲，新的服务端渲染将比老的快3倍以上。在 document 到达客户端之后，新版本的 react 也将不会再去将客户端的初次渲染结果与服务端的渲染结果进行比较，而是尽可能地去重用相同的 DOM 元素。

支持自定义 DOM元素：

新版本将不会再抛出不支持的 DOM 元素错误，而是将所有开发者自定义的 DOM 元素都传递到相应的 DOM 节点上。

更小的打包大小，新的打包策略：

总体体积减少30%，新的打包策略中去掉了process.env检查。

• react is 5.3 kb (2.2 kb gzipped), 老版本 20.7 kb (6.9 kb gzipped)
• react-dom is 103.7 kb (32.6 kb gzipped), 老版本 141 kb (42.9 kb gzipped)
• react + react-dom is 109 kb (34.8 kb gzipped), 老版本 161.7 kb (49.8 kb gzipped)

MIT 许可：

除了最新的 16.0 版本外，Facebook 还发布了使用 MIT 许可的 15.6.2 版本，以方便无法立刻升级的使用者。

新的核心架构 Fiber：

新版本将使用 Fiber 作为底层架构。正是得益于 FIber，上述提到的支持返回数据及错误边界等功能才变得可能。Fiber 相较于之前最大的不同是它可以支持“异步渲染（async rendering）”，这意味着 React 可以在更细的粒度上控制组件的绘制过程，从最终的用户体验来讲，用户可以体验到更流畅交互及动画体验。而因为异步渲染涉及到 React 的方方面面甚至未来，在 16.0 版本中 React 还暂时没有启用，并将在未来几个月陆续推出。

setState

• 传递 null 给 setState 方法将不会触发更新。你可以自定义更新方法决定是否需要重新渲染。
• 在 render 方法中直接调用 setState 总会导致更新。这点和之前不太一样。不管怎么说我们都不应该在 render 方法中直接调用 setState 方法。
• setState 的回调函数（第二个参数）现在会在 componentDidMount/componentDidUpdate 生命周期之后立即触发，之前是在所有组件渲染完成之后才触发。

其他的一些改变

• 支持自定义DOM属性

• 当我们使用 <B /> 组件替换 <A /> 组件时，B.componentWillMount 总是会比 A.componentWillUnmount 先触发。老版本中 A.componentWillUnmount 在某些情况下会被先触发。

• 以前的版本，改变对一个组件的 ref ，总是会在该组件 render 之前将组件和 ref 进行分离。现在React16修改了 ref 变化的时间，让它在 DOM 变更后再做变化。

• 使用 React 之外的方法修改了一个容器之后，重新渲染组件中的内容是不安全的。之前的版本中虽然可以使用，但是并不推荐。现在我们会在控制台中使用 console.error 发出警告。如果非得这么做的话你可以使用 ReactDOM.unmountComponentAtNode 方法清除组件。

• componentDidUpdate 生命周期不再返回 prevContext 参数。

• ReactDOM.render() 和 React.unstable_renderSubtreeIntoContainer()：这两个方法在生命周期方法中执行时将会返回 null。如果真有这种需求，可以使用 portals 或者 ref 来代替。

注：以上总结大部分来自于互联网整理

转载于:https://juejin.im/post/5a4b7a2cf265da431048bf95