大家好，我卡颂。
昨天一个小伙伴发了一个Demo给我，让我解释下起因。
我一看，好家伙，小小一个Demo，知识点囊括了：
Hooks的闭包问题state是如何组装的
置信看懂这个Demo，对函数组件会有更深的意识。
让人懵逼的Demo
Demo蕴含一个按钮、一个列表。
<div className="App"> <button onClick={add}>Add</button> {list.map(val => val)} </div>点击按钮，调用add办法，向列表中插入一项：
let i = 0;export default function App() { const [list, setList] = useState([]); const add = () => { // ... }; return ( <div className="App"> <button onClick={add}>Add</button> {list.map(val => val)} </div> );}显示成果：
烧脑的中央在于，调用add办法插入的是一个点击后会调用 add 办法的按钮：
const add = () => { setList( list.concat( <button key={i} onClick={add}> {i++} </button> ) ); };点击Add按钮7下后的显示成果：
那么问题来了，点击带数字按钮（会调用和点击Add按钮一样的add办法）后会有什么成果呢？
state的组装和闭包问题
如果你认为会插入一个新按钮：
那就错了。
正确答案是：点击对应按钮后list长度变为按钮对应数字 + 1，且最初一项的数字为点击前最大数字 + 1。
比方，点击前最大数字为6
如果点击 0，list长度变为0 + 1 = 1，且最初一项为6 + 1 = 7：
如果点击 2，list长度变为2 + 1 = 3，且最初一项为6 + 1 = 7：
这是两个因素独特作用的后果：
Hooks的闭包问题state是如何组装的
起因剖析
再来看看add办法：
const add = () => { setList( list.concat( <button key={i} onClick={add}> {i++} </button> ) ); };button点击后调用add，所以会基于add所属上下文（App函数）造成闭包，闭包中包含：
- add
- list
- setList
i属于module级作用域，不在该闭包内
其中list与setList来自于useState调用后的返回值：
const [list, setList] = useState([]);一种常见的认知误区是：屡次调用useState返回的list是同一个援用。
事实上，每次调用useState返回的list都是基于如下公式计算得出的：
基准state + update1 + update2 + ... = 以后state
所以是一个全新的对象。
如果你想理解更多update、state计算的细节，参考React技术揭秘
当首屏渲染时：
App组件首次render- 创立
list = [] <button onClick={add}>Add</button>依赖add，造成闭包，闭包中的list = []
接下来，点击Add按钮：
- 调用
add办法，该办法来自于首屏渲染创立的闭包 add办法中依赖的list来自于同一个闭包，所以list = []<button key={i} onClick={add}>{i++}</button>依赖add，造成闭包，闭包中的list = []
所以，对于按钮0，
任何时候点击他实际上执行的都是：
setList( [].concat( <button key={i} onClick={add}>{i++}</button> ));那么如何修复这个问题呢，也很简略，将setList的参数改为函数模式：
// 之前setList(list.concat(<button key={i} onClick={add}>{i++}</button>));// 之后setList(list => list.concat(<button key={i} onClick={add}>{i++}</button>));函数参数中的list来自于Hooks中保留的list，而不是闭包中的list。
总结
因为Hooks总是在组件render时才会计算新状态，这为Hooks带来比拟重的心智累赘。
相比而言，采纳细粒度更新实现的Hooks（比方VUE的Composition API）能够实时更新状态，操作起来更合乎直觉。
在应用Hooks过程中，你有没有遇到相似的头疼问题呢？
欢送退出人类高质量前端框架钻研群，带飞