面试官问我：React hooks中useState同步异步？

介绍

在React中，useState是hooks的一个重要概念之一。它用于定义组件内部的状态，并能够自动重新渲染组件。然而，在React hooks中，useState到底是同步还是异步的问题一直存在争议。

本文将讨论React hooks中useState同步异步的问题，并使用示例代码来说明。

useState同步还是异步？

在React hooks中，useState更新是否是同步或异步的，取决于setXxx()函数的调用方式和环境。

如果在事件处理函数或useEffect hook中调用setXxx()函数，那么React会将其视为异步操作，因为React会将多个setXxx()调用合并为一个批量更新操作。

例如，以下代码：

jsx复制代码
import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count); // 输出0
  }, []);

  function handleClick() {
    setCount(count + 1);
    console.log(count); // 输出0
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在这个代码片段中，当点击按钮时，会调用handleClick()函数来更新count状态。但是，由于setXxx()是异步执行的，因此在调用console.log()时，count状态仍然是0。类似地，当组件挂载完成后，useEffect hook中的console.log()也输出0。

如果需要在setXxx()更新状态后立即进行某些操作，可以使用useLayoutEffect hook来替代useEffect hook。useLayoutEffect hook的执行时机更早，能够保证在DOM更新之前执行。例如：

jsx复制代码
import { useState, useLayoutEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    console.log(count); // 输出1
  }, [count]);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在这个代码片段中，当点击按钮时，会调用handleClick()函数来更新count状态。由于useLayoutEffect hook的执行时机更早，因此console.log()将在count状态更新后，但在DOM更新之前输出1。

另外，如果在定时器或原生事件监听器等异步代码中调用setXxx()函数，则React会立即进行状态更新，因为React无法确定何时完成异步操作。例如：

jsx复制代码
import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount(count + 1);
      console.log(count); // 输出0
    }, 1000);
  }, []);

  return (
    <div>
      <div>Count: {count}</div>
    </div>
  );
}

在这个代码片段中，当组件挂载完成后，setTimeout()函数将在1秒后调用，以更新count状态。由于React无法确定何时完成异步操作，因此它将立即更新状态，使得console.log()输出0。

使用示例代码

接下来，我们使用React hooks来实现上述示例代码。

首先，我们使用useState hook来定义count状态：

jsx复制代码
const [count, setCount] = useState(0);

然后，我们定义一个handleClick函数，用于增加count状态的值：

jsx复制代码
function handleClick() {
  setCount(count + 1);
  console.log(count); // 输出0
}

在这个函数中，我们使用setCount函数来更新count状态。由于setXxx()函数是异步调用的，因此console.log()将在handleClick()函数执行后立即输出0。

如果需要在更新状态后执行某些操作，我们可以使用useLayoutEffect hook来替代useEffect hook，并在依赖项数组中传递count状态，以保证在count状态更新后立即执行。例如：

jsx复制代码
useLayoutEffect(() => {
  console.log(count); // 输出1
}, [count]);

最后，我们通过按钮来触发handleClick函数：

jsx复制代码
return (
  <div>
    <button onClick={handleClick}>Click me</button>
    <div>Count: {count}</div>
  </div>
);

现在，当点击按钮时，count状态的值将增加1，并在回调函数中输出更新后的值。

结论

在React hooks开发中，useState同步异步的问题是一个重要的知识点。我们需要根据setXxx()函数的调用方式和环境，来确定useState是否同步或异步。

如果需要在setXxx()更新状态后立即进行某些操作，可以使用useLayoutEffect hook来替代useEffect hook，并在依赖项数组中传递相关状态。

最后，我们需要注意，在异步代码中调用setXxx()函数时，React可能会立即更新状态，因此需要谨慎处理。