面试题：React中useState Hook的基本原理与常见应用场景

useState Hook基本原理

状态存储：useState 在函数组件内部为组件引入了状态。React 会在内部维护一个状态链表，每个 useState 调用对应链表中的一个节点。当组件首次渲染时，useState 会将传入的初始值作为当前状态存储起来。
更新机制：useState 返回一个数组，包含当前状态和一个更新状态的函数。当调用更新函数时，React 会将新的状态值替换链表中对应节点的状态值，然后触发组件重新渲染。重新渲染时，函数组件会再次执行，useState 从链表中获取最新的状态值返回。

状态更新实现方式

调用 useState 返回的更新函数（通常命名为 setXxx，Xxx 为状态名），将新的状态值作为参数传入。React 会比较新状态和旧状态，若有变化则触发组件重新渲染。例如：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

这里点击按钮调用 setCount(count + 1)，count 状态更新，组件重新渲染显示新的 count 值。

常见应用场景

计数器：如上述代码示例，通过 useState 维护一个计数状态 count，点击按钮调用 setCount 更新 count 值，实现计数器功能，用于展示点击次数、页面浏览量等。
表单输入：在表单组件中，使用 useState 存储用户输入的值。例如：

import React, { useState } from 'react';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(`Username: ${username}, Password: ${password}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Username:</label>
      <input 
        type="text" 
        value={username} 
        onChange={(e) => setUsername(e.target.value)} 
      />
      <br />
      <label>Password:</label>
      <input 
        type="password" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
      />
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

这里 useState 分别存储用户名和密码输入值，onChange 事件触发 setUsername 和 setPassword 更新状态，提交表单时可获取最新输入值。 3. 切换显示/隐藏：控制组件的显示或隐藏。例如：

import React, { useState } from 'react';

function ToggleComponent() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Hide' : 'Show'}
      </button>
      {isVisible && <p>This is a visible component.</p>}
    </div>
  );
}

useState 维护 isVisible 状态，点击按钮调用 setIsVisible 切换状态，从而控制 <p> 组件的显示与隐藏，可用于控制弹窗、菜单等的显示隐藏。

星途面试题库

面试题：React中useState Hook的基本原理与常见应用场景

知识考点

面试题答案

useState Hook基本原理

状态更新实现方式

常见应用场景