React v16.0

September 26, 2017 by Andrew Clark

新版本的render可以返回数组、字符串、react组件、数字、boolean值

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

    // 第一种返回数组
    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语句)

    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;
      }
    }
  • 上面的组件是当页面中有错误时我们想要展示的效果,具体用法如下:

    render(){
      return (
        <div>
          <ErrorBoundary>    // 外层组件我们定义的错误组件
            <Profile user={this.state.user} />     // 内层组件是我们将要监视的自定义组件
          </ErrorBoundary>
          <button onClick={this.onClick}>Update</button>
        </div>
      )
    }
  • 这个组件能够不仅仅能够监听到本组件的错误,连同它下面的子组件的错误也可以监听到

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

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

    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.”,你可以在点击这里来阅读官方文档
  • 暂时就这么多,后续发现更多我再进行更新,希望大家喜欢

本文固定链接: http://www.js-code.com/react/react_42953.html