reactjs - react Hook : how to instantiate instance variable only once

Question

我想使用 React Hooks 从我的 Prop 中获取值(value)。
我只想计算一次这个值，而不是在每次渲染时都计算。

这是我想出的第一个解决方案，但如果 props 发生变化，则不会重新计算 z。

function App(props: { x: number; y: number }) {
    
    const zRef = useRef<number | undefined>(undefined);

    if( zRef.current === undefined ){
    
        //Let's assume the computation of x + y is costly, I 
        //want to avoid doing it every render.
        zRef.current = props.x + props.y;
    
    }

    return (<span>{zRef.current}</span>);

}

我找到的第二种方法是这个:

function App(props: { x: number; y: number }) {
    
    const zRef = useRef<number | undefined>(undefined);

    useEffect(()=>{

        zRef.current = props.x + props.y;

    },[props.x, props.y]);

    return (<span>{zRef.current}</span>);

}

但问题是 zRef.current 在第一次渲染时是 undefined。

非常感谢对此事的任何意见。

Answer 1

你试过 useMemo 了吗？ ？

useMemo 似乎适合您的用例，因为它允许您仅在依赖项数组中指定的任何一个值发生更改时才重新计算值。

像这样:

const z = useMemo(() => {
    return props.x + props.y
}, [props.x, props.y])