面试题：React函数组件中useState的常见用法及原理

Question

在React函数组件中，如何使用useState来管理状态？请举例说明useState返回值的含义，并简要阐述其底层原理。

Answer 1

在React函数组件中使用useState管理状态

在React函数组件中，通过引入useState钩子函数来管理状态。useState接收一个初始状态值作为参数，并返回一个数组，数组包含两个元素：当前状态值和用于更新状态的函数。

示例代码如下：

import React, { useState } from 'react';

function Counter() {
  // 使用useState来管理count状态，初始值为0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

useState返回值的含义

1. 当前状态值：如上述示例中的count，它代表状态在当前渲染中的值。每次状态更新，组件重新渲染，count会获取到最新的值。
2. 状态更新函数：如setCount，调用这个函数并传入新的状态值，React会重新渲染组件，并将新的值作为count的最新值。传入的值可以是新的具体值，也可以是一个基于前一个状态计算新状态的函数（用于依赖前一个状态的更新场景）。例如：

setCount(prevCount => prevCount + 1);

底层原理

1. 状态存储：React在函数组件实例内部维护一个状态链表，每个useState调用对应链表中的一个节点。每个节点存储当前状态值和更新函数。
2. 渲染机制：当组件首次渲染时，useState返回初始状态值和更新函数。当状态更新函数被调用时，React会重新渲染组件。在重新渲染过程中，React会根据状态链表顺序，依次返回每个useState对应的最新状态值和更新函数，确保每次渲染时状态的一致性。
3. 批处理：React会批量处理状态更新，即将多个状态更新合并成一次重新渲染，提高性能。例如在事件处理函数中多次调用setState（在函数组件中类似setCount），React会等到事件处理完成后，一次性重新渲染组件。不过在异步操作或原生事件中，React默认不会批处理状态更新，需要手动使用unstable_batchedUpdates（React 18之前）或利用新的自动批处理机制（React 18及以后）来实现批处理。