Context 通過組件樹提供了一個傳遞數據的方法，從而避免了在每一個層級手動的傳遞 props 屬性。
在一個典型的 React 應用中，數據是通過 props 屬性由上向下（由父及子）的進行傳遞的，但這對于某些類型的屬性而言是極其繁瑣的（例如：地區偏好，UI主題），這是應用程序中許多組件都所需要的。 Context 提供了一種在組件之間共享此類值的方式，而不必通過組件樹的每個層級顯式地傳遞 props 。
Context 設計目的是為共享那些被認為對于一個組件樹而言是“全局”的數據
是不是可以理解為：Context是一個局部的全局變量
來看一個例子
function F1(props) {
return (
<div className="border">
1111,{props.n1}
<F2 n2={props.n1} />
</div>
);
}
function F2(props) {
return (
<div className="border">
2222,{props.n2}
<F3 n3={props.n2} />
</div>
);
}
function F3(props) {
return (
<div className="border">
3333,{props.n3}
<F4 n4={props.n3} />
</div>
);
}
function F4(props) {
return <div className="border">4444, {props.n4}</div>;
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
n: 99
};
}
render() {
return <F1 n1={this.state.n} />;
}
}
如果想在F4里獲取到App里的n，必須要一層層的傳下去
再來看看如果使用Context該怎么做
function F1() {
return (
<div className="border">
1111
<F2/>
</div>
);
}
function F2() {
return (
<div className="border">
2222
<F3/>
</div>
);
}
function F3() {
return (
<div className="border">
3333
//必須用ThemeContext.Consumer包裹住想要獲取值的組件，然后用函數的方式傳值
<ThemeContext.Consumer>
{(n) => <F4 n4={n} />}
</ThemeContext.Consumer>
</div>
);
}
function F4(props) {
return (
<div className="border">4444, {props.n4}</div>
)
}
//聲明ThemeContext
const ThemeContext = React.createContext();
class App extends React.Component {
render() {
return (
<div>
//必須用ThemeContext.Provider包裹外層
//在value里設置初始值
<ThemeContext.Provider value='99'>
return <F1 />
</ThemeContext.Provider>
</div>
)
}
}
來看看babel編譯以后的樣子就更容易理解了
來對這塊做個解析
<ThemeContext.Consumer>
{(n) => <F4 n4={n} />}
</ThemeContext.Consumer>
我們試著來還原一下這個結構
function F1(){
console.log('我被調用了')
return 'F1'
}
function Abc(props){
//可以直接打印{F1}的值
console.log(props.children)
//也可以直接調用F1
props.children()
return (
<div>
{props.x}
{props.children} //通過這個可以拿到{F1}
</div>
)
}
function App(){
return (
<Abc x='Abc'>
{F1}
</Abc>
)
}
在Abc里調用F1時，可以給F1傳值
function Abc(props){
let x = 100
//調用F1時給它傳值
props.children(x)
return (
<div>
{props.x}
{props.children} //通過這個可以拿到{F1}
</div>
)
}
function App(){
return (
<Abc x='Abc'>
//直接使用箭頭函數
{(n)=>console.log('我得到的信息是',n)}
</Abc>
)
}
現在就很清楚了，Abc就是ThemeContext.Consumer
function ThemeContext.Consumer(props){
let x = 100
//調用F1時給它傳值,并且可以得到F1的返回值
let result = props.children(x)
return (
<div>
{props.children} //通過這個可以拿到{F1}
</div>
)
}
function App(){
return (
<ThemeContext.Consumer >
//直接使用箭頭函數,把F1里的內容換成標簽,
{(n)=><div>{n}</div>}
</ThemeContext.Consumer>
)
}
這樣就解釋了ThemeContext.Consumer是什么東西----一個接受函數的組件
再回過頭來看
<ThemeContext.Provider value='99'>
return <F1 />
</ThemeContext.Provider>
ThemeContext.Provider的value不光能傳普通的數字、字符串，也可以傳函數、對象
來實現一個通過ThemeContext.Provider讓孫元素調用改變值的列子
function F1() {
return (
<div className="border">
1111
<F2/>
</div>
);
}
function F2() {
return (
<div className="border">
2222
<F3/>
</div>
);
}
function F3() {
return (
<div className="border">
3333
<ThemeContext.Consumer>
{(x)=><F4 n4={x.n} setN={x.setN} />}
</ThemeContext.Consumer>
</div>
);
}
function F4(props) {
return (<div className='border'>
<div className="border">4444, {props.n4}</div>
<button onClick={props.setN}>Click me</button>
</div>
)
}
const ThemeContext = React.createContext();
class App extends React.Component {
constructor(props){
super()
this.state = {
x : {
n : 99,
setN : ()=>{
this.setState({
x : {
...this.state.x, //拓展運算符，保留之前的this.state.x
n : this.state.x.n + 1
}
})
}
}
}
}
render() {
return (
<div>
<ThemeContext.Provider value={this.state.x}>
return <F1 />
</ThemeContext.Provider>
</div>
)
}
}
