停止反应功能组件（使用钩子）重新渲染

Question

我有一个纯函数组件，我使用useEffect获取一些数据。我将一个空字符串传递给useEffect，因此它就像一个组件确实挂载。

const getData = () => {
    setTimeout(() => {
        setLocalState({ a: 2 });
        setIsLoading(false);
    }, 0);
};

useEffect(() => getData(), []);

我的整个组件现在重新渲染两次。我想控制这种行为，只在某些条件下重新渲染。

在这里，我想在setLocalState设置localState时将组件设置为reRender，而不是在setIsLoading将isLoading设置为false时。

这是这个问题的代码沙箱：https://codesandbox.io/s/0oyp6j506p

Answer 1

如果我们在基于反应的事件之外调用多个状态设置器将触发多个渲染，但在类组件中，状态更改将被一起批处理。但在长期计划中，这将是固定的，提到here

这似乎是正常的React行为。如果您多次在类组件中调用setState（），它的工作方式完全相同。

如果它们是在基于React的事件中触发的，则React当前将批量状态更新，如按钮单击或输入更改。如果它们在React事件处理程序之外触发（如setTimeout（）），则不会批量更新。

我认为长期计划总是批量活动，但不确定细节。