面试题：React Hooks中useState的使用细节

useState基本用法

在React Hooks中，useState是用于在函数式组件中添加状态的Hook。其基本语法为：

import React, { useState } from 'react';

function MyComponent() {
  const [state, setState] = useState(initialValue);
  // state为当前状态值，setState为用于更新状态的函数
  // initialValue是状态的初始值，可以是任意类型，比如数字、字符串、对象等

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState(newValue)}>更新状态</button>
    </div>
  );
}

多次调用setState并传入相同值的情况

在函数式组件中使用useState更新状态时，多次调用setState并传入相同值，React默认会进行浅比较。如果新值与当前值严格相等（===），React会认为状态没有变化，不会触发重新渲染。这是一种性能优化机制，避免不必要的渲染。

解决在依赖数组中使用对象或数组时的潜在问题

当在依赖数组（如useEffect的第二个参数）中使用对象或数组时，由于对象和数组是引用类型，每次重新渲染时它们的引用都会改变，这可能导致依赖数组中的值总是不同，从而引发不必要的副作用执行。

使用useMemo或useCallback：
- useMemo用于缓存计算结果。例如：

import React, { useState, useEffect, useMemo } from'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const myObject = useMemo(() => ({ key: count }), [count]);

  useEffect(() => {
    // 只有count变化时，myObject才会变化，依赖数组里的myObject引用不变
    console.log('myObject changed:', myObject);
  }, [myObject]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
    </div>
  );
}

- `useCallback`用于缓存函数。例如：

import React, { useState, useEffect, useCallback } from'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  useEffect(() => {
    // 只有count变化时，handleClick才会变化，依赖数组里的handleClick引用不变
    console.log('handleClick changed:', handleClick);
  }, [handleClick]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>增加计数</button>
    </div>
  );
}

使用deep - equal库：手动进行深度比较。例如：

import React, { useState, useEffect } from'react';
import isEqual from 'deep - equal';

function MyComponent() {
  const [myArray, setMyArray] = useState([1, 2, 3]);
  useEffect(() => {
    const compareArrays = (prev, next) => isEqual(prev, next);
    // 自定义比较逻辑，只有数组内容真正变化时才执行副作用
    console.log('myArray changed:', myArray);
  }, [myArray]);

  return (
    <div>
      <p>{myArray.join(', ')}</p>
      <button onClick={() => setMyArray([...myArray, 4])}>添加元素</button>
    </div>
  );
}

星途面试题库

面试题：React Hooks中useState的使用细节

知识考点

面试题答案

useState基本用法

多次调用setState并传入相同值的情况

解决在依赖数组中使用对象或数组时的潜在问题