reactjs - react 钩子(Hook) : skip re-render on multiple consecutive setState calls

Question

假设我有以下代码:(太冗长了)

function usePolicyFormRequirements(policy) {
  const [addresses, setAddresses] = React.useState([]);
  const [pools, setPools] = React.useState([]);
  const [schedules, setSchedules] = React.useState([]);
  const [services, setServices] = React.useState([]);
  const [tunnels, setTunnels] = React.useState([]);
  const [zones, setZones] = React.useState([]);
  const [groups, setGroups] = React.useState([]);
  const [advancedServices, setAdvancedServices] = React.useState([]);
  const [profiles, setProfiles] = React.useState([]);

  React.useEffect(() => {
    policiesService
      .getPolicyFormRequirements(policy)
      .then(
        ({
          addresses,
          pools,
          schedules,
          services,
          tunnels,
          zones,
          groups,
          advancedServices,
          profiles,
        }) => {
          setAddresses(addresses);
          setPools(pools);
          setSchedules(schedules);
          setServices(services);
          setTunnels(tunnels);
          setZones(zones);
          setGroups(groups);
          setAdvancedServices(advancedServices);
          setProfiles(profiles);
        }
      );
  }, [policy]);

  return {
    addresses,
    pools,
    schedules,
    services,
    tunnels,
    zones,
    groups,
    advancedServices,
    profiles,
  };
}

当我在我的函数组件中使用这个自定义 Hook 时，在 getPolicyFormRequirements 之后解决，我的功能组件重新渲染 9次(我调用 setState 的所有实体的计数)

我知道这个特定用例的解决方案是将它们聚合到一个状态并调用 setState一次，但我记得(纠正我，如果我错了)在事件处理程序(例如 onClick )上，如果你调用多个连续的 setState s，在事件处理程序完成执行后只发生一次重新渲染。

有没有办法告诉我React , 或 React会知道自己，在这之后setState另一个setState即将到来，所以跳过重新渲染，直到你找到一秒钟的呼吸。

我不是在寻找性能优化技巧，我想知道上述( 粗体 )问题的答案!

还是你认为我想错了？

谢谢!

--------------

更新
我如何检查我的组件渲染了 9 次？

export default function PolicyForm({ onSubmit, policy }) {
  const [formState, setFormState, formIsValid] = usePgForm();
  const {
    addresses,
    pools,
    schedules,
    services,
    tunnels,
    zones,
    groups,
    advancedServices,
    profiles,
    actions,
    rejects,
    differentiatedServices,
    packetTypes,
  } = usePolicyFormRequirements(policy);

  console.log(' --- re-rendering'); // count of this
  return <></>;
}

Answer 1

我想我会在这里发布这个答案，因为它还没有被提及。
有一种方法可以强制对状态更新进行批处理。见 this article解释一下。下面是一个功能齐全的组件，它只呈现一次，无论 setValues 函数是否是异步的。

import React, { useState, useEffect} from 'react'
import {unstable_batchedUpdates} from 'react-dom'

export default function SingleRender() {

    const [A, setA] = useState(0)
    const [B, setB] = useState(0)
    const [C, setC] = useState(0)

    const setValues = () => {
        unstable_batchedUpdates(() => {
            setA(5)
            setB(6)
            setC(7)
        })
    }

    useEffect(() => {
        setValues()
    }, [])

    return (
        <div>
            <h2>{A}</h2>
            <h2>{B}</h2>
            <h2>{C}</h2>
        </div>
    )
}

虽然“不稳定”这个名称可能令人担忧，但 React 团队之前曾建议在适当的情况下使用此 API，而且我发现在不阻塞代码的情况下减少渲染次数非常有用。