你觉得Hooks这一点烦吗？

野性酷女 2022-09-12 13:54 248阅读 0赞

昨天一个小伙伴发了一个`Demo`给我，让我解释下原因。

我一看，好家伙，小小一个`Demo`，知识点囊括了：

*  `Hooks`的闭包问题
 *  `state`是如何组装的

相信看完这个`Demo`，对`函数组件`会有更深的认识。

![98239a742452947f810dc27013f22630.png][]

## 让人懵逼的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>
      );
    }

显示效果：

![551862eb6b7d1089eba7d310bb109ce6.png][]

烧脑的地方在于，调用`add`方法插入的是一个**「点击后会调用 add 方法的按钮」**：

const add = () => {
        setList(
          list.concat(
            <button 
              key={i} 
              onClick={add}>
              {i++}
            </button>
          )
        );
      };

点击`Add`按钮7下后的显示效果：

![614ab9fc8b3ddceea46d35c37595958f.png][]

那么问题来了，点击带数字按钮（会调用和点击`Add按钮`一样的`add`方法）后会有什么效果呢？

![77006ea1db5708447dc2b1d3932600a9.png][]

## state的组装和闭包问题 ##

如果你认为会插入一个新按钮：

![e9bfd852f849a0d2802f725e1a28013c.png][]

那就错了。

![9292503357ea08a6029348ea9e4d9bf3.png][]

正确答案是：点击对应按钮后`list`长度变为**「按钮对应数字 + 1」**，且最后一项的数字为**「点击前最大数字 + 1」**。

比如，点击前最大数字为6

![fecd3feebbc6c81c5ff39bf370728175.png][]

如果点击 0，`list`长度变为`0 + 1 = 1`，且最后一项为`6 + 1 = 7`：

![62604acdb1dac6f820e3fa3256992d88.png][]

如果点击 2，`list`长度变为`2 + 1 = 3`，且最后一项为`6 + 1 = 7`：

![c24db689d1749a558977eea1647e3b88.png][]

这是两个因素共同作用的结果：

*  `Hooks`的闭包问题
 *  `state`是如何组装的

## 原因分析 ##

再来看看`add`方法：

`button`点击后调用`add`，所以会基于`add`所属上下文（`App`函数）形成闭包，闭包中包括：

*  add
 *  list
 *  setList

![a60b46da1b5f0c176ae7c7c82114ff3d.png][]

> `i`属于`module`级作用域，不在该闭包内

其中`list`与`setList`来自于`useState`调用后的返回值：

const [list, setList] = useState([]);

一种常见的认知误区是：多次调用`useState`返回的`list`是同一个引用。

事实上，每次调用`useState`返回的`list`都是基于如下公式计算得出的：

> 基准state + update1 + update2 + ... = 当前state

所以是一个全新的对象。

> 如果你想了解更多`update`、`state`计算的细节，参考React技术揭秘\[1\]

当`首屏渲染`时：

1.  `App`组件首次`render`
2.  创建`list = []`
3.  `<button onClick={add}>Add</button>`依赖`add`，形成闭包，闭包中的`list = []`

接下来，点击`Add按钮`：

1.  调用`add`方法，该方法来自于`首屏渲染`创建的闭包
2.  `add`方法中依赖的`list`来自于同一个闭包，所以`list = []`
3.  `<button key={i} onClick={add}>{i++}</button>`依赖`add`，形成闭包，闭包中的`list = []`

所以，对于`按钮0`，

![5a6af4ceab86935022fa9b277406023c.png][]

任何时候点击他实际上执行的都是：

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`过程中，你有没有遇到类似的头疼问题呢？

### 参考资料 ###

\[1\]

React技术揭秘: https://react.iamkasong.com/state/mental.html\#%E5%90%8C%E6%AD%A5%E6%9B%B4%E6%96%B0%E7%9A%84react

**「分享」「点赞」****「在看」**是最大支持

[98239a742452947f810dc27013f22630.png]: /images/20220828/c9443712624c411199f86f11ed100a78.png
[551862eb6b7d1089eba7d310bb109ce6.png]: /images/20220828/67d73ffe1db04851b11764fe3562bd34.png
[614ab9fc8b3ddceea46d35c37595958f.png]: /images/20220828/1b0c49fb92b949888fbf76bb07ef5782.png
[77006ea1db5708447dc2b1d3932600a9.png]: /images/20220828/932136c63fe541f9a5495f9437ab3fea.png
[e9bfd852f849a0d2802f725e1a28013c.png]: /images/20220828/4a24e6e9d36648379bb7a3e63e1b5e16.png
[9292503357ea08a6029348ea9e4d9bf3.png]: /images/20220828/dc5e5f3948034763a2487eb9ebc30107.png
[fecd3feebbc6c81c5ff39bf370728175.png]: /images/20220828/3fe213ac2c2d42c1a4ef15108d36bf4f.png
[62604acdb1dac6f820e3fa3256992d88.png]: /images/20220828/c75c39fb00ae441dbe043ea3d9f5830c.png
[c24db689d1749a558977eea1647e3b88.png]: /images/20220828/91b2b3fc3aaa483abc4cebe28162f02f.png
[a60b46da1b5f0c176ae7c7c82114ff3d.png]: /images/20220828/7fab4242ae62434d8600d05ba061fdf9.png
[5a6af4ceab86935022fa9b277406023c.png]: /images/20220828/da72125dbd43451785ffe95b9286c650.png