在React（本机）应用程序中，考虑一个util文件，例如：
let apples = 0;
export function addApple() {
apples++;
}
export function getApples() {
return apples;
}是否可以这样存储apple的状态，以便组件可以像这样修改它：
import { addApple } from "./myUtil";
export function AddAppleButton {
return <button onClick={addApples} />
}非React代码可以像这样使用它：
import { addApple } from "./myUtil";
export function addMultipleApples(numberOfApples) {
for (let i = 0; i < numberOfApples; i++) {
addApple();
}
}用这种方式管理上下文的利弊是什么？
1条答案
按热度按时间fjaof16o1#
基本上，它不会工作。由于
apples不受react状态管理，当它改变时，React不会触发重新呈现，因此从它读取的值不会在屏幕上更新。如果由于其他原因发生重新呈现，它可能会 * 意外地 * 看起来像是工作的。React将获得新的值--但这将是极其脆弱的，不可避免地导致不确定的状态和您不希望存在的竞争条件。对于您需要做的事情，构建存储容器会更有意义（类似于类）并将其置于React状态，然后向该存储添加方法，以便可以从外部读取和写入其值。存储需要通过订阅机制或类似机制通知侦听它的组件值已更改。这是一个相当复杂的设置，因此，采用一个支持从React外部阅读/写入存储的库可能会更好，比如Zustand。