React コンポーネントの状態が更新されたときに 1 回だけ実行されるコード

Question

<p>ゲーム プロジェクトに、index.tsx という React コンポーネントがあり、ユーザーの残高が変更されるたびにコンポーネントが更新されることを前提として、状態を更新する変数があります。 </p><p> ゲーム開始時にユーザーの残高を基準値として保存し、その基準値から各トランザクションの加減算のみを行う「ネットポジション」機能を作成しています。 </p><p> ユーザーの最初の残高 (footerBalance 変数) が $5000 であると仮定すると、ネット ポジション ラベルには、$5000 をベースとして、その値が 0 (netPositionBalance 変数) として表示されます。ユーザーは次のゲームで $100 を獲得し、残高は $5100 (footerBalance 変数内) になり、ネット ポジションは $100 (netPositionBalance 変数内) になります。 </p><p> ここで何が起こっているかというと、残高が更新されるとネットポジションの金額も更新され、同じコンポーネントファイル内にあるためネットポジションが0になります。 </p><p>この問題が最初の時点で修正され、コンポーネントがどのように更新されても、この特定のコードが再レンダリングされないことを願っています。 </p>

<p>バランスを取得するためのコード ブロックは次のとおりです。</p> <pre class="brush:php;toolbar:false;">const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance); //これにより残高が変更されます。つまり、$100 を獲得した後に $5000 が与えられます。 、$5100</pre>になります。 <p>次のように、開始点からのネット位置 (変数 netPositionBalance 内) を表示できるように、footerBalanceAtStart という変数が必要です。 </p> <pre class="brush:php;toolbar:false;">let netPositionBalance = Number(footerBalanceAtStart) - Number(footerBalance); //ゲーム中、$100 に更新される必要があります</pre> <p>「footerBalanceAtStart」を定義して、バランスを 1 回だけ取得し、その後はプロジェクトの全期間を通じて一定に保つようにしたいと考えています。 </p>

Answer 1

それで私は答えを見つけました。どうやらここで次のように useEffect を使用することもできるようです:

リーリー

これで、値は 1 回だけ保存され、状態更新関数 setAny()

を使用しないと自動的に変更されません。