React中如何让常量不随数组状态动态变化？

问题场景 #

你维护着React数组状态myArray，想通过对比数组的历史长度和当前长度判断数组是否被修改，但直接声明的myArrayLength会随状态更新同步变化，达不到预期：

const [myArray, setMyArray] = useState(["Some Value", "Some other value"]); 

const myArrayLength = myArray.length; 

// 执行状态更新后
setMyArray([ ...myArray, "add a value"]);

console.log(myArray.length) // 输出3
console.log(myArrayLength) // 也输出3，期望它保留初始值2

解决方案 #

1. 用useRef保存初始长度 #

useRef的.current属性不会随组件重新渲染自动更新，刚好适合存储不需要响应式变化的初始值：

import { useState, useRef } from 'react';

function YourComponent() {
  const [myArray, setMyArray] = useState(["Some Value", "Some other value"]); 
  // 初始化时存入数组的初始长度
  const initialArrayLength = useRef(myArray.length);

  // 判断数组是否被修改
  const isArrayModified = myArray.length !== initialArrayLength.current;

  const handleAddItem = () => {
    setMyArray([...myArray, "add a value"]);
    // 此时initialArrayLength.current仍为2，myArray.length为3，判断结果为true
    console.log(isArrayModified); 
  };

  return (
    // 组件渲染内容
  );
}

2. 用useEffect+useRef追踪上一次长度（可选） #

如果你的需求不是保存初始长度，而是记录上一次渲染时的数组长度，可以用useEffect同步更新参考值：

import { useState, useRef, useEffect } from 'react';

function YourComponent() {
  const [myArray, setMyArray] = useState(["Some Value", "Some other value"]); 
  const prevArrayLength = useRef(myArray.length);

  useEffect(() => {
    // 数组长度变化后，更新上一次长度的记录
    prevArrayLength.current = myArray.length;
  }, [myArray.length]);

  // 判断长度是否发生变化
  const isLengthChanged = myArray.length !== prevArrayLength.current;

  // ...组件其他逻辑
}

原写法失效原因 #

React函数组件每次状态更新都会触发重新渲染，const myArrayLength = myArray.length会在每次渲染时重新计算，所以它始终等于当前状态下的数组长度，无法保留历史值。而useRef存储的值不受渲染周期影响，除非主动修改.current，完全匹配你需要“固定历史长度”的需求。

内容的提问来源于stack exchange，提问作者Max S.