What's new in React16.3(.0-alpha)翻译学习

New context API

上下文的API总是一件神秘的事--它是React的官方文档的API,但是同时开发人员警告我们不要使用它,因为API可能随时间而改变,因此,在React中就会缺少一些说明。但是,现在[RFC phase]已经通过和与新的API相结合。在没有使用Redux或者MobX的情况下,你可以使用新的API来很容易的管理状态。

新的API是React.createContext()用于创建两个组件(通过React.createContext来创建上下文):

pic1

调用工厂函数将返回一个对象, 对象中包含"Provider"和“Consumer
Provider是一个特殊的组件,它的作用是提供数据给它的所有子组件,所以下面这个是它的一个使用例子(Context.Provider的用法):

pic2

这里我们查询所有子组件,我们想把'theme'上下文传进去,我们通过设置value值进行传递,这个值可以是变化的(我们可以把它放在this.state中)。

接下来我们使用Consumer(下图为Context.Consumer的用法):

pic3

如果没有将Consumer放在Provider中,在createContext中声明的默认值将会拿来使用。

请注意下面几点:

1.consumer必须访问相同的上下文组件--如果你创建新的上下文,并且传入相同的参数,一个新的上下文将会被创建,但是它的数据不会传入进去。出于这个原因,将Context考虑成一个组件--它只被创建一次,然后当你需要使用的时候使用export+import.
2.新的语法使用函数作为child(有时被叫做render prop)的方式--如果你对这种方式不熟悉我推荐你看看这篇文章some articles on it.
3.如果你使用新的Context API就不再使用prop-types来具体contextProps

从上下文中传递给函数的数据将会匹配Context.Provider组件中设置的value属性,在Provider修改数据将会引起所有consumers重绘。

New life-cycle methods

下面这些functions随着时间将会被弃用:

1.componentWillMount---用componentDidMount替代.
2.componentWillUpdate---用componentDidUpdate替代.
3.componentWillReceiveProps---一个新函数,static getDerivedStateFromProps被引进.

static getDerivedStateFromProps
随着componentWillReceiveProps被删除,我们需要基于props改变来更新状态---社区决定引入一个新的---static---方法来处理这个问题。

static是什么方法?一个static方法是一个class method/function而不是一个实例。最简单的区别是static方法没有this和在它的前面有个static.

如果这个函数没有this,我们怎么调用this.setState ?答案是我们不会使用,相反,函数应该返回更新后的状态数据,如果不需要更新就返回null(使用getDerivedStateFromProps来更新状态):

pic4

返回值的行为类似于setState的值---你只需要返回变化的状态,其它值将会被保留。
仔细思考(记得初始化状态):

pic5

你仍然需要声明组件的初始状态(在构造函数或类中).
getDerivedStateFromProps被叫做初始挂载和重绘组件,所以你可以使用它而不是基于构造函数创建state.

如果你同时声明getDerivedStateFromProps和componentWillReceiveProps,只有getDerivedStateFromProps将被调用,所以你将会在console中看到一个警告。

pic6

习惯性的,当状态真的更新后你会使用一个callback来确保代码执行,既然这样,请使用componentDidUpdate来替代。

如果你不喜欢static关键字,你可以使用替代的语法:

pic7

参考链接
      What’s new in React 16.3(.0-alpha) by Bartosz Szczeciński

相关文章

此处评论已关闭