日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

  
  
  
  
 
  
  
  
  
   Add 
  
  
  
  
   {list.map(val => val)} 
  
  
  
  
 

 
 
 
 

  
  
  
  
let i = 0; 
  
  
  
  
 
  
  
  
  
export default function App() { 
  
  
  
  
  const [list, setList] = useState([]); 
  
  
  
  
 
  
  
  
  
  const add = () => { 
  
  
  
  
    // ... 
  
  
  
  
  }; 
  
  
  
  
 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
      Add 
  
  
  
  
      {list.map(val => val)} 
  
  
  
  
    

顯示效果：

燒腦的地方在于，調(diào)用add方法插入的是一個「點擊后會調(diào)用 add 方法的按鈕」：

 
 
 
 

  
  
  
  
const add = () => { 
  
  
  
  
    setList( 
  
  
  
  
      list.concat( 
  
  
  
  
        
  
  
  
  
          key={i}  
  
  
  
  
          onClick={add}> 
  
  
  
  
          {i++} 
  
  
  
  
         
  
  
  
  
      ) 
  
  
  
  
    ); 
  
  
  
  
  }; 
 
 
 
 

點擊Add按鈕7下后的顯示效果：

那么問題來了，點擊帶數(shù)字按鈕(會調(diào)用和點擊Add按鈕一樣的add方法)后會有什么效果呢?

state的組裝和閉包問題

如果你認(rèn)為會插入一個新按鈕：

那就錯了。

正確答案是：點擊對應(yīng)按鈕后list長度變?yōu)椤赴粹o對應(yīng)數(shù)字 + 1」，且最后一項的數(shù)字為「點擊前最大數(shù)字 + 1」。

比如，點擊前最大數(shù)字為6

如果點擊 0，list長度變?yōu)? + 1 = 1，且最后一項為6 + 1 = 7：

如果點擊 2，list長度變?yōu)? + 1 = 3，且最后一項為6 + 1 = 7：

這是兩個因素共同作用的結(jié)果：

• Hooks的閉包問題
• state是如何組裝的

原因分析再來看看add方法：

 
 
 
 

  
  
  
  
const add = () => { 
  
  
  
  
    setList( 
  
  
  
  
      list.concat( 
  
  
  
  
        
  
  
  
  
          key={i}  
  
  
  
  
          onClick={add}> 
  
  
  
  
          {i++} 
  
  
  
  
         
  
  
  
  
      ) 
  
  
  
  
    ); 
  
  
  
  
  }; 
 
 
 
 

button點擊后調(diào)用add，所以會基于add所屬上下文(App函數(shù))形成閉包，閉包中包括：

• add
• list
• setList

• i屬于module級作用域，不在該閉包內(nèi)

其中l(wèi)ist與setList來自于useState調(diào)用后的返回值：

 
 
 
 

  
  
  
  
const [list, setList] = useState([]); 
 
 
 
 

一種常見的認(rèn)知誤區(qū)是：多次調(diào)用useState返回的list是同一個引用。

事實上，每次調(diào)用useState返回的list都是基于如下公式計算得出的：

• 基準(zhǔn)state + update1 + update2 + ... = 當(dāng)前state

所以是一個全新的對象。

• 如果你想了解更多update、state計算的細(xì)節(jié)，參考React技術(shù)揭秘[1]

當(dāng)首屏渲染時：

1. App組件首次render
2. 創(chuàng)建list = []
3. Add依賴add，形成閉包，閉包中的list = []

接下來，點擊Add按鈕：

1. 調(diào)用add方法，該方法來自于首屏渲染創(chuàng)建的閉包
2. add方法中依賴的list來自于同一個閉包，所以list = []
3. {i++}依賴add，形成閉包，閉包中的list = []

所以，對于按鈕0，

任何時候點擊他實際上執(zhí)行的都是：

 
 
 
 

  
  
  
  
setList( 
  
  
  
  
  [].concat( 
  
  
  
  
    {i++} 
  
  
  
  
  ) 
  
  
  
  
); 
 
 
 
 

那么如何修復(fù)這個問題呢，也很簡單，將setList的參數(shù)改為函數(shù)形式：

 
 
 
 

  
  
  
  
// 之前 
  
  
  
  
setList(list.concat({i++})); 
  
  
  
  
// 之后 
  
  
  
  
setList(list => list.concat({i++})); 
 
 
 
 

函數(shù)參數(shù)中的list來自于Hooks中保存的list，而不是閉包中的list。

總結(jié)

由于Hooks總是在組件render時才會計算新狀態(tài)，這為Hooks帶來比較重的心智負(fù)擔(dān)。

相比而言，采用「細(xì)粒度更新」實現(xiàn)的Hooks(比如VUE的Composition API)可以實時更新狀態(tài)，操作起來更符合直覺。

在使用Hooks過程中，你有沒有遇到類似的頭疼問題呢?

參考資料

[1]React技術(shù)揭秘:

https://react.iamkasong.com/state/mental.html#%E5%90%8C%E6%AD%A5%E6%9B%B4%E6%96%B0%E7%9A%84react