Sự khác biệt giữa React.Component vs React.PureComponent

Trong bài viết này, chúng ta cùng tìm hiểu về React.Component vs React.PureComponent và xem chúng có điểm gì khác nhau nhé.

Như các bạn đã biết, mỗi khi props hay state của một component thay đổi, component này sẽ re-render và kéo theo các child component khác re-render. Và trong React lifecycle có một method gọi là shouldComponentUpdate(), method này nhằm giúp chúng ta xử lý re-render của component bằng cách so sánh props và state hiện tại với next props, next state, nếu thay đổi một trong 2 thì component sẽ thực hiện re-render.

Method shouldComponentUpdate() có liên quan gì đến React.Component và React.PureComponent? Thực ra đây chính là điểm khác biệt chính giữa React.Component vs React.PureComponent.

React.Component

Đối với class component khi sử dụng React.Component ta chỉ cần extends nó.

class User extends React.Component {
  render() {
    return <h1>My name is Ha<h1>
  }
}

Thông thường khi chúng ta sử dụng React.Component, React sẽ thực hiện re-render mỗi khi props hay state của component thay đổi, lý do là vì method shouldComponentUpdate() trong trường hợp này mặc định return true, điều đó cho phép component re-render.

Nếu parent component re-render mà child component sử dụng React.Component, thì nó sẽ không thực hiện so sánh props, state mà sẽ re-render kể cả khi props và state không thay đổi.

React.PureComponent

Khi sử dụng React.PureComponent, method này có thể giúp chúng ta cải thiện hiện suất cho trang web, lý do là vì nó sử dụng method shouldComponentUpdate() để so sánh current props , current state với next props và current state. Nếu props và state không thay đổi thì component sẽ không re-render 😁.

class User extends React.PureComponent {
  render() {
    return <h1>My name is Ha<h1>
  }
}

Khi so sánh thì PureComponent sẽ sử dụng shallow compare để so sánh nextProps với this.props, nextState với this.state. Mình đã có một bài viết liên quan đến shallow compare, các bạn có thể đọc tại đây: Shallow Compare trong React là gì?.

Tóm lại điểm khác biệt giữa React.PureComponent và React.Component là React.PureComponent sẽ thực hiện so sánh props, state và quyết định xem có re-render component hay không, còn React.Component sẽ re-render kể cả khi component này có props và state không đổi ^^.