本文分享一个短小而又深刻的ReactHook场景题，这个例子涉及到：
hook闭包问题state更新机制希望看完以后你会对React函数组件有更深入的了解。
场景复现整个Demo非常简单，大家可以自己在电脑上尝试一下。
首先，有一个button和一个list：
divclassName="App"buttononClick={add}Add/button{list.map(val=val)}/div
list是使用useState管理的状态。button绑定了事件onClick={add}。
点击按钮，会执行add方法向list中加入一些内容。
exportdefaultfunctionApp(){const[list,setList]=useState([]);constadd=()={//...};return(divclassName="App"buttononClick={add}Add/button{list.map(val=val)}/div);}
现在页面看起来像这样：
我们继续，先在App外部定义变量i。
leti=0;exportdefaultfunctionApp(){//...}
接着重点来看看add方法。
调用add，会向list中添加新的button，新button也绑定了onClick={add}。
constadd=()={setList(list.concat(buttonkey={i}onClick={add}{i++}/button));};
当我们点击「Add按钮」7次，会展示：
在线示例：