React 16 新特性有哪些？react16的新特性和功能的介绍

本篇文章主要的介绍了关于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 [
       <li key="A"/>First item</li>,
       <li key="B"/>Second item</li>,
       <li key="C"/>Third item</li>,
     ];
   }

   详见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
       }
   }

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

   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参考手册栏目中学习）

3. 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例子

4. custom DOM attributes

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

   <p a={()=>{}}></p>   //错误

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;
          }
  
      }
  )

• 在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);
          }
      )

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

2. setState的改变：

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

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

5. 对于不使用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

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

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

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

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

10. 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使用手册栏目中学习），有问题的可以在下方留言提问。

Atas ialah kandungan terperinci React 16 新特性有哪些？react16的新特性和功能的介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!