Component與PureComponent使用差異詳解

這次帶給大家Component與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"來組合和快取派生資料。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

React中生命週期使用詳解

React中元件通訊使用詳解

以上是Component與PureComponent使用差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！