在 React 中处理从 API 调用获取数据的组件的记忆？

Question

由于 API 的限制，我有一个组件需要来自 API 调用的数据。我只想在 API returns 不同的值时更新该组件的状态，而不是 API 调用 returns 与上次相同的数据。

这个组件是我的 React 应用程序的根组件，所以我目前的解决方案是创建一个新的根组件来执行提取并将 API 响应作为道具传递，并且该组件接收prop 将被记忆，因此如果响应与先前的响应 prop 相同，它不会更新，但这似乎不需要为此添加新组件。

我也试过比较当前状态和来自 API 的响应，但由于我使用的是钩子，相等性检查将始终为假，因为重新 - 时始终使用初始状态渲染：

  const [data, setData] = useState({});

  const getData = async () => {
    const testData = await getTestData();
    if (!_.isEqual(data, testData)) { // will always be false
      setData(testData); // will always update
    }
  };

  useEffect(() => {
      const interval = setInterval(() => {
      getData();
    }, 5000);
    return () => clearInterval(interval);
  }, []);

Answer 1

I've also tried comparing the current state and the response from the API, but since I'm using hooks, the equality check will always be false because the initial state is always used when re-rendering:

如果使用set state的回调版本，可以获得最新的值。如果你 return 之前的状态，React 将跳过重新渲染组件：

const getData = async () => {
  const testData = await getTestData();
  setData(prev => {
    if (!_.isEqual(prev, testData)) {
      return testData;
    } else {
      return prev;
    }
  });
};

在 React 中处理从 API 调用获取数据的组件的记忆？

Handle memoizing a component that gets data from API call on an interval in React?

javascript

memoization

reactjs

react-hooks