探究React向子组件传递对象的两种写法的性能差异

Great question! Let's break this down clearly, since it ties into a common React performance pitfall around prop references.

First: Do the Two Approaches Have Performance Differences? #

Short answer: No, not really—both ways create a brand new object reference on every render.

Let’s look at your examples side by side:

• First approach (inline object):

  <Child data={{ name: "Bob", age: 25 }} />
  

• Second approach (pre-assigned variable):

  render() { 
    const data = { name: "Bob", age: 25 }; 
    return <Child data={data}/>; 
  }
  

In both cases, the object literal {...} runs every time the parent component renders, generating a fresh object reference. If Child is a PureComponent or wrapped in React.memo, this will trigger an unnecessary re-render—React sees a new prop reference even if the object’s content is identical.

How Does This Compare to Inline Function Optimization? #

You’re spot-on to draw a parallel! Inline functions like onClick={() => ...} create new references on each render, just like inline objects. The fix for both scenarios follows the same core principle: keep prop references stable across renders to avoid unnecessary child re-renders.

Optimization Tips for Object Prop Passing #

Here are practical ways to fix this, tailored to different component types:

1. Lift Static Objects Outside the Component #

If the object never changes, move it outside your component so it’s created once, not on every render:

// Static data lives outside the component (created once)
const staticUser = { name: "Bob", age: 25 };

class Parent extends React.Component {
  render() {
    return <Child data={staticUser} />;
  }
}

2. Use Instance Properties (Class Components) #

For dynamic data that only updates under specific conditions, store the object as an instance property and update it only when needed:

class Parent extends React.Component {
  // Initialize the object once when the component mounts
  userData = { name: "Bob", age: 25 };

  componentDidUpdate(prevProps) {
    // Only update the object when relevant props change
    if (prevProps.userAge !== this.props.userAge) {
      this.userData = { ...this.userData, age: this.props.userAge };
    }
  }

  render() {
    return <Child data={this.userData} />;
  }
}

3. Use useMemo (Function Components) #

In function components, useMemo lets you cache the object so it only re-creates it when its dependencies change:

import React, { useMemo } from 'react';

function Parent({ userAge }) {
  // Cache the object—only re-generate if userAge changes
  const userData = useMemo(() => ({
    name: "Bob",
    age: userAge
  }), [userAge]);

  return <Child data={userData} />;
}

4. Split Props Instead of Passing a Whole Object #

If the child component only uses a few properties from the object, pass them as individual props instead. This way, even if other parts of the object change, the child won’t re-render unless the specific props it cares about change:

// Instead of <Child data={userData} />
<Child name={userData.name} age={userData.age} />

Wrap-Up #

Your two original approaches are functionally equivalent in terms of performance—both cause the same issue of unstable prop references. The key optimization, just like with inline functions, is to stabilize those references so React can skip unnecessary re-renders of child components.

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