问题:
useMemo: 使用useMemo优化组件渲染,为什么拿不到最新的usestate数据
useMemo 包裹的组件 根据你第二个参数的数组的变量,发生改变才会重新熏染
比如你在一个组件中,有1个UI 是根据变量 RejectTopage 有没有变化去渲染的。
<Checkbox/> 这个box 点击它可以让useStae 的数据,RejectTopage,发生变化,
虽然RejectTopage发生了变化,如果 UIOne组件 这个不去监听 RejectTopage ,那么 UIOne这个组件获取的RejectTopage还是原来的,初始值,拿不到 RejectTopage改变了的。当加上RejectTopage去监听,才能去获取到最新的RejectTopage值
const UITwo = () => {
const buttons = []
const UIOne = useMemo(() => {
return buttons?.[activityKey]?.map((item: string) => {
return (
<>
<Button
className={styles.btn}
onClick={() => {
operatorHandle({ operationType: item });
}}
>
{item === "cancel" ? "End Case" : lodash.upperFirst(item)}
</Button>
</>
);
});
}, [RejectTopage]);
return(
<>
<UIOne/>
<Checkbox/>
</>
)
}