首页 >web前端 >js教程 >React 16 新特性有哪些?react16的新特性和功能的介绍

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

寻∝梦
寻∝梦原创
2018-09-11 16:05:553164浏览

本篇文章主要的介绍了关于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使用手册栏目中学习),有问题的可以在下方留言提问。

    以上是React 16 新特性有哪些?react16的新特性和功能的介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

    声明:
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn