一道题目暴露出你对useState的认识

一个有趣的挑战

在React中，useState钩子是管理函数组件状态的基础工具，其使用方式直观且灵活。然而，对于初学者和一些有经验的开发者来说，useState的工作原理及其细节可能并不是那么直观。为了深入理解useState，我向我的实习生小组出了一个有趣的挑战，旨在测试他们对于useState的理解程度。

点击按钮A、按钮B、按钮C、按钮D后，各自按钮上的数字分别是什么，为什么？

js 复制代码

import { useState } from 'react';

export default function Counter() {
  const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);
  const [number3, setNumber3] = useState(0);
  const [number4, setNumber4] = useState(0);

  return (
    <>
      <button onClick={() => {
        setNumber1(number1 + 1);
        setNumber1(number1 + 1);
        setNumber1(number1 + 1);
      }}>按钮A{number1}</button>
      
      <button onClick={() => {
        setNumber2(n => n + 1);
        setNumber2(n => n + 1);
        setNumber2(n => n + 1);
      }}>按钮B{number2}</button>
      
      <button onClick={() => {
        setNumber3(number3 + 5);
        setNumber3(n => n + 1);
      }}>按钮C{number3}</button>
      
      <button onClick={() => {
        setNumber4(number4 + 5);
        setNumber4(n => n + 1);
        setNumber4(42);
      }}>按钮D{number4}</button>
    </>
  )
}

点击按钮A、按钮B、按钮C、按钮D后，各自按钮上的数字分别是 1、3、6、42。

因为在 React 中有以下几点规则：

useState 返回的更新函数 仅更新下一次渲染的状态变量，不会更新当前渲染的状态变量（旧值）；
等到事件处理函数中的所有代码都运行完毕才会处理 state 更新；
传递给更新 state 函数的参数可以是一个值、一个算术表达式、一个函数，不管是什么都会被添加到队列中，以便在事件处理函数中的所有其他代码运行后进行处理。如果是一个值或者算术表达式会先执行得到结果后，转变成一个伪函数 n => x 添加到队列中，其中 X 是执行结果。此外不同更新函数的参数添加到不同的对应队列中；
在下一次渲染期间，React 会遍历队列计算出最终的 state 并更新；
在遍历队列过程中，React 会获取上一个队列的返回值，并将其传递给下一个队列，用不用由下一个队列决定是否使用。

按以上规则来分析每个按钮点击后的执行过程。

按钮A：

更新队列	`n`	返回值
`n => 1`	`0`（未使用）	`1`
`n => 1`	`0`（未使用）	`1`
`n => 1`	`0`（未使用）	`1`

队列最后返回 1 ，那么下一次渲染的状态变量 number1 赋值为 1, 所以按钮A上的数字显示为 1。

按钮B：

更新队列	`n`	返回值
`n => n + 1`	`0`	`0 + 1 = 1`
`n => n + 1`	`1`	`1 + 1 = 2`
`n => n + 1`	`2`	`2 + 1 = 3`

队列最后返回 3 ，那么下一次渲染的状态变量 number2 赋值为 3, 所以按钮B上的数字显示为 3。

按钮C：

更新队列	`n`	返回值
`n => 5`	`0`（未使用）	`5`
`n => n + 1`	`5`	`5 + 1 = 6`

队列最后返回 3 ，那么下一次渲染的状态变量 number3 赋值为 6, 所以按钮C上的数字显示为 6。

按钮D：

更新队列	`n`	返回值
`n => 5`	`0`（未使用）	`5`
`n => n + 1`	`5`	`5 + 1 = 6`
`n => 42`	`6`（未使用）	`42`

队列最后返回 42 ，那么下一次渲染的状态变量 number4 赋值为 42, 所以按钮D上的数字显示为 42。

学习React最好的资料就是React官网

其实这些内容，在React官网中都有，但是往往一些React初学者都会忽略了官网的内容。

React官方文档是学习和掌握React框架的宝贵资源，它不仅提供了关于如何使用React的基本指导，还深入讲解了React的工作原理和最佳实践。然而，对于React初学者来说，官方文档的内容可能会显得有些压倒性，特别是当他们急于开始编码而跳过了基础概念的学习时。这种急于求成的态度可能会导致对React核心概念的理解不足，从而影响到后续的学习进度和项目开发的质量。

为什么初学者可能会忽略官网内容？

信息量大：React官网包含了大量的信息，从基础入门到高级主题，对于初学者来说，一开始可能不知道从哪里开始，或者感到难以消化这么多的信息。
误以为是"只读"文档：一些初学者可能将官方文档视为仅在遇到具体问题时才查阅的参考资料，而不是作为系统学习的教程。他们可能更倾向于通过视频教程或其他形式的学习材料来学习React。
缺乏实践：官方文档虽然提供了丰富的示例代码，但如果初学者只是被动阅读而不是动手实践，他们可能很难将理论知识转化为实际技能。
寻找快速解决方案：在面对具体的编程问题时，一些初学者可能会优先搜索直接的解决方案或代码片段，而不是花时间理解背后的概念。

如何更好地利用React官方文档

从基础开始：即使你急于开发项目，也应该先花时间理解React的核心概念，如组件、状态和生命周期。这些基础知识是后续学习的基石。
动手实践：尝试自己编写文档中的示例代码，并对其进行修改以看到不同的结果。这种实践可以加深你对概念的理解。
深入学习：不要停留在表面，当你对基础内容有了一定的掌握后，深入学习更高级的主题，如状态管理、路由、Hooks等。
定期复习：随着你技能的提升，回头复习之前看过的文档可以帮助你发现之前未注意到的细节和深层次的理解。
参与社区：React有一个庞大而活跃的社区。参与社区可以让你了解到最新的最佳实践，也可以在遇到问题时获得帮助。

总之，React官方文档是一个宝贵的学习资源，正确地利用它可以加速你的学习进程并提高你的开发技能。尽管一开始可能会感到有些困难，但通过持续的学习和实践，你将能够更加深入地理解和掌握React。