最官方的react16.0更新功能_React

上一篇: React 教程第三篇—— 组件渲染下一篇:通过 React + Mobx 实现简单的 T...

最官方的react16.0更新功能

发布时间：2019-06-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了最官方的react16.0更新功能，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

React v16.0
September 26, 2017 by Andrew Clark
新版本的render可以返回数组、字符串、react组件、数字、boolean值

如果返回数组必须给每一个数组元素添加一个唯一标识key，但是从v16.2开始reat

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 第一种返回数组
render() {
  // 这里不同于v15.x必须要一个标签来包裹
  return [
    // key是必须的，一般不要把数组的index索引作为key，这样可能会导致页面不会按照你想象的效果进行渲染
    
First ITem,
    Second item,
    Third item,
  ];
}

// 第二种返回字符串
render() {
  return 'Look ma, no spans!';
}" title="" data-original-title="复制">

// 第一种返回数组
render() {
  // 这里不同于v15.x必须要一个标签来包裹
  return [
    // key是必须的，一般不要把数组的index索引作为key，这样可能会导致页面不会按照你想象的效果进行渲染
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

// 第二种返回字符串
render() {
  return 'Look ma, no spans!';
}



更好的错误处理方式


之前react在渲染过程中或者是生命周期内出现了致命的错误，react会从根组件上把所有的组件都卸载下来，以防止展现错误的数据，但这不是最好的用户体验。React 16修复了这一点，引入了Error Boundary的概念，中文译为“错误边界”，当某个组件发生错误时，我们可以通过Error Boundary捕获到错误并对错误做优雅处理。（注：它并不能捕获runtime所有的错误，比如组件回调事件里的错误，可以把它想象成传统的try-catch语句）

      
      
      component {
  constructor(PRops) {
    super(props);
    this.state = { hasError: false };
  }
// 新增了componentDIDCatch这个生命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示出错提示，而不是卸载整个组件树。
  componentDidCatch(error, info) {
    // 错误代理组件的展示与否
    this.setState({ hasError: true });
    // 在这里我们可以对错误进行记录
    LOGErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // 在这里我们可以书写自己想要展示的ui组件
      return Something went wrong.;
    }
    return this.props.children;
  }
}" title="" data-original-title="复制">
      
      
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
// 新增了componentDidCatch这个生命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示出错提示，而不是卸载整个组件树。
  componentDidCatch(error, info) {
    // 错误代理组件的展示与否
    this.setState({ hasError: true });
    // 在这里我们可以对错误进行记录
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // 在这里我们可以书写自己想要展示的ui组件
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}


上面的组件是当页面中有错误时我们想要展示的效果，具体用法如下:

      
      
      自定义组件
      
      
    
  )
}" title="" data-original-title="复制">

render(){
  return (
    <div>
      <ErrorBoundary>    // 外层组件我们定义的错误组件
        <Profile user={this.state.user} />     // 内层组件是我们将要监视的自定义组件
      </ErrorBoundary>
      <button onClick={this.onClick}>Update</button>
    </div>
  )
}



这个组件能够不仅仅能够监听到本组件的错误，连同它下面的子组件的错误也可以监听到

setState传入null时不会再触发更新

之前的setState不管传入什么只要调用了这么方法就会渲染

      
      
      ===newValue){
      return null;
    }
    return {city:newValue}
  })
)" title="" data-original-title="复制">
      
      
selectCity(e){
  const newValue = e.target.value;
  this.setState((state)=>{
    if(state.city===newValue){
      return null;
    }
    return {city:newValue}
  })
)

v16.0支持自定义的dom属性
之前的版本对于自定义属性react会在属性前加上data-**来进行处理，现在对于部分属性去除了这种写法，拥抱了原生dom，这样可以减少react的代码，提升了性能
从数据来说，React v16比v15.6版本缩小了32%
更好的服务器端渲染：React 16的SSR被完全重写，新的实现非常快，接近3倍性能于React 15，现在提供一种流模式streaming，可以更快地把渲染的字节发送到客户端。
扩展

react v16采用了最新的技术“Fiber.”，你可以在点击这里来阅读官方文档
暂时就这么多，后续发现更多我再进行更新，希望大家喜欢

脚本宝典总结

以上是脚本宝典为你收集整理的最官方的react16.0更新功能全部内容，希望文章能够帮你解决最官方的react16.0更新功能所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。