诱导从其他组件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中的道具就可以了，但在SomeComponent中调用trigger函数会重新呈现所有内容。有没有办法避免第一个组件重新渲染？

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