React-函数组件的特性与闭包

一、理解函数组件的特性与闭包的关系

从一个简单的示例，来看函数组件的特性与闭包：

const App = () => {
  const [count, setCount] = useState(0)
  
  const handleClick = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <button onClick={handleClick}>+1</button>
      <h1>计数器：{count}</h1>
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.函数组件的特性：

对于 React 的函数组件来说，只要修改状态，组件就会更新。同时，函数中的代码都会从头到尾重新执行一遍。

也就是说每一次的组件更新，都是一次全新的函数调用，在这一次的调用中都会创建新的：

1. 变量，比如：存储状态的变量 count、普通变量
2. 函数，比如：事件处理程序 handleClick、onSetData、onGetData

2.说明：

当一个函数内部访问了外部的变量时，由于 JS 函数闭包机制的存在，这个函数内部只能访问到本次组件更新时创建的变量值。比如：

2.1 组件第一次执行（第一次创建的闭包）：

变量 count 的值为：0
函数 handleClick 访问到的外部变量 count 的值就是：0
1
2

2.2 点击 +1 按钮，组件重新渲染，组件第二次执行（第二次创建的闭包）：

变量 count 的值为：1
函数 handleClick 访问到的外部变量 count 的值就是：1
1
2

2.3 怎么理解这个过程呢？

可以把组件的每次更新想象成给组件拍照，组件每次更新都会对应到一张照片，而每一张特定的照片都记录了那一刻组件特定的状态。

比如：

第一张照片（组件第一次执行）中 count 的值为：0
第二张照片（组件更新会后，第二次执行）中 count 的值为：1
1
2

从原理层面来看，每一张照片中记录的数据，是每次创建的闭包来保存的