在 React 中，如果状态不影响渲染，是否可以在 setState 之后跳过重新渲染？

Question

例如，假设我有一个钩子用于生成API请求：

function useApi(...) {
const [state, setState] = useState({ fetching: false });
useEffect(() => {
setState({ fetching: true });
fetch(...)
.then(() => setState({ fetching: false }));
}, [...]);
return { fetching: state.fetching };
}

有时，useApi的状态会影响渲染：

function Foo() {
const { fetching } = useApi(...);
if (fetching) {
return 'Loading';
}
return 'Foo';
}

其他时候，它不会影响渲染：

function Bar() {
useApi(...);
return 'Bar';
}

当useApi中的setState不影响渲染时，是否可以避免重新渲染组件？

我知道这不会对性能产生太大影响，但很高兴知道这是否可能。

Answer 1

您可以创建一个boolean标志来确定是否要及时更改useApi挂钩状态。

const { fetching } = useApi(..., flag);

然后在useApi钩子内：

function useApi(..., flag) {
const [state, setState] = useState({ fetching: false });
useEffect(() => {
flag && setState({ fetching: true });
fetch(...)
.then(() => {
flag && setState({ fetching: false }));
// do other stuff
});
}, [...]);
return { fetching: state.fetching };
}