Question

考虑以下简单的React组件，其效果是获取一些数据并将其保存为组件状态：

function MyComponent(props) {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("data.json");
      setData(await res.json());
    };
    fetchData();
  }, []);

  return (
    <></>
  )
}

将这种效果设置为定期运行（例如每分钟）的正确方法是什么？

是否像用fetchData()取代setInterval(fetchData, 60)一样容易，还是我还应该考虑其他React特定的考虑因素？

Answer 1

就像用setInterval（fetchData，60）替换fetchData（）一样简单

是的

在卸下组件时，只需确保执行clearInterval（返回useEffect()）。

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch("data.json");
    setData(await res.json());
  };

  const t = setInterval(fetchData, 60000);

  return () => clearInterval(t); // clear
}, []);

Answer 2

我还应该考虑其他与React有关的注意事项吗？

仅出于Joseph's answer的完整性考虑，您should consider memoizing就是组件的子代，否则它将在每个间隔重新渲染它们：

//                         v Notice the children
function MyComponent({ children }) {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('data.json');
      setData(await res.json());
    };

    const interval = setInterval(fetchData, 60000);

    return () => clearInterval(interval);
  }, []);


//            v Causes children to re-render every interval
  return <>{children}</>;
}
export default MyComponent;

可能的情况：

<MyComponent>
  <Child />
</MyComponent>

解决方案：

// Possible Child
function Child = () => <></>

//                     v Memoization using shallow comparison
export default React.memo(Child);

定期触发反应效果

2 个答案: