React中一般是用props层层进行数据传递,还有一种跨组件的传递方式:context,今天看看主要使用方法。

通过Provider/Consume实现Context

首先需要创建一个Context,创建的时候需要填上默认值。

然后上层使用Provider,将需要传的数据放在Provider上:

底层利用Consumer,得到上层传递的数据:

通过childContextTypes/contextTypes实现Context

首先需要引用prop-types,方式为:import PropTypes from 'prop-types'。

在需要传递数据的上层定义childContextTypes,也就是下层的数据类型;以及定义getChildContex方法,也就是返给下层的数据:

在底层接收的类中定义对应的类型:

这种的原理就是上层定义的,理论上下层所有的都可以接收,但是实际中我们只对需要接收的下层才定义。这种还有一个问题就是如果中间的某个类的shouldComponentUpdate返回false,那么整个传输失败:

context的更新最好通过state,props的修改去改变,而不要主动触发context改变。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字