原文：
When to use Component or PureComponent?

什麼時候運用Component照樣PureComponent？

我最先轉向運用PureCompoent是因為它是一個更具機能的Component的版本。雖然事實證明這是準確的，然則這類機能的進步還伴隨着一些附加的前提。讓我們深挖一下PureComponent，並明白為何我們應當運用它。

Component和PureComponent有一個差別點

除了為你供應了一個具有淺比較的shouldComponentUpdate要領，PureComponent和Component基本上完全雷同。當props或許state轉變時，PureComponent將對props和state舉行淺比較。另一方面，Component不會比較當前和下個狀況的props和state。因而，每當shouldComponentUpdate被調用時，組件默許的會從新襯着。

淺比較101

當把之前和下一個的props和state作比較，淺比較將搜檢原始值是不是有雷同的值（比方：1 == 1或許ture==true）,數組和對象援用是不是雷同。

從不轉變

您能夠已聽說過，不要在props和state中轉變對象和數組，假如你在你的父組件中轉變對象，你的“pure”子組件不將更新。雖然值已被轉變，然則子組件比較的是之前props的援用是不是雷同，所以不會檢測到差別。

因而，你能夠經由過程運用es6的assign要領或許數組的擴大運算符或許運用第三方庫，強迫返回一個新的對象。

存在機能題目？

比較原始值值和對象援用是低耗時操縱。假如你有一列子對象而且个中一個子對象更新，對它們的props和state舉行搜檢要比從新襯着每一個子節點要快的多。

別的處理辦法

不要在render的函數中綁定值

假定你有一個項目列表，每一個項目都通報一個唯一的參數到父要領。為了綁定參數，你能夠會這麼做：

<CommentItem likeComment={() => this.likeComment(user.id)} />

這個題目會致使每次父組件render要領被調用時，一個新的函數被建立，已將其傳入likeComment。這會有一個轉變每一個子組件props的副作用，它將會形成他們悉數從新襯着，縱然數據自身沒有發生變化。

為了處理這個題目，只需要將父組件的原型要領的援用通報給子組件。子組件的likeComment屬性將總是有雷同的援用，如許就不會形成不必要的從新襯着。

<CommentItem likeComment={this.likeComment} userID={user.id} />

然後再子組件中建立一個援用了傳入屬性的類要領：

class CommentItem extends PureComponent {
  ...
  handleLike() {
    this.props.likeComment(this.props.userID)
  }
  ...
}

不要在render要領里派生數據

斟酌一下你的設置組件將從一系列文章中展現用戶最喜歡的十篇文章。

render() {
  const { posts } = this.props
  const topTen = posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  return //...
}

每次組件從新襯着時topTen都將有一個新的援用，縱然posts沒有轉變而且派生數據也是雷同的。這將形成列表不必要的從新襯着。

你能夠經由過程緩存你的派生數據來處理這個題目。比方，設置派生數據在你的組件state中，僅當posts更新時它才更新。

componentWillMount() {
  this.setTopTenPosts(this.props.posts)
}
componentWillReceiveProps(nextProps) {
  if (this.props.posts !== nextProps.posts) {
    this.setTopTenPosts(nextProps)
  }
}
setTopTenPosts(posts) {
  this.setState({
    topTen: posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  })
}

假如你正在運用Redux，能夠斟酌運用reselect來建立”selectors”來組合和緩存派生數據。

結束語

只需你遵照以下兩個簡樸的劃定規矩就能夠平安的運用PureComponent來替代Component:

- 雖然通常情況下易變性就是不好的，然則當運用`PureComponent`時題目會變得複雜。
- 假如你在`render`要領中建立一個新的函數，對象或許是數組那末你的做法（能夠）是毛病的。