javascript - 引发其他组件 React.js 的重新渲染

Question

我想从另一个组件引发重新渲染，避免“触发组件”重新渲染。

const App = () => {

    const [isPopUpActive, setIsPopUpActive] = useState(false)

    const popUpOnOff = () => {
        if(isPopUpActive)
            setIsPopUpActive(false)
        else
            setIsPopUpActive(true)
    }

    return (
        <div>
            <SomeComponent
                trigger={popUpOnOff}
            />
            <PopUpComponent
                isActive={isPopUpActive}
            />
        </div>
    )
}

我认为用 React.memo 包装 SomeComponent 并更改 PopUpComponent 中的 prop 就可以了，但是调用 SomeComponent 中的触发器 函数重新渲染所有内容。有没有办法避免第一个组件重新渲染？

Answer 1

popUpOnOff 函数的标识在每次渲染时都会发生变化，因此内存组件无法执行任何操作。

您需要记住该回调，使其取决于它使用的数据:

const App = () => {
  const [isPopUpActive, setIsPopUpActive] = useState(false);

  const popUpOnOff = useCallback(() => {
    setIsPopUpActive(!isPopUpActive);
  }, [isPopUpActive, setIsPopUpActive]);

  return (
    <div>
      <SomeComponent trigger={popUpOnOff} />
      <PopUpComponent isActive={isPopUpActive} />
    </div>
  );
};