React v16.6中有什么新功能

自React v16.5首次發(fā)布以來不到2個月刊咳，React團隊的優(yōu)秀人員已經向我們贈送了第101版的React侯勉。這個最新版本引入了一些新的API增加React.lazy()猜极，React.memo()以及contextType甚至引入了一個新的生命周期方法缨叫，getDerivedStateFromError。

請記住缅糟，這是v16的次要版本挺智，因此祷愉，如果您已經使用了所述主要版本的版本窗宦，則升級應該提供最少令人頭疼的地方。

讓我們來看看這些新的功能吧二鳄！

`React.lazy()`

React.lazy()允許您僅在需要渲染時加載組件赴涵，即延遲加載。這可以讓你減少你的包大小订讼，雖然現(xiàn)在你可以用Webpack這樣的東西髓窜，但是看到它直接進入React是非常棒的。

// React <= v16.5
import ImmediatelyLoadedComponent from './ImmediatelyLoadedComponent';

// React v16.6+
import { lazy } from 'react';
const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponent'));

稍等下欺殿，還有更多寄纵。您可以結合React.lazy()使用Suspense，并指定一個fallback部分脖苏，而動態(tài)加載組件加載程拭，將顯示。

import { lazy, Suspense } from 'react';
const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <Suspense fallback={<div>Please wait while we lazy load...</div>}>
      <LazyLoadedComponent />
    </Suspense>
  );
}

應該減少大量的“加載”樣板代碼棍潘！有關備受期待的React Suspense的更多信息恃鞋，請查看Dan Abramov在JSConf Iceland 2018上發(fā)表的流行演講。

請記住亦歉，React.lazy()并且Suspense還沒有為服務器端渲染做好準備恤浪，但將來可以使用。

`React.memo()`

當您不需要管理狀態(tài)時肴楷，功能組件很棒水由，但缺少生命周期方法意味著您無法定義shouldComponentUpdate。如果沒有它赛蔫，您的組件將始終重新呈現(xiàn)砂客。

類似于React.PureComponent，React.memo()是一個更高階的組件濒募，允許您在函數(shù)組件的props相同時跳過重新渲染：

const Component = React.memo(function (props) { });

開箱即用鞭盟，React.memo()只對道具對象進行淺層比較。如果您需要更高級的東西瑰剃，可以將比較函數(shù)作為第二個參數(shù)傳遞給React.memo()：

const Component = React.memo(function (props) { }, (prevProps, nextProps) => {
  // Return true if equal, false if not
});

`contextType`

Context API齿诉。它可以被用到，但不鼓勵使用。然后在React v16.3中添加了官方Context API≡辆纾現(xiàn)在在React v16.6中歇竟，更容易在類組件中的任何位置使用上下文：

import React, { Component } from 'react';

const GatorContext = React.createContext('American');

class Alligator extends Component {
  static contextType = GatorContext;

  componentDidMount() {
    const contextValue = this.context;
    // Do some stuff with the context value
  }

  componentWillReceiveProps() {
    const contextValue = this.context;
    // Do some other stuff with the context value
  }

  render() {
    const contextValue = this.context;
    // Conditionally render based on the context value
  }
}

`getDerivedStateFromError`

進入React v16的一個重要補充是Error Boundaries，它有助于通過處理React渲染方法中的錯誤來緩解以前的痛點抵恋。

除此之外componentDidCatch焕议，React v16.6引入了getDerivedStateFromError生命周期方法。與用于錯誤日志記錄的對應文件不同弧关，getDerivedStateFromError收到錯誤盅安，并且它會返回更新狀態(tài)的值：

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.error) {
      return <div>Something borked :(</div>;
    }
    // If these kids act up, we'll know!
    return this.props.children;
  }
}

類似于React.lazy()，getDerivedStateFromError目前無法用于服務器端渲染世囊，未來也是如此别瞭。

棄用的Api

另外值得注意的是，你應該注意到v16.6中有一小部分的棄用株憾，特別是如果你想讓你的代碼庫保持整潔蝙寨，就像React-land中的東西一樣：

ReactDOM.findDOMNode（）
Legacy Context - 現(xiàn)在我們有一個官方的Context API，我們應該停止使用contextTypes和getChildContext嗤瞎。

只有在使用StrictMode組件時墙歪，才會顯示這些棄用。如果沒有贝奇，您將不會在日志中看到這些虹菲。仍然需要值得注意;）

</article>

原文鏈接

最后編輯于：2018.12.11 13:18:17

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者