React-函数组件的特性与闭包
文章目录
- 一、理解函数组件的特性与闭包的关系
- 1.函数组件的特性:
- 2.说明:
一、理解函数组件的特性与闭包的关系
从一个简单的示例,来看函数组件的特性与闭包:
const App = () => {
const [count, setCount] = useState(0)
const handleClick = () => {
setCount(count + 1)
}
return (
<div>
<button onClick={handleClick}>+1</button>
<h1>计数器:{count}</h1>
</div>
)
}
1.函数组件的特性:
对于 React 的函数组件来说,只要修改状态,组件就会更新。同时,函数中的代码都会从头到尾重新执行一遍。
也就是说每一次的组件更新,都是一次全新的函数调用,在这一次的调用中都会创建新的:
- 变量,比如:存储状态的变量 count、普通变量
- 函数,比如:事件处理程序 handleClick、onSetData、onGetData
2.说明:
当一个函数内部访问了外部的变量时,由于 JS 函数闭包机制的存在,这个函数内部只能访问到本次组件更新时创建的变量值。比如:
2.1 组件第一次执行(第一次创建的闭包):
变量 count 的值为:0
函数 handleClick 访问到的外部变量 count 的值就是:0
2.2 点击 +1 按钮,组件重新渲染,组件第二次执行(第二次创建的闭包):
变量 count 的值为:1
函数 handleClick 访问到的外部变量 count 的值就是:1
2.3 怎么理解这个过程呢?
可以把组件的每次更新想象成给组件拍照,组件每次更新都会对应到一张照片,而每一张特定的照片都记录了那一刻组件特定的状态。
比如:
第一张照片(组件第一次执行)中 count 的值为:0
第二张照片(组件更新会后,第二次执行)中 count 的值为:1
从原理层面来看,每一张照片中记录的数据,是每次创建的闭包来保存的