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方法插入的是一個(gè)「點(diǎn)擊后會(huì)調(diào)用 add 方法的按鈕」：

 
 
 
 

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

點(diǎn)擊Add按鈕7下后的顯示效果：

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

state的組裝和閉包問(wèn)題

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

那就錯(cuò)了。

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

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

如果點(diǎn)擊 0，list長(zhǎng)度變?yōu)? + 1 = 1，且最后一項(xiàng)為6 + 1 = 7：

如果點(diǎn)擊 2，list長(zhǎng)度變?yōu)? + 1 = 3，且最后一項(xiàng)為6 + 1 = 7：

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

• Hooks的閉包問(wèn)題
• state是如何組裝的

原因分析再來(lái)看看add方法：

 
 
 
 

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

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

• add
• list
• setList

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

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

 
 
 
 

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

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

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

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

所以是一個(gè)全新的對(duì)象。

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

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

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

接下來(lái)，點(diǎn)擊Add按鈕：

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

所以，對(duì)于按鈕0，

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

 
 
 
 

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

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

 
 
 
 

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

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

總結(jié)

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

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

在使用Hooks過(guò)程中，你有沒(méi)有遇到類似的頭疼問(wèn)題呢?

參考資料

[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