React闭包中的点击事件

问题：利用函数渲染多个按钮，点击按钮通过setState更新artists数组，再次点击按钮，artists保持初值，而非setState更新后的值。

一、点击普通按钮效果

在线demo：codesandbox.io/s/kind-hill…

1. 首次点击“普通按钮1”效果：

2. 再次“普通按钮2”效果：

普通按钮效果说明：点击普通按钮，通过原数组中追加新值来更新数组列表，展示的列表为累加值

二、点击渲染函数中的渲染按钮“逐次点击”效果

在线demo：codesandbox.io/s/kind-hill…

1. 首次点击“渲染按钮1”效果：

2. 再次点击“渲染按钮2”效果：

每次点击渲染按钮，artists初值总是[]，因此，多次点击渲染按钮，列表总显示一个值。（artists不变，指向地址）

原因：渲染按钮的buttonClick()是闭包，触发闭包时，它的作用域链关联的artists指向空数组。首次点击执行buttonClick，闭包关联的artists值为[]，setState([...[], 渲染按钮1])重新渲染，渲染列表为数组[...[], 渲染按钮1]的内容。再次点击执行buttonClick，闭包作用域链关联的artists地址未变，值为[]，而非[...[], 渲染按钮1]地址，因此，渲染列表为数组[...[], 渲染按钮2]的内容。

三、点击渲染函数中的渲染按钮“累计点击”效果

在线demo：codesandbox.io/s/kind-hill…

1. 首次点击“渲染按钮1”效果：

2. 再次点击“渲染按钮2”效果：

每次点击渲染按钮，artists地址不变，利用push修改artists值，因此，多次点击渲染按钮，列表展示累加效果。

原因：渲染按钮的buttonClick()是闭包，触发闭包时，它的作用域链关联的artists指向空数组，push更新artists值。首次点击执行buttonClick，闭包关联的artists值为[], setState([...[], value])重新渲染，push更新闭包关联的artists值为[渲染按钮1]，渲染列表为数组[...[], 渲染按钮1]的内容。再次点击执行buttonClick，闭包作用域链关联的artists地址未变，但值为[渲染列表1]，setState([...[渲染按钮1], 渲染按钮2])重新渲染，push更新闭包关联的artists值为[渲染按钮1, [渲染按钮2]，因此，渲染列表为数组[...[渲染按钮1], 渲染按钮2]的内容。