只在React组件的状态更新时运行一次的代码

Question

我在我的游戏项目中有一个名为index.tsx的react组件，它具有更新状态的变量，假设每当用户余额发生变化时，组件都会刷新。

我正在创建一个“净头寸”功能，即在开始游戏时将用户余额保存为参考值，然后只应从该参考值中进行每笔交易的加减。

假设用户在开始时的余额为$5000（在footerBalance变量中），那么净头寸标签将显示该值为0（在netPositionBalance变量中），以$5000作为基准。现在用户在下一次游戏中赢得$100，他的余额将变为$5100（在footerBalance变量中），净头寸将变为$100（在netPositionBalance变量中）。

现在的情况是，一旦余额更新，我的净头寸金额也会更新，因为它在同一个组件文件中，净头寸变为0。

我希望在开始时修复这个问题，并且这段特定的代码不应该重新渲染，无论组件如何刷新。

获取余额的代码块如下：

const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance); //这会改变余额，即它将给出$5000，在赢得$100后，它将变为$5100

我需要一个名为footerBalanceAtStart的变量，以便我可以从起始点显示净头寸（在变量netPositionBalance中），类似于以下内容：

let netPositionBalance = Number(footerBalanceAtStart) - Number(footerBalance); //在游戏过程中，它应该更新为$100

我希望“footerBalanceAtStart”被定义为只获取一次余额，然后在整个项目的持续时间内保持不变。

Answer 1

所以我找到了答案。显然我也可以在这里使用useEffect，像这样：

const [footerBalanceAtStart, setAny] = useState(footerBalance);

现在它只会存储一次值，并且不会在没有状态更新函数setAny()的情况下自动更改