介紹代碼
我試圖用 React 撰寫一個鍛煉代碼，它說明了一輛公共汽車和它的座位。保留的座位是紅色的，不可選擇。其余座位可以通過單擊它們并在打開的彈出視窗中選擇性別來選擇。您可以
問題
一切正常。但我的問題是關于性能。我知道當狀態發生變化時，該組件將再次呈現。當然，只有更改才會傳遞給 DOM。沒關系。
問題從這里開始，在后臺，組件代碼及其子代碼被完全執行。考慮我的公共汽車有 24 個座位，一個座位是一個組件。每次點擊席位時，無論您是否選擇性別，您都會在控制臺中看到許多日志，這意味著（至少我認為這意味著）一切都會再次執行。
我的請求
如何防止額外的后臺操作并改進結構以避免它們？
usestate如果我能以某種方式解決它，我沒有特別堅持使用它。
uj5u.com熱心網友回復：
這是 React 組件的預期行為，如果狀態重新渲染，所有子組件都會重新渲染（如果有變化）。在您的情況下，您將OnSelectSeatHandler作為道具傳遞給BusSeat組件，這是一個函式。由于 javascript 的計算() => {} === () => {}結果為 false，因此您的 react 組件將表現得好像 prop 在每次渲染時都發生了變化。所以，流程是：點擊座位 -> 渲染組件 -> 渲染子級。
一種解決方案
我們需要告訴 React 當 BusBody 重新渲染時 BusSeat 不應該重新渲染。為了實作這一點，我們需要兩件事：memo和useCallback來自“反應”。這些并非沒有權衡，有很多很好的資源可供閱讀，以了解何時使用memo,useMemo和useCallback.
話雖如此，我所做的是：
- 將組件包裝
BusSeat到備忘錄中：
import { memo } from "react";
export default memo(function BusSeat(props) {
- 將 to包裹
OnSelectHandler起來useCallback。為此，我們需要一個干凈的依賴陣列，這樣函式實際上不會在每次按鈕單擊時重新渲染。因此，我洗掉了seatClicked并移到GetItem了反應組件的頂部，因此它不會被重新創建：
const OnSelectSeatHandler = useCallback(
(e, number) => {
var seat = GetItem(number, props.items);
if (seat[0].IsEmpty) {
setSeatClicked((prevSeat) => (prevSeat === null ? number : null));
setXPos(e.target.offsetLeft);
setYPos(e.target.offsetTop);
} else if (seat[0].user) {
props.items[seat[1]] = {
...seat[0],
IsEmpty: true,
user: false,
type: ""
};
setSelectedSeatCount((prev) => prev - 1);
}
},
[props.items]
);
這是一個有效的代碼框
注意：盡量避免像在props.items[1] = ...
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/497590.html
標籤：javascript 反应 表现
上一篇：如何更快地從np.ndarray中取出與[:,0]中每個數字的符號相同數量的連續數字？
下一篇：用鏈接的值計算