React v16.6 新特性介绍

更多技术文章，可以浏览我的github地址， github.com/HuYuee/blog

原英文链接

10月23日，React发布了16.6版本，在此版本中带来了一些非常有用的新特性。主要的新特性包括:

• React.memo()

• React.lazy()

• static contextType()

• static getDerivedStateFromError()

React.memo()

React.memo() 是能作用在简单的函数组件，类似于React.PureComponent对于class组件的作用。它本质上是一个高阶函数，达到的效果就是，自动帮组件执行shouldComponentUpdate() , 但是只是执行浅比较

Using memo()

使用方式就像高阶函数一样，包装了一层，如下：

const MemoizedComponent = React.memo(function MyComponent(props) {
  //_ only rerenders if props change_
});

// for arrow functions
const OtherMemoized = React.memo(props => {
    return <div> Memoized Component </div>
}
复制代码

也能包装已经存在的函数，如下：

const MyComponent = props => <div> This is memorable!! </div>

const Memoized = React.memo(MyComponent)
复制代码

官网在最后明确提到了一句：

This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs。---- React官网

意思就是说： 这个高阶函数存在是作为一种性能优化的方式。不要使用它去纯粹地阻止渲染，否则可能会导致出现bug

React.lazy() and Suspense

通过这个API，我们就可以达到代码分割的效果。代码分割是允许我们去延迟加载我们的import，意味着我们在渲染当前页面的时候去提升当前页面的性能，提高渲染速度。

React.lazy() 和 Suspense 现在暂时还不支持服务器端渲染。如果你想要在服务器端做代码分割，我们仍然推荐使用React Loadable。---- React官网

React.lazy()

React.lazy()允许我们去动态的加载组件。

普通方式引入：

import OtherComponent from './OtherComponent';
import AnotherComponent from './AnotherComponent';

function MyComponent(bool) {
  return (
    <div>
      {bool?<OtherComponent />:<AnotherComponent />}
    </div>
  );
}
复制代码

动态的加载组件方式：

function MyComponent(bool) {
    let Component;
    if(bool){
       Component = React.lazy(() => import('./OtherComponent'));
    }else{
       Component = React.lazy(() => import('./AnotherComponent'));
    }
  return (
    <div>
      <Component />
    </div>
  );
}
复制代码

Suspense

如果OtherComponent没有被加载成功，我可以通过使用Suspense这个组件的参数 fallback 参数来显示一些类似于加载中的提示内容。如下：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}
复制代码

最主要的是， Suspense 组件中可以包裹多个动态加载的组件，这样统一管理，非常的方便。

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}
复制代码

关于动态加载组件的更加详细的用法，包括路由里面使用场景，可以参考地址

static contextType

在class中增加了该contextType属性，这个属性可以让你在任何一个生命周期函数中都能通过this.context来使用到通过 React.createContext() 创建的Context对象。在下面我会用两个例子来对比这个属性的好处。

使用contextType：

import {ThemeContext} from './theme-context';

class ThemedButton extends React.Component {
  render() {
    let props = this.props;
    let theme = this.context;
    return (
      <button
        {...props}
        style={{backgroundColor: theme.background}}
      />
    );
  }
}
ThemedButton.contextType = ThemeContext;

export default ThemedButton;
复制代码

未使用contextType：

import {ThemeContext} from './theme-context';

function ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button
          {...props}
          style={{backgroundColor: theme.background}}
        />

      )}
    </ThemeContext.Consumer>
  );
}

export default ThemedButton;
复制代码

是不是发现方便了很多，不需要再包一层Consumer组件。但是这个现在支持class组件，函数组件还不支持。

static getDerivedStateFromError()

这个生命周期函数会在子组件抛出一个错误之后被调用。它会接收到这个throw出来的参数，然后去 return 一个值去更新state来处理这个错误。设置错误边界可以让代码在出错的情况下，也能将错误显示到页面中，而不是出现空白页面。demo

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}
复制代码

一般使用static getDerivedStateFromError() 来渲染一个提示错误的UI，使用componentDidCatch() 来记录一些error的详细信息，错误调用栈等等

原英文链接

更多技术文章，可以浏览我的github地址， github.com/HuYuee/blog