面试题：React Hooks 中 useState 的使用及原理

useState 的作用

useState 是 React Hooks 中用于在函数式组件中添加状态的 Hook。它允许函数式组件拥有自己的状态，从而替代了之前类组件使用 this.state 来管理状态的方式。这使得函数式组件编写更加简洁和灵活，同时保持状态逻辑的独立性。

示例

以下是一个简单的计数器示例，展示如何使用 useState 来管理组件的状态：

import React, { useState } from 'react';

function Counter() {
  // 使用 useState 声明一个状态变量 count 及其更新函数 setCount
  const [count, setCount] = useState(0); 

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

export default Counter;

在上述代码中，useState(0) 初始化了状态变量 count 为 0，并返回一个数组，数组的第一个元素是 count 当前的值，第二个元素是一个函数 setCount，用于更新 count 的值。当点击按钮时，setCount(count + 1) 会将 count 的值加 1，从而触发组件重新渲染，显示最新的 count 值。

内部工作原理

状态存储：React 在组件实例内部维护一个状态链表，每个 useState 调用对应链表中的一个节点。当组件首次渲染时，useState 会从这个链表中读取初始状态值。
更新机制：当调用 setCount 等更新函数时，React 会将新的状态值写入链表，并标记组件需要重新渲染。在重新渲染时，useState 会再次从链表中读取状态值，确保使用的是最新的状态。
依赖追踪：useState 会自动追踪其依赖关系。因为 useState 是在函数式组件的顶层调用，所以 React 能够根据调用顺序准确地匹配到对应的状态和更新函数。如果 useState 调用顺序发生变化，可能会导致状态错乱，这也是为什么 React 要求 useState 只能在函数式组件的顶层调用。

星途面试题库

面试题：React Hooks 中 useState 的使用及原理

知识考点

面试题答案

useState 的作用

示例

内部工作原理