React v16.6.0: lazy, memo 和 contextType

October 22, 2018 by Sebastian Markbåge

今天我们发布了 React 16.6,带来了一些新的便捷功能。一种针对函数组件的 PureComponent/shouldComponentUpdate 形式,一种使用 Suspense 进行代码拆分的方法,以及一种在类组件中使用Context 的简单方法。

查看下面的完整 changelog 日志。

React.memo

使用 PureComponentshouldComponentUpdate ,类组件可以在输入的 props(属性) 相同时退出渲染。现在,您可以通过将函数组件包裹在 React.memo 中来完成同样的操作。

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

React.lazy: 使用 Suspense 进行代码拆分

你可能已经看过Dan在 JSConf Iceland 上谈论 React Suspense。现在,您可以通过在 React.lazy() 调用中包裹一个动态 import(导入) 来使用 Suspense组件 进行 代码拆分

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

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

Suspense 组件还允许库作者在将来开始使用 Suspense 支持构建数据获取。

注意:此功能尚不可用于服务器端呈现。Suspense 支持将在稍后的版本中添加。

static contextType

React 16.3 中,我们引入了官方 Context API 来替换先前的 Legacy Context API。

const MyContext = React.createContext();

我们得到反馈,在类组件中采用新的 渲染属性(prop) API 很困难。因此,我们添加了一个方便的API来 使用类组件中的 context(上下文) 值

class MyClass extends React.Component {
  static contextType = MyContext;
  componentDidMount() {
    let value = this.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* render something based on the value of MyContext */
  }
}

static getDerivedStateFromError()

React 16 引入了错误边界 来处理 React 渲染中抛出的错误。我们已经有了 componentDidCatch 生命周期方法,该方法在错误发生后被触发。它非常适合将错误记录到服务器。它还允许您通过调用 setState 向用户显示不同的UI。

在此之前,我们将为抛出错误的树渲染 null。这有时会破坏不希望其 refs 为空的父组件。它也不能从服务器上的错误中恢复,因为 Did 生命周期方法不会在服务器端渲染期间触发。

我们正在添加另一个错误方法,允许您在渲染完成之前渲染回退UI。请参阅getDerivedStateFromError()的文档。

注意:getDerivedStateFromError() 尚不可用于服务器端呈现。它旨在在将来的版本中与服务器端渲染一起使用。我们提前发布它,以便您可以开始准备使用它。

StrictMode 中的弃用警告

16.3 中,我们介绍了 StrictMode 组件。 它允许您选择对可能在将来导致问题的模式进行早期警告。

我们将 StrictMode 的两个 API 添加到了已弃用API列表中。 如果你不使用 StrictMode ,你不必担心; 这些警告不会给你带来困扰。

  • ReactDOM.findDOMNode() - 这个API经常被误解,并且大多数使用它都是不必要的。 在 React 16 中它也可能会出乎意料地慢。请参阅文档 以了解可能的升级路径。
  • Legacy Context 使用 contextTypes 和 getChildContext - Legacy Context 使得 React 比它需要的更慢,更大。 因此我们强烈希望鼓励你升级到新的 context API。 希望添加 contextType API 可以使这更容易一些。

如果您在升级时遇到问题,我们希望听到您的反馈意见。

安装

npm 中提供了 React v16.6.0。

要使用 Yarn 安装 React 16,请运行:

yarn add react@^16.6.0 react-dom@^16.6.0

要使用 npm 安装 React 16 ,请运行

npm install --save react@^16.6.0 react-dom@^16.6.0

我们还通过 CDN 提供了 React 的 UMD 版本:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

有关详细的安装说明,请参阅文档。

更新日志

React

React DOM

  • Add contextType as a more ergonomic way to subscribe to context from a class. (@bvaughn in #13728)
  • Add getDerivedStateFromError lifecycle method for catching errors in a future asynchronous server-side renderer. (@bvaughn in #13746)
  • Warn when <Context> is used instead of <Context.Consumer>. (@trueadm in #13829)
  • Fix gray overlay on iOS Safari. (@philipp-spiess in #13778)
  • Fix a bug caused by overwriting window.event in development. (@sergei-startsev in #13697)

React DOM Server

Scheduler (Experimental)