reactjs - 停止重新渲染 react 功能组件(使用钩子(Hook))

Question

我有一个纯功能组件，我在其中使用 useEffect 获取一些数据。我向 useEffect 传递了一个空字符串，因此它的行为就像一个已挂载的组件。

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

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

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

在这里，我希望组件在 setLocalState 设置了 localState 时重新渲染，但在 setIsLoading 设置了 isLoading 为假。

这是针对此问题的代码沙箱: https://codesandbox.io/s/0oyp6j506p

Answer 1

如果我们在基于事件的 react 之外调用多个状态 setter ，将触发多个渲染，但在类组件中，状态更改将被一起批处理。但在长期计划中，这将被修复，其中提到 here

This appears to be normal React behavior. It works the exact same way if you were to call setState() in a class component multiple times.

React currently will batch state updates if they're triggered from within a React-based event, like a button click or input change. It will not batch updates if they're triggered outside of a React event handler, like a setTimeout().

I think there's plans long-term to always batch events, but not sure on the details.