React Context上下文学习笔记（一）
我们知道，React中的数据传递是自上而下的（从父组件传给子组件），通过props逐层传递。 但是这样层数多了，会极其繁琐。因此，就提到了Context上下文共享数据，这种方法不需要显式的通过props传递。
一、Context：为了给某个组件共享全局数据。
例如：网站当前登陆用户、主题、首选语言等。
Context 主要应用场景：很多不同层级的组件需要访问一些同样的数据。
谨慎使用，会使复用性变差。
const ThemeContext = React.createContext("light");
const App2 = () => {
return (
<ThemeContext.Provider value="yellow">
<Toolbar />
</ThemeContext.Provider>
);
};
const Toolbar = () => {
return (
<div>
<ThemeButton />
</div>
);
};
class ThemeButton extends React.Component {
// 指定 contextType 读取当前的 theme context。 React 会往上找到最近的 theme Provider，然后使用它的值。
// 在这个例子中，当前的 theme 值为 “yellow”。
static contextType = ThemeContext; // 可以使用 static 这个类属性来初始化你的 contextType。
render() {
return <Button theme={this.context} />;
}
}复制代码const MyContext = React.createContext(defaultValue);复制代码
创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。
通过新旧值检测来确定变化，使用了与 Object.is 相同的算法。
<MyContext.Provider value={变量} >复制代码Provider接受一个value属性，传递给消费组件，可以一对多。
Provider的value发生变化时，所有使用它的消费组件都会重新渲染。
要将value提到state中，否则会触发所有consumers组件的重新渲染。
错误案例：
class App extends React.Component {
render() {
return (
<MyContext.Provider value={{something: 'something'}}>
<Toolbar />
</MyContext.Provider>
);
}
}复制代码正确写法：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: {something: 'something'},
};
}
render() {
return (
<MyContext.Provider value={this.state.value}>
<Toolbar />
</MyContext.Provider>
);
}
}
作者：qingyingWin
链接：https://juejin.cn/post/7016967050765549598