React新手疑问：直接修改引用类型可行，为何推荐先复制再修改？

Hey there! Awesome question—this is such a common point of confusion for new React developers, so let's break this down clearly.

Why Your Current Code Works (For Now) #

Your code runs right now because even though you're mutating the original state array directly with splice, you still call setState afterward. In simple scenarios like this, React will trigger a re-render when setState is invoked, so your UI updates to reflect the modified array. But this is more of a "happy accident" than a reliable, future-proof pattern.

Why Reacts Recommends Copying Reference Types First #

React is built around the principle of immutable state—meaning you should never modify state directly. Here's why this rule matters so much:

1. It keeps React's update behavior predictable #

React uses changes in state references to determine when to re-render components. When you create a copy of your array (like with the spread operator [...this.state.persons]), you generate a brand new array with a unique reference. This signals to React clearly: "This state has changed—time to update the UI."

If you mutate the original array, the reference stays the same. In more complex apps, this can lead to situations where React doesn't realize it needs to re-render, leaving you with stale UI that doesn't match the actual state.

2. It plays nice with performance optimizations #

If you ever use PureComponent (for class components) or React.memo (for functional components), these tools rely on shallow comparison to skip unnecessary re-renders. They check if props/state references are identical to previous values—if they are, they skip updating the component.

Mutating the original array means the reference doesn't change, so these optimizations will incorrectly assume nothing has changed and fail to update your UI. This is a common source of hard-to-debug bugs.

3. It makes debugging way easier #

Immutable state lets you track exactly how your state evolves over time. Since you're always creating new copies instead of modifying the original, you can log previous state values and see exactly what changed between updates. This is a lifesaver when you're trying to diagnose weird UI behavior.

4. It's required for advanced React features & state management #

Tools like Redux, or React's own concurrent mode, depend entirely on immutable state. Mutating state directly will break these tools in unpredictable ways. Building the habit of copying state first means you won't have to rewrite code later when you add these features to your app.

Comparing Your Two Approaches #

Your Mutable (Not Recommended) Code #

deletePersonHandler = index => {
  const persons = this.state.persons; // Grabs a reference to the original state array
  persons.splice(index,1); // Directly modifies the array IN state
  this.setState({persons:persons}) // Passes the same old reference back to React
}

This works for now, but it's risky—you're altering state behind React's back before telling it to update.

The Immutable (Recommended) Approach #

deletePersonHandler = index => {
  const persons = [...this.state.persons]; // Makes a shallow copy of the original array
  persons.splice(index,1); // Modifies the COPY, not the original state
  this.setState({persons:persons}) // Passes the NEW array reference to React
}

This keeps the original state untouched until React processes the update, following all of React's rules and avoiding hidden bugs down the line.

Final Takeaway #

Even though your current code runs fine, following the immutable state pattern will save you a ton of headaches as your app grows. It's one of those foundational React habits that makes your code more reliable, maintainable, and compatible with all of React's features.

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