在 React 中，Component 和 PureComponent 的核心區別就在於 是否自動進行淺層比較 (shallow compare)，從而決定組件是否需要重新渲染。

1. React.Component

Component 不會自動比較 props 或 state，只要父組件重新渲染（哪怕 props 沒變），它也會執行 render()。

換句話説：

默認每次都重新渲染
除非你自己寫 shouldComponentUpdate 去控制

class MyComponent extends React.Component {
  render() {
    console.log('Component render');
    return <div>{this.props.value}</div>;
  }
}

2. React.PureComponent

PureComponent 內部帶了一個自動的：shouldComponentUpdate( nextProps, nextState )
並執行 淺層比較 (shallow equal)：

• props 沒變（淺比較）
• state 沒變（淺比較）

就不會重新渲染
從而減少不必要的 render

示例：

class MyPureComponent extends React.PureComponent {
  render() {
    console.log('PureComponent render');
    return <div>{this.props.value}</div>;
  }
}

如果 props/state 沒變，render() 不會執行。

淺比較（shallow compare）是什麼意思？

對比的是引用是否相同，不是內容是否相同。

例如：

{ a: 1 } === { a: 1 }  // false（引用不同）

所以：

• 如果 props 是基本類型（number、string、boolean）：效果很好
• 如果 props 是對象、數組，且你用 mutable 修改方式，引用不變 → PureComponent 會認為沒變 → 不會更新（BUG）

Component 與 PureComponent 的對比總結

什麼時候用 PureComponent？

• props/state 基本類型
• props/state 是不可變數據（使用 immutable 或通過擴展符結構拷貝）

例如：

this.setState({ list: [...this.state.list, newItem] })

什麼時候不要用 PureComponent？

當 props 或 state 經常是：

• 嵌套對象
• 嵌套數組
• 引用不變但內容變了

例如：

this.state.obj.a = 1;  // 引用沒變
this.setState({ obj: this.state.obj }); // PureComponent 判斷不出變化

會導致界面不更新。

總結

Component：默認每次都更新
PureComponent：自動淺比較，不變就不更新（性能優化）

想要性能更好、避免重複渲染 → 用 PureComponent
但要注意：一定要保持 props/state 的不可變性