Question

我有一个纯功能组件，可以在其中使用useEffect提取一些数据。我传入了一个空字符串以使用useEffect，因此它的作用就像组件已安装。

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

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

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

在这里，我希望在 setLocalState 设置 localState 时重新渲染组件，但在 setIsLoading 设置 isLoading 时不希望组件重新渲染em>为false。

以下是此问题的代码沙箱： https://codesandbox.io/s/0oyp6j506p

Answer 1

如果我们在基于react的事件之外调用多个状态设置器，则会触发多个渲染，但是在类组件中，状态更改将被批处理在一起。但是在长期计划中，此问题将得到解决，here

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

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

我认为长期计划总是批量处理事件，但不确定   详细信息。

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

1 个答案: