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

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

我知道它对性能的影响不大，但是很高兴知道这是否可能。

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

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

1 个答案: