如何避免React组件每次渲染时创建新数组

首先，把数组移到props里不一定能解决问题——如果父组件每次渲染时还是创建新的数组实例传给子组件，那子组件的props数组引用还是会变化，useMemo照样会触发回调。

你当前的问题根源是：组件每次渲染时，都会重新创建["name","age","degree"]这个数组的新实例，React对useMemo的依赖做的是浅比较，只要数组的引用改变，就会触发回调函数。

给你几个可行的解决办法：

1. 把数组放到组件外部（固定不变场景） #

如果这个数组是固定不会修改的，直接定义在组件函数外面，这样整个组件生命周期里它的引用都保持唯一：

// 组件外部定义，全局唯一引用
const arr = ["name","age","degree"];

function YourComponent() {
  useMemo(() => {
    // 待执行的回调函数
  }, [arr]);
}

2. 用useMemo缓存数组本身（组件内复用场景） #

如果必须在组件内部定义数组，就用useMemo把数组本身缓存起来，依赖设为空数组，确保只在组件挂载时创建一次：

function YourComponent() {
  const arr = useMemo(() => ["name","age","degree"], []);

  useMemo(() => {
    // 待执行的回调函数
  }, [arr]);
}

3. 用useState存储（数组需动态修改场景） #

如果数组后续需要更新，用useState初始化，只有调用setArr修改时，数组的引用才会变化：

function YourComponent() {
  const [arr, setArr] = useState(["name","age","degree"]);

  useMemo(() => {
    // 待执行的回调函数
  }, [arr]);
}

4. 传递props时保证引用稳定（必须放props场景） #

如果坚持要把数组作为props传递，父组件必须保证这个数组的引用不变：
比如父组件里用useMemo缓存数组后再传给子组件：

// 父组件
function ParentComponent() {
  const arr = useMemo(() => ["name","age","degree"], []);
  
  return <ChildComponent arr={arr} />;
}

// 子组件
function ChildComponent({ arr }) {
  useMemo(() => {
    // 待执行的回调函数
  }, [arr]);
}

这样就能确保只有数组内容真正变化时，useMemo的回调才会触发。

内容的提问来源于stack exchange，提问作者M.A.G