React组件重渲染时内部对象是否会重建？useMemo使用存疑

1. 组件重渲染时，内部定义的对象会被重新创建吗？ #

是的。React组件本质是一个函数，每次组件重渲染时，这个函数会完整执行一遍。函数内部定义的所有对象（包括普通对象、数组、函数）都会被重新创建，它们的内存引用地址和上一次渲染时的完全不同。

比如这段代码，每次父组件重渲染，userInfo都会是一个全新的对象：

function ParentComponent() {
  const userInfo = { name: "Alice", age: 28 };
  // ...
}

2. 将这类对象作为props传给子组件，子组件会随之重渲染吗？ #

这取决于子组件是否是纯组件（用React.memo包裹的组件）：

• 如果子组件没有用React.memo包裹：只要父组件重渲染，不管props有没有实际变化，子组件都会跟着重渲染。
• 如果子组件用React.memo包裹：React会对新旧props做浅比较。因为父组件每次传的对象都是新的引用，浅比较会判定props发生了变化，从而触发子组件重渲染。

3. 使用useMemo Hook是否是明智的选择？ #

要结合场景判断，先分析你给出的示例代码：

const selected = useMemo(() => selectedColumn, [selectedColumn]);

如果selectedColumn是引用类型（对象/数组），这段代码的作用是：只有当selectedColumn本身发生变化时，才会重新返回selectedColumn；如果selectedColumn没有变化，就复用之前缓存的引用。

值得用useMemo的场景 #

• 子组件是React.memo包裹的纯组件，且这个引用类型props频繁导致子组件无意义重渲染：用useMemo缓存引用，能避免子组件不必要的重渲染。
• 创建对象的成本很高（比如需要复杂计算、遍历大数组生成新对象）：用useMemo缓存计算结果，避免每次渲染都重复高成本操作。

没必要用useMemo的场景 #

• 子组件不是纯组件：不管是否缓存props，子组件都会跟着父组件重渲染，useMemo起不到优化作用。
• 创建对象的成本极低（比如简单字面量对象）：useMemo本身的缓存开销可能比重新创建对象的成本还高，反而得不偿失。

另外要注意：useMemo的缓存依赖于依赖数组，只有依赖项变化时才会重新执行回调。如果selectedColumn本身是稳定的引用（比如来自useState且不频繁变化），那这个useMemo意义不大；但如果selectedColumn是每次渲染都重新生成的引用类型，用useMemo缓存它就能稳定props的引用，避免子组件不必要重渲染。

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