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

}