保留可变prop的最后一个元素

Question

我从组件的道具中获得一个数组arr,props.arr可以在myComponent内部更改，因此当myComponent首次渲染时，我想获得arr的最后一项并保留它以供以后使用。实现这一目标的最佳方式是什么?

function myComponent(props: any) {
// props.arr = ["1", "2", "3", "4"]
const [lastVal, setLastVal] = useState(0);
// I can do it like that, but want a better solution
useEffect(() => {
setLastVal(props.arr[props.arr.length - 1]);
}, []);
} 

Answer 1

一个很好的方法是实现usePrevious钩子，像这样:

import { useEffect, useRef } from 'react';
// Refer to the previous value
export function usePrevious<T>(value: T): T | undefined {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}

这将始终返回先前传递给它的值。