什么是純組件？

React 的純組件(PureComponent)是 React.Component 的一個變體，它通過淺比較(shallow comparison)props 和 state 來自動實現?shouldComponentUpdate()?方法，從而優化性能。

核心特點

1. 自動淺比較：

• PureComponent 會自動對當前和下一個 props/state 進行淺比較

• 只有在檢測到變化時才會重新渲染

2.?性能優化：

• 避免了不必要的渲染

• 減少了虛擬 DOM 的 diff 操作

與普通組件的區別

特性	Component	PureComponent
shouldComponentUpdate	默認返回 true	自動淺比較 props/state
性能	較低	較高(適合簡單props)
使用場景	通用	props/state較簡單

實現原理

PureComponent 的核心是自動實現的?shouldComponentUpdate?方法：

shouldComponentUpdate(nextProps, nextState) {return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
}

這里的?shallowEqual?是 React 提供的一個淺比較函數。

使用示例

class MyPureComponent extends React.PureComponent {render() {return <div>{this.props.value}</div>;}
}// 函數組件的等價實現(使用React.memo)
const MyMemoComponent = React.memo(function MyComponent(props) {return <div>{props.value}</div>;
});

淺比較的局限性

1. 無法檢測嵌套對象的變化：

// 不會觸發更新
this.setState({ user: { ...this.state.user, name: 'new name' } });// 會觸發更新
const newUser = { ...this.state.user, name: 'new name' };
this.setState({ user: newUser });

2. 數組和對象的引用比較：

• 直接修改數組或對象不會觸發更新

• 必須返回新的引用

最佳實踐

1. 適用場景：

   • props 和 state 是基本類型

   • 數據結構簡單扁平

   • 渲染開銷較大的組件

2. 不適用場景：

   • props/state 有復雜的嵌套結構

   • 需要自定義 shouldComponentUpdate 邏輯

   • 總是需要重新渲染的組件

3. 函數組件替代方案：

   • 使用?React.memo?高階組件

   • 可以自定義比較函數

注意事項

1. 避免在渲染方法中創建新對象/數組/函數：

// 不好的做法 - 每次渲染都會創建新的styles對象
render() {const styles = { color: 'red' };return <div style={styles} />;
}

2.?繼承 PureComponent 時避免使用 shouldComponentUpdate：

• 會覆蓋 PureComponent 的優化邏輯

3. 不可變數據的重要性：

• 使用 Immutable.js 或類似的庫可以更好地配合 PureComponent

性能考量

1. 淺比較本身也有成本：

   • 對于非常簡單的組件，PureComponent 可能反而降低性能

   • 適合渲染成本高于比較成本的組件

2. 組件層級：

   • 在組件樹較高層級使用 PureComponent 效果更明顯

PureComponent 是 React 性能優化工具箱中的重要工具，但需要根據具體情況合理使用，理解其工作原理和局限性才能發揮最大效用。