我有一個只渲染一次然后被銷毀的組件，我已經實作了“Comp3”方式。
使用“useEffect”以我作為道具收到的num值計算str，然后使用“useEffect”setter存盤結果，以便在html中使用結果。
//Let say this function is inside the functional component
function numToStr(num:number):string{
switch(num){
case 1:
return "One";
case 2:
return "Two";
...
}
}
function Comp1({num:number}){
const numAsStr = numToStr(num);
return <span>{numAsStr}</span>
}
function Comp2({num:number}){
const [numAsStr] = useState(numToStr(num));
return <span>{numAsStr}</span>
}
function Comp3({num:number}){
const [numAsStr,setNumAsStr] = useState();
useEffect(()=>{
setNumAsStr(numToStr(num));
},[])
return <span>{numAsStr}</span>
}
function Comp4({num:number}){
const numAsStr = useMemo(()=>numToStr(num),[]);
return <span>{numAsStr}</span>
}
我的問題是：
就最佳實踐/“反應方式”而言，最佳解決方案是什么？
每個實作如何影響性能？
我知道組件只呈現一次的事實是否會影響我選擇的實作方式？
或者我應該把這個組件當作我不知道它應該被渲染一次并且在這種情況下仍然支持“監視”正在更改的道具的選項？（將其添加到 useEffect / useMemo 陣列中）
謝謝！
uj5u.com熱心網友回復：
如果正在完成的計算strToNum很便宜（就像在您的簡化示例中一樣），那么 中的方法Comp1可能是最好和最簡單的。每次組件重新渲染時它們都會運行，因此它們始終是最新的。
如果計算是昂貴的，對付這種推薦的方法是將useMemo鉤，就像在你Comp4的例子。但是，您需要確保num在您的依賴陣列中包含輸入變數，以便numAsStr在num更改時重新計算。例如：
function Comp4({num:number}){
const numAsStr = useMemo(()=>numToStr(num),[num]);
return <span>{numAsStr}</span>
}
useState按原樣使用Comp2只會numToStr在初始渲染中運行，因此如果num發生更改，您將獲得過時的值。
useEffect像您一樣使用會Comp3引入不必要的雙重渲染 - 例如，它首先在沒有 for 值的情況下numAsStr渲染，然后再次渲染。
我知道你說過你目前確定它永遠不會再次重新渲染 - 所以上面提到的一些缺點/問題可能不適用于這種情況（然后我會采用這種Comp1方法，因為它更簡單）但是在根據我的經驗，最好不要做出這樣的假設——你（或你的隊友）在一個月內嘗試重構某些東西時會記得嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/338718.html
標籤：javascript 反应 反应钩子 使用状态 反应功能组件