React Context 的用法
在React的官方文档中,Context
被归类为高级部分(Advanced),属于React的高级API,但官方并不建议在稳定版的App中使用Context。
The vast majority of applications do not need to use content.
If you want your application to be stable, don't use context. It is an experimental API and it is likely to break in future releases of React.
很多优秀的React组件都通过Context来完成自己的功能,比如react-redux的
<Provider />
,就是通过Context
提供一个全局态的store
,拖拽组件react-dnd,通过Context
在组件中分发DOM的Drag和Drop事件,路由组件react-router通过Context
管理路由状态等等。在React组件开发中,如果用好Context
,可以让你的组件变得强大,而且灵活。Context的定义
当你不想在组件树中通过逐层传递props
或者state
的方式来传递数据时,可以使用Context
来实现跨层级的组件数据传递。
In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API.
如何使用Context
如果要Context
发挥作用,需要用到两种组件,一个是Context
生产者(Provider),通常是一个父节点,另外是一个Context
的消费者(Consumer),通常是一个或者多个子节点。所以Context
的使用基于生产者消费者模式。
对于父组件,也就是Context
生产者,需要通过一个静态属性childContextTypes
声明提供给子组件的Context
对象的属性,并实现一个实例getChildContext
方法,返回一个代表Context
的纯对象 (plain object) 。
- 相比
props
和state
,React的Context
可以实现跨层级的组件通信。 - Context API的使用基于生产者消费者模式。生产者一方,通过组件静态属性
childContextTypes
声明,然后通过实例方法getChildContext()
创建Context
对象。消费者一方,通过组件静态属性contextTypes
申请要用到的Context
属性,然后通过实例的context
访问Context
的属性。 - 使用
Context
需要多一些思考,不建议在App中使用Context
,但如果开发组件过程中可以确保组件的内聚性,可控可维护,不破坏组件树的依赖关系,影响范围小,可以考虑使用Context
解决一些问题。 - 通过
Context
暴露API或许在一定程度上给解决一些问题带来便利,但个人认为不是一个很好的实践,需要慎重。 - 旧版本的
Context
的更新需要依赖setState()
,是不可靠的,不过这个问题在新版的API中得以解决。 - 可以把
Context
当做组件的作用域来看待,但是需要关注Context
的可控性和影响范围,使用之前,先分析是否真的有必要使用,避免过度使用所带来的一些副作用。 - 可以把
Context
当做媒介,进行App级或者组件级的数据共享。 - 设计开发一个组件,如果这个组件需要多个组件关联组合的,使用
Context
或许可以更加优雅。