在react中,组件的传值方式一般都是通过props属性来进行传递数据的,对于简单的组件来说是适用的,但是对于一些极其复杂的组件来说是非常致命且难以维护的,Context就提供了这样的一种解决方案,不用通过组件一层一层的向下传递到指定的组件中。
一、简单示例
在以下的示例代码中,将会简单的展示如何使用一个context,例子中用了PageComp
、Comp01
、Comp02
3个嵌套组件来实现这样一个需求,从最高层级的PageComp
组件中将数据传递给Comp02
中并展示出来,按照以往传统的做法是通过props层层的向下传递,但是现在有了context就不用这么繁琐了。
import React from 'react'
// 这里给的是一个默认值,当没有匹配到Provider的时候,就会使用这个默认值
const MyContext = React.createContext("my Data1!")
class PageComp extends React.Component{
render(){
return(
<div className="container-page">
// 注意:每当Provider中的value值发生改变,它内部所有使用的组件都会重新渲染
<MyContext.Provider value="传递的data">
<Comp01 />
</MyContext.Provider>
</div>
)
}
}
// 中间组件
class Comp01 extends React.Component{
render(){
return(
<div>
<Comp02 />
</div>
)
}
}
class Comp02 extends React.Component{
static contextType = MyContext
render(){
return(
<div>context中的数据展示:{ this.context }</div>
)
}
}
二、更新context
在深层嵌套的组件中更新context是很有必要的,我们通过以下的一个例子来尝试更新context。
const MyContext = React.createContext({
myData:"my Data!",
changeData:()=>{}
})
interface InterfaceState{
myData:string
changeData:any
count:number
}
// 高层级组件
class Page03 extends React.Component<any,InterfaceState>{
constructor(props:any){
super(props)
this.state = {
count:0,
myData:"",
changeData:this.changeData
}
}
changeData=()=>{
this.setState(
(state:any)=>({
count:state.count+1
})
)
}
render(){
return(
<div className="container-page">
<MyContext.Provider value={ this.state }>
<Comp01 />
</MyContext.Provider>
</div>
)
}
}
// 中间组件
class Comp01 extends React.Component{
render(){
return(
<div>
<Comp02 />
</div>
)
}
}
// 低层级组件
class Comp02 extends React.Component{
static contextType = MyContext
render(){
const {count,changeData} = this.context
return(
<div>
我的数据:{ count }
<Button onClick={ changeData }>按钮改变context中的状态</Button>
</div>
)
}
}