更多技術(shù)文章，可以瀏覽我的github地址，https://github.com/HuYuee/blog

原英文鏈接

10月23日，React發(fā)布了16.6版本，在此版本中帶來了一些非常有用的新特性。主要的新特性包括:

• React.memo()

• React.lazy()

• static contextType()

• static getDerivedStateFromError()

React.memo()

React.memo() 是能作用在簡單的函數(shù)組件，類似于React.PureComponent對(duì)于class組件的作用。它本質(zhì)上是一個(gè)高階函數(shù)，達(dá)到的效果就是，自動(dòng)幫組件執(zhí)行shouldComponentUpdate() , 但是只是執(zhí)行淺比較

Using memo()

使用方式就像高階函數(shù)一樣，包裝了一層，如下：

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

也能包裝已經(jīng)存在的函數(shù)，如下：

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

const Memoized = React.memo(MyComponent)

官網(wǎng)在最后明確提到了一句：

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

意思就是說：這個(gè)高階函數(shù)存在是作為一種性能優(yōu)化的方式。不要使用它去純粹地阻止渲染，否則可能會(huì)導(dǎo)致出現(xiàn)bug

React.lazy() and Suspense

通過這個(gè)API，我們就可以達(dá)到代碼分割的效果。代碼分割是允許我們?nèi)パ舆t加載我們的import，意味著我們?cè)阡秩井?dāng)前頁面的時(shí)候去提升當(dāng)前頁面的性能，提高渲染速度。

React.lazy() 和 Suspense 現(xiàn)在暫時(shí)還不支持服務(wù)器端渲染。如果你想要在服務(wù)器端做代碼分割，我們?nèi)匀煌扑]使用React Loadable。---- React官網(wǎng)

React.lazy()

React.lazy()允許我們?nèi)?dòng)態(tài)的加載組件。

普通方式引入：

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

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

動(dòng)態(tài)的加載組件方式：

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這個(gè)組件的參數(shù)fallback參數(shù)來顯示一些類似于加載中的提示內(nèi)容。如下：

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

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

最主要的是，Suspense組件中可以包裹多個(gè)動(dòng)態(tài)加載的組件，這樣統(tǒng)一管理，非常的方便。

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

關(guān)于動(dòng)態(tài)加載組件的更加詳細(xì)的用法，包括路由里面使用場(chǎng)景，可以參考地址

static contextType

在class中增加了該contextType屬性，這個(gè)屬性可以讓你在任何一個(gè)生命周期函數(shù)中都能通過this.context來使用到通過React.createContext()創(chuàng)建的Context對(duì)象。在下面我會(huì)用兩個(gè)例子來對(duì)比這個(gè)屬性的好處。

使用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;

是不是發(fā)現(xiàn)方便了很多，不需要再包一層Consumer組件。但是這個(gè)現(xiàn)在支持class組件，函數(shù)組件還不支持。

static getDerivedStateFromError()

這個(gè)生命周期函數(shù)會(huì)在子組件拋出一個(gè)錯(cuò)誤之后被調(diào)用。它會(huì)接收到這個(gè)throw出來的參數(shù)，然后去return一個(gè)值去更新state來處理這個(gè)錯(cuò)誤。設(shè)置錯(cuò)誤邊界可以讓代碼在出錯(cuò)的情況下，也能將錯(cuò)誤顯示到頁面中，而不是出現(xiàn)空白頁面。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() 來渲染一個(gè)提示錯(cuò)誤的UI，使用componentDidCatch() 來記錄一些error的詳細(xì)信息，錯(cuò)誤調(diào)用棧等等

原英文鏈接

更多技術(shù)文章，可以瀏覽我的github地址，https://github.com/HuYuee/blog