移除对象属性时componentWillReceiveProps未触发问题求助

Hey there! Let me break down exactly what’s happening here—it all comes down to how React detects changes in props.

The Core Reason: React’s Shallow Comparison #

React uses shallow comparison to check if props have updated. Here’s what that means in plain terms:

• For primitive values (like numbers, strings), it checks if the actual value is different.
• For objects or arrays, it only looks at whether their reference (memory address) has changed—it doesn’t dig into the object’s properties or array’s elements to check for deep changes.

Case 1: Removing the 'value' property (no lifecycle trigger) #

If you’re modifying the existing sampleProp object directly (e.g., running delete sampleProp.value), the object’s reference stays the same. React sees that the old and new sampleProp are the exact same object in memory, so it assumes props haven’t changed—hence componentWillReceiveProps never fires.

Case 2: Removing elements from the 'value' array (triggers lifecycle) #

When you remove elements from the array, you’re probably creating a new array (using methods like filter(), slice(), or spreading the array into a new one). This changes the array’s reference, so React picks up on the update and triggers the lifecycle method. Even if you modify the original array (which is bad practice!), if the parent component re-renders and passes the array again, React might still detect a change—but this is unreliable and not how React is designed to work.

How to Fix It: Pass a New Object #

To get React to detect the change when removing the 'value' property, you need to pass a new object instead of modifying the existing one. Here are two simple ways to do this:

// Option 1: Copy the object, then delete the property
const updatedProp = { ...sampleProp };
delete updatedProp.value;

// Option 2: Destructure to exclude 'value' directly (cleaner!)
const { value, ...updatedProp } = sampleProp;

By creating a new object, you’re changing its reference. React’s shallow comparison will recognize this as a props update, and componentWillReceiveProps will fire as you expect.

A Quick Heads-Up on Deprecation #

Just a note: componentWillReceiveProps has been deprecated since React 16.3+. For class components, the recommended alternatives are:

• static getDerivedStateFromProps: For updating state based on props changes before render.
• componentDidUpdate: For running side effects after props have updated (you can compare prevProps and current props here).

If you’re moving to function components, use the useEffect hook with sampleProp as a dependency to run code when props change.

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