React中如何保留可变props数组首次渲染的最后一个元素

最优实现（无额外重渲染） #

直接使用useState的惰性初始化特性即可，这是最贴合需求的原生API实现，无需额外副作用：

function myComponent(props: any) {
    // props.arr = ["1", "2", "3", "4"]
    // 传入函数作为初始值，只会在组件首次渲染时执行1次
    const [lastVal] = useState(() => {
        // 可自行添加空数组兜底逻辑
        return props.arr.length ? props.arr[props.arr.length - 1] : 0
    });

    // 后续无论props.arr如何更新，lastVal都会保留首次渲染时的取值
}

对比原有useEffect方案的优势： #

• 无额外重渲染：useEffect方案会在组件挂载完成后才执行赋值触发二次渲染，惰性初始化直接在首次渲染阶段就拿到正确值，全程仅渲染1次
• 代码更精简，无需维护副作用依赖
• 没有执行时机错位问题：useEffect取值是在组件挂载后，惰性初始化取值完全和首次渲染同步

可选方案（无需触发重渲染时使用） #

如果你留存的这个值不需要驱动视图更新，用useRef更轻量：

function myComponent(props: any) {
    const lastValRef = useRef(props.arr.length ? props.arr[props.arr.length - 1] : 0);
    
    // 后续通过 lastValRef.current 访问留存值即可
}

内容的提问来源于stack exchange，提问作者Amir