在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';

}

当setStateinuseApi不影响渲染时，是否可以避免重新渲染组件？

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

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 };}