React 16新特性简介

React 16新特性简介

1.render支持Array和String渲染

render() {
  return [
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}
render() {
  return 'Look ma, no spans!';
}

2.新的组件类型portals

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

render() {
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

更多：reactjs.org/docs/portal…

3.更好的处理错误Error Boundaries

React15 在渲染过程中遇到运行时的错误，会导致整个 React 组件的崩溃，而且错误信息不明确可读性差。React16 支持了更优雅的错误处理策略，如果一个错误是在组件的渲染或者生命周期方法中被抛出，整个组件结构就会从根节点中卸载，而不影响其他组件的渲染，可以利用 error boundaries 进行错误的优化处理。

4.更好的服务端渲染

与之前 renderToString 方法不同，新版本提供的 renderToNodeStream，可以持续产生字节流，可以很快的向客户端更快地发送字节，接近3倍性能于React 15

更多：reactjs.org/docs/react-…

5.支持自定义DOM属性

// 你的代码:
<div mycustomattribute="something" />
// React15 输出:
<div />
// React 16 输出:
<div mycustomattribute="something" />

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

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

7.Fiber

Fiber 是对 React 核心算法的一次重新实现，将原本的同步更新过程碎片化，避免主线程的长时间阻塞，使应用的渲染更加流畅。