react上下文context是一个很有趣的api,一方面react官网不推荐使用,另一方面许多官方依赖在使用
目前使用context的依赖包:
react-redux、mobx-react、react-router、拖拽组件react-dnd
context分为新版后旧版,这里都介绍下
————————————————————————————————————————————————————————
context旧版使用步骤:
1,根组件定义静态属性:
// 声明Context对象属性
static childContextTypes = {
propA: PropTypes.string,
visibleA:PropTypes.string,
methodA: PropTypes.func
}
2,返回context对象,约定方法名
// 返回Context对象,方法名是约定好的
getChildContext () {
return {
propA: this.state.propA,
methodA: this.changeStateByChildren
}
}
注意:如果context的值是动态的采用state管理,更改某个context值时,改变根组件的state
3,组件调用context先定义静态属性,根据约定好的参数类型,否则会出现未定义
static contextTypes = {
propA: PropTypes.string,
methodA:PropTypes.func
}
4,下文改变context的值,通过context的函数去改变根组件的状态即可
———————————————————————————————————————————————————————
新版context的使用步骤和方法:更好的解释了生产者和消费者模式
1,先定义全局context对象
import React from 'react'
const GlobalContext = React.createContext()
export default GlobalContext
2,根组件引入GlobalContext,并使用GlobalContext.Provider(生产者)
<GlobalContext.Provider
value={{
background: 'green',
color: 'white',
content:this.state.content,
methodA:this.changeStateByChildren
}}
>
</GlobalContext.Provider>
注意:传入的value为根context对象的值,如果是动态的,使用状态管理
3,组件引入GlobalContext并调用context,使用GlobalContext.Consumer(消费者)
<GlobalContext.Consumer>
{
context => {
return (
<div>
<h1 style={{background: context.background, color: context.color}}>
{context.content}
</h1>
<Input methodA = {context.methodA} value={context.content}></Input>
</div>
)
}
}
</GlobalContext.Consumer>
注意:GlobalContext.Consumer内必须是回调函数,改变context,通过context方法改变根组件状态
——————————————————————————————————————————————————————
context优缺点:
优点:跨组件访问数据
缺点:react组件树种某个上级组件shouldComponetUpdate 返回false,当context更新时,不会引起下级组件更新