是否已更新到不通过常用转播传播的上下文？当上下文更改时，我看不到日志/颜色更改。
对上下文值的更新不会触发提供者的所有子代的重新渲染，而是仅触发从Consumer内部渲染的组件，因此在您的情况下，尽管number组件包含Consumer，但不会重新渲染Number组件，而只是Consumer中的render函数，因此值在上下文更新时会更改。这样，它的性能就很高，因为它不会触发所有子项的重新渲染。
该提供者的所有使用者是否都已更新？
该提供者的所有使用者都将经历一个更新周期，但是是否重新渲染取决于反应虚拟DOM比较。您可以在控制台中看到的此 演示
您需要确保将组件呈现为ContextProvider组件的子代，并且将处理程序传递给它，而不是内联呈现它们并更新ContextProvider的状态，因为这将触发内部所有组件的重新呈现。的ContextProvider
App.js
constructor() {
super();
this.state = {
number: Math.random() * 100,
text: "testing context api"
updateNumber: this.updateNumber,
};
}
render() {
return (
<AppContext.Provider
value={this.state}
>
{this.props.children}
</AppContext.Provider>
);
}
index.js
class Data extends React.Component {
render() {
return (
<div>
<h1>Welcome to React</h1>
<Number />
<Text />
<TestComp />
<AppContext.Consumer>
{({ updateNumber }) => (
<button onClick={updateNumber}>Change Number </button>
)}
</AppContext.Consumer>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<App>
<Data />
</App>,
rootElement
);
App.js
class App extends Component {
constructor() {
super();
this.state = {
number: Math.random() * 100,
text: "testing context api"
};
}
updateNumber = () => {
const randomNumber = Math.random() * 100;
this.setState({ number: randomNumber });
};
render() {
return (
<AppContext.Provider value={this.state}>
<div>
<h1>Welcome to React</h1>
<Number />
<Text />
<TestComp />
<button onClick={this.updateNumber}>Change Number </button>
</div>
</AppContext.Provider>
);
}
}
602392714
清零编程群