用useReducer巧妙解决useState异步更新带来的头疼问题

前端

2023-11-26 04:24:52

useState和useReducer的区别

useState和useReducer都是React中用于状态管理的钩子，但它们的工作方式不同。

useState：useState用于管理单个状态值或对象。它接受一个初始状态值作为参数，并返回一个数组，其中第一个元素是当前状态值，第二个元素是更新状态值的函数。
useReducer：useReducer用于管理复杂的状态。它接受一个reducer函数、一个初始状态值和一个可选的第三个参数作为参数，并返回一个数组，其中第一个元素是当前状态值，第二个元素是更新状态值的函数。

reducer函数是一个纯函数，它接受当前状态值和一个action对象作为参数，并返回一个新的状态值。action对象是一个普通的JavaScript对象，它包含要更新状态值的信息。

useReducer如何解决useState异步更新带来的问题

useState在处理异步更新时会带来一些问题，比如：

状态更新不一致：在某些情况下，useState可能会导致状态更新不一致，即组件的状态在更新后可能与预期不符。
性能问题：在某些情况下，useState可能会导致性能问题，比如当组件的状态频繁更新时。

useReducer可以很好地解决这些问题。useReducer的reducer函数是一个纯函数，它保证了状态更新的一致性。此外，useReducer还可以通过使用useMemo和useCallback来优化性能。

实例演示

为了更好地理解useReducer是如何解决useState异步更新带来的头疼问题的，我们来看一个实例。

假设我们有一个组件，它需要循环调用多个接口，并且接口调用根据用户的不同操作调用方式不同。但是，最后都要将所有获取的数据存下来更新视图。

import React, { useState } from "react";

const App = () => {
  const [result, setResult] = useState([]);

  const handleClick = () => {
    fetch("https://example.com/api/v1/data")
      .then((res) => res.json())
      .then((data) => {
        setResult(data);
      });
  };

  return (
    <div>
      <button onClick={handleClick}>获取数据</button>
      <ul>
        {result.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

在这个例子中，我们使用useState来管理result状态。当用户点击“获取数据”按钮时，fetch方法会被调用，并返回一个Promise对象。然后，我们使用then方法来处理Promise对象，并使用setResult方法来更新result状态。

然而，这个代码存在一个问题。那就是，如果用户在fetch方法返回结果之前再次点击“获取数据”按钮，那么result状态将不会被正确更新。这是因为useState的更新是异步的，这意味着当setResult方法被调用时，result状态可能尚未更新。

为了解决这个问题，我们可以使用useReducer来管理result状态。

import React, { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "SET_RESULT":
      return action.payload;
    default:
      return state;
  }
};

const App = () => {
  const [result, dispatch] = useReducer(reducer, []);

  const handleClick = () => {
    fetch("https://example.com/api/v1/data")
      .then((res) => res.json())
      .then((data) => {
        dispatch({ type: "SET_RESULT", payload: data });
      });
  };

  return (
    <div>
      <button onClick={handleClick}>获取数据</button>
      <ul>
        {result.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;