React v16.6 新特性介紹

HuYuee發表於2018-10-30
React

更多技術文章，可以瀏覽我的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

相關文章