只在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()的情況下自動更改