我一直在try 理解新的React Context API，并在使用它.我只想判断一个简单的例子——当数据更新到提供者时，所有的内容都会重新呈现.
判断100
所以，在我的例子中，我有一个App组件，它的状态是这样的--
this.state = {
number - A random number
text - A static text
}
我从这里创建了一个新的React上下文，其中包含来自state的number和text，并将值传递给两个使用者Number和Text.
所以我的假设是，如果随机数更新，它会改变上下文，两个组件都会触发重新渲染.
但在现实中，价值正在更新，但没有重播发生.
我的问题是-
是否更新到上下文中，而不是通过usususal rerender进行传播？因为我看不到我的日志(log)/ colored颜色 随着上下文的变化而变化.
该Provider 的所有消费者是否都已更新？
是否更新到上下文中，而不是通过usususal rerender进行传播？因为我看不到我的日志(log)/ colored颜色 随着上下文的变化而变化.
对上下文值的更新不会为提供程序的所有子级触发重新呈现，而只是从使用者内部呈现的组件，因此在您的情况下，虽然number component包含使用者，但number component不会重新呈现，而不仅仅是使用者中的渲染函数，因此在上下文更新时值会发生变化.这样，它的性能相当好，因为它不会触发所有子级的重新渲染.
该Provider 的所有消费者是否都已更新？
该提供者的所有使用者都将经历一个更新周期，但它们是否重新呈现取决于react虚拟DOM比较.你可以在100的控制台上看到这方面的演示
EDIT
您需要确保的是，这些组件被呈现为ContextProvider组件的子组件，并且您将处理程序传递给它，而不是内联呈现它们并更新ContextProvider的状态，因为这将触发ContextProvider个组件内所有组件的重新呈现
Performant usage
应用程序.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>
);
}
指数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
);
Less Performant usage
应用程序.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>
);
}
}