React 16新特性简介

我不是女神ヾ 2021-10-01 03:34 433阅读 0赞

### 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…][reactjs.org_docs_portal]

3.**更好的处理错误Error Boundaries**

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

4.**更好的服务端渲染**

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

更多：[reactjs.org/docs/react-…][reactjs.org_docs_react-]

5.支持自定义DOM属性

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

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

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

**7.Fiber**

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

[reactjs.org_docs_portal]: https://link.juejin.im/?target=https%3A%2F%2Freactjs.org%2Fdocs%2Fportals.html
[reactjs.org_docs_react-]: https://link.juejin.im/?target=https%3A%2F%2Freactjs.org%2Fdocs%2Freact-dom-server.html