目前可以试用alpha版本，正式版会在近期发布

{
  "dependencies": {
    "react": "^16.3.0-alpha.0",
    "react-dom": "^16.3.0-alpha.0"
  }
}

新的context

context这个特性已经存在很久了，但因为一些原因一直是处于试验性质的API。 React 16.3带来了正式版的context API

• 用createContext创建一个context，context里有Provider和Consumer两个组件

import React, { createContext } from 'react';

const ctx = createContext({
  text: 'hello world!',
});
const { Provider, Consumer } = ctx;

Provider组件用于将context数据传给该组件树下的所有组件 value属性是context的内容

class App extends React.Component {
  render() {
    return (
      <Provider value={{ text: 'hello react!' }}>
        <Comp1 />
        <Comp2 />
      </Provider>
    );
  }
}

要使用context的数据，我们需要使用Consumer组件

// 函数式
const Comp1 = () => (
  <Consumer>
    {context => <p>{context.text}</p>}
  </Consumer>
);
// 类
class Comp2 extends React.Component {
  render() {
    return (
      <Consumer>
        {context => <p>{context.text}</p>}
      </Consumer>
    );
  }
}

可以发现Consumer使用了将一个函数作为它的children的新语法，从上面的例子中可以看出它接收context并将context.text渲染出来
Consumer下不能写其它的东西，比如<Consumer>text: {context => <p>{context.text}</p>}</Consumer>
另外，在新的context API下，我们不需要写contextProps就能使用context了

等等，既然context的内容是写在Provider的value中，那我们创建context时的参数呢？ 如果你没有将Consumer作为Provider的子组件，那么Consumer将使用创建context时的参数作为context

更新context

更新context很容易

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'hello react!',
    };
  }
  updateCtx() {
    this.setState({ text: 'updated!' });
  }
  render() {
    return (
      <Provider value={this.state}>
        <button onClick={() => this.updateCtx()}>update</button>
        <Consumer>
          {context => <p>{context.text}</p>}
        </Consumer>
      </Provider>
    );
  }
}

新的context提供了一个简洁的管理全局状态的方式，或许可以替代Redux之类的状态管理库？

生命周期相关改动

为了支持未来的异步渲染特性，以下生命周期函数将被废弃

• componentWillMount 请使用 componentDidMount代替
• componentWillUpdate 请使用 componentDidUpdate代替
• componentWillReceiveProps 请使用新增的 static getDerivedStateFromProps代替
  废弃警告会在React 16.4开启，废弃的函数预计在React 17.0移除

static getDerivedStateFromProps

作为被废弃的componentWillReceiveProps的替代，React提供了一个新的函数static getDerivedStateFromProps(nextProps, prevState)
注意前面的static，这意味着在这个函数中我们不能使用this, 该函数的返回值将用于更新state。如果不需要更新state，就返回null

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.text === prevState.text) return null;
  return { text: nextProps.text }; // 相当于setState({ text: nextProps.text });
}

严格模式和异步模式

import React, { StrictMode } from 'react';
// ...
<StrictMode>
  // ...
</StrictMode>

当你在严格模式下使用了不建议的函数，你会得到一个警告信息 同样的unsafe_AsyncMode现在暂时没有用，用于未来的异步渲染