首頁猿問將 const...

將 const 值存儲在變量和狀態(tài)之間有區(qū)別嗎？

JavaScript

ITMISS 2022-05-26 16:57:17

我注意到在 React 功能組件中實現(xiàn)看似相同的事情的幾種方法。當(dāng)您擁有本質(zhì)上是僅在此組件內(nèi)部需要的配置值時（只是一個常量值，從未傳入或修改）您可以只使用常規(guī)值，const也可以將其存儲在組件的狀態(tài)中。標準變量：function Example1() { const a = 1 return <div>{ a }</div>}存儲狀態(tài)：function Example2() { const [a] = useState(1) return <div>{ a }</div>}我得到的印象是，在幕后這將導(dǎo)致 Example1 在每次渲染上創(chuàng)建一個變量然后將其處理掉，而 Example2 將創(chuàng)建一次變量并保持它直到組件被卸載。那準確嗎？就性能/良好實踐而言，這些方法之一是否更可取？

查看完整描述

3 回答

蕪湖不蕪

TA貢獻1796條經(jīng)驗獲得超7個贊

那準確嗎？

是的，正如您所說，Example1在每個渲染上創(chuàng)建一個變量（在范圍的末尾將其標記為“一次性” - 與 React 無關(guān)，但與 Javascript 無關(guān)），Example2創(chuàng)建一次變量并維護它直到組件被卸載（或此變量的狀態(tài)通過setState) 更改。

就性能/良好實踐而言，這些方法之一是否更可??？

作為一個好的做法 - Example1。

至于性能，應(yīng)該是Example1。Example2運行useState并將值a與每個渲染上的先前狀態(tài)進行比較，這比聲明變量“昂貴得多”。

一個更好的例子是比較組件引用/記憶變量與變量（示例1）：

function Example2() {

const a = useRef(1);

const b = useMemo(() => 1, []);

return <div>{a.current} , </div>

}

但答案幾乎是一樣的。

看到這樣的代碼表明 refa 可能會改變。的使用useMemo表示這b是一個“繁重的計算”變量，如果不是，它只是一個開銷（與上面的解釋相同）并且更好地使用示例 1。

反對回復(fù) 2022-05-26

尚方寶劍之說

TA貢獻1788條經(jīng)驗獲得超4個贊

將此答案的重點放在何時使用什么上。

基本概念，

如果您需要觀察一個值并對其做出反應(yīng)，將其存儲在狀態(tài)中是有意義的。
如果您只想存儲一個值以用于顯示/計算目的，則使用 aconst/let更合適。

現(xiàn)在在你的第二個例子中

const [a] = useState(1)

這行代碼是錯誤的。那是因為您正在添加觀察者但不接受 setter 回調(diào)。

Example1 在每次渲染上創(chuàng)建一個變量

是的，這是正確的。在 Example2 中，它創(chuàng)建了 1 個變量，但是，React 中的狀態(tài)是不可變的。這意味著，每次渲染，整個對象都會被復(fù)制到一個臨時變量，銷毀并再次創(chuàng)建。由于這個事實，建議不要將大型對象存儲在狀態(tài)中，因為它會對您的性能產(chǎn)生不利影響。

反對回復(fù) 2022-05-26