React 16.6.0 新特性

16.6.0版本发布于10.23号，下面就来看看他们带来了什么新特性吧：

React.memo

Class组件可以通过继承PureComponent类，或者实现shouldComponentUpdate接口，达到对于不变的输入属性来说，不用多次渲染。现在对于函数式组件（function component）来说，可以使用React.memo方法达到同样的效果。

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

React.lazy

与Suspense结合使用可以达到代码分割的效果：

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

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

Suspense组件支持fallback属性，当异步加载的组件未完成时，可以展示fallback的内容。

目前该功能还不支持服务器端渲染，将在稍晚的发布中添加

static contextType

提供了一个便捷的API，在class内部消费context值。
例如：

const MyContext = React.createContext();


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

这个API是针对用户的反馈而增加的。

static getDerivedStateFromError()

React16版本增加了错误边界的特性，用于处理React渲染时抛出的错误。之前已经有componentDidCatch这个生命周期方法，当错误发生时就会被调用。这个方法很适合记录服务器端的错误，通过使用setState，发生错误时也可以给用户显示一个不一样的UI。
在方法调用前，我们为该组件渲染null。但是有时候渲染一个null会破坏它们的父组件，因为父组件不希望得到一个空的节点。另外在服务器端渲染时，不会调用Did类型的生命周期函数。
增加的getDerivedStateFromError 函数，可以在渲染完成前就被调用。

目前getDerivedStateFromError还不能作用于服务器端渲染

StrictMode组件中移除了一些函数

1. ReactDOM.findDOMNode()
2. 旧的Context API

安装方法

React v16.6.0 可以通过npm获取。
通过Yarn安装：

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

通过npm安装：

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

另外还提供CDN的方式，该build是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>

附：完整的Changelog

React

• Add React.memo() as an alternative to PureComponent for functions. (@acdlite in #13748)
• Add React.lazy() for code splitting components. (@acdlite in #13885)
• React.StrictMode now warns about legacy context API. (@bvaughn in #13760)
• React.StrictMode now warns about findDOMNode. (@sebmarkbage in #13841)
• Rename unstable_AsyncMode to unstable_ConcurrentMode. (@trueadm in #13732)
• Rename unstable_Placeholder to Suspense, and delayMs to maxDuration. (@gaearon in #13799 and @sebmarkbage in #13922)

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

• Add support for React.memo(). (@alexmckenley in #13855)
• Add support for contextType. (@alexmckenley and @sebmarkbage in #13889)

Scheduler (Experimental)

• Rename the package to scheduler. (@gaearon in #13683)
• Support priority levels, continuations, and wrapped callbacks. (@acdlite in #13720 and #13842)
• Improve the fallback mechanism in non-DOM environments. (@acdlite in #13740)
• Schedule requestAnimationFrame earlier. (@acdlite in #13785)
• Fix the DOM detection to be more thorough. (@trueadm in #13731)
• Fix bugs with interaction tracing. (@bvaughn in #13590)
• Add the envify transform to the package. (@mridgway in #13766)

原文地址 React v16.6.0: lazy, memo and contextType – React Blog