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组件中移除了一些函数
- ReactDOM.findDOMNode()
- 旧的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)
