React
中使⽤
Context
实现祖代组件向后代组件跨层级传值。 Vue中的
provide & inject
来源于
Context
Context API
React.createContext
创建⼀个
Context
对象。当
React
渲染⼀个订阅了这个Context 对象的组件，这个组件会从组件树中离⾃身最近的那个匹配Provider
中读取到当前的
context
值。
Context.Provider
Provider
接收⼀个
value
属性，传递给消费组件，允许消费组件订阅 context
的变化。⼀个
Provider
可以和多个消费组 件有对应关系。多个 Provider
也可以嵌套使⽤，⾥层的会覆 盖外层的数据。 当 Provider
的
value
值发⽣变化时，它内部的所有消费组 件都会重新渲染。Provider
及其内部
consumer
组件都不受 制于 shouldComponentUpdate
函数，因此当
consumer
组 件在其祖先组件退出更新的情况下也能更新。
Class.contextType
挂载在
class
上的
contextType
属性会被重赋值为⼀个由
React.createContext()
创建的
Context
对象。这能让你 使⽤ this.context
来消费最近
Context
上的那个值。你可 以在任何⽣命周期中访问到它，包括 render
函数中。
Context.Consumer
这⾥，
React
组件也可以订阅到
context
变更。这能让你在
函 数式组件
中完成订阅
context。
这个函数接收当前的
context
值，返回⼀个
React
节点。传
递给函数的
value
值等同于往上组件树离这个
context
最近
的
Provider
提供的
value
值。如果没有对应的
Provider
，
value
参数等同于传递给
createContext()
的 defaultValue。
使⽤
Context
创建
Context =>
获取
Provider
和
Consumer => Provider
提供 值 => Consumer
消费值
范例：共享主题⾊
import React, {Component} from "react";
import {ThemeProvider} from "../themeContext";
import ContextTypePage from"./ContextTypePage";
import ConsumerPage from "./ConsumerPage";
class ContextPage extends Component {
constructor(props) {
super(props);
this.state = {
theme: {
themeColor: "red"
}
};
}
changeColor = () => {
const {themeColor} = this.state.theme;
this.setState({
theme: {
themeColor: themeColor === "red" ? "green" : "red"
}
});
};
render() {
const {theme} = this.state;
return (
<div className="App">
{/* 组件跨层级通信 */}
<button onClick= {this.changeColor}>change color</button>
{/* 如果把这⾥的MyProvider注释掉，ContextTypePage和ConsumerPage⾥将取不到theme值，⽽取默认值pink */}
<ThemeProvider value={theme}>
<ContextTypePage />
<ConsumerPage />
</ThemeProvider>
</div>
);
}
}
export default ContextPage;
//themeContext.js
import React from "react";
export const ThemeContext = React.createContext({themeColor: "pink"});
export const ThemeProvider = ThemeContext.Provider;
export const ThemeConsumer = ThemeContext.Consumer;
// pages/ContextTypePage.js
import React, {Component} from "react";
import {ThemeContext} from "../themeContext";
export default class ContextTypePage extends Component {
static contextType = ThemeContext;
render() {
console.log("ContextTypePage",this.context); //sy-log
const {themeColor} = this.context;
return (
<div className="border">
<h3 className= {themeColor}>ContextTypePage</h3>
</div>
);
}
}
// pages/ConsumerPage.js
import React, {Component} from "react";
import {ThemeConsumer} from "../themeContext";
export default class ConsumerPage extends Component {
render() {
return (
<div className="border">
<h3>ConsumerPage</h3>
<ThemeConsumer>{ctx => <HandleTabBar{...ctx} />}</ThemeConsumer>
</div>
);
}
}
function HandleTabBar({themeColor}) {
console.log("themeColor", themeColor); //sylog
return <div className={themeColor}>⽂本</div>;
}
注意：
因为
context
会使⽤参考标识（
reference identity
）来决定 何时进⾏渲染，这⾥可能会有⼀些陷阱，当 provider
的⽗组 件进⾏重渲染时，可能会在 consumers
组件中触发意外的渲 染。
为了防⽌这种情况，将 value 状态提升到⽗节点的 state ⾥。
原文：视频讲解笔记
