更新到的上下文不是通过通常的重新渲染传播的吗?因为当上下文发生变化时,我无法看到我的日志/颜色发生变化。
对上下文值的更新不会触发提供程序的所有子级的重新渲染,而只会触发从 Consumer 内部渲染的组件,因此在您的情况下,尽管 number 组件包含 Consumer,但 Number 组件不会重新渲染,而只是 Consumer 中的渲染函数,因此值会在上下文更新时发生变化。这样它的性能就相当高了,因为它不会触发所有子项的重新渲染。
该提供者的所有消费者是否都已更新?
该 Provider 的所有消费者都将经历一个更新周期,但是否重新渲染由 React 虚拟 DOM 比较决定。您可以在控制台中看到此演示sandbox
EDIT
您需要确保的是,组件被渲染为 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>
);
}
}