Thêm nhiều câu trả lời cho câu trả lời của @ Jyothi về việc triển khai shouldComponentUpdate()
để bỏ qua lần hiển thị lại không cần thiết, trong React 15.3
họ đã giới thiệu một khái niệm mới PureComponent
. Từ reactjs docs
Sự khác biệt giữa chúng là React.Component không thực hiện shouldComponentUpdate(), nhưng React.PureComponent thực hiện nó với một prop nông và so sánh nhà nước.
này cho phép bỏ qua các cuộc gọi không cần thiết của render
trong thành phần lớp bằng cách chỉ thực hiện PureComponent
thay vì thông thường Component
. Có một vài hãy cẩn thận với PureComponent
tuy nhiên, từ các tài liệu về React.PureComponent
‘s shouldComponentUpdate()
:
... chỉ shallowly so sánh các đối tượng. Nếu các cấu trúc này chứa cấu trúc dữ liệu phức tạp, nó có thể tạo ra phủ định sai cho những khác biệt sâu hơn.
... bỏ qua các bản cập nhật cho toàn bộ thành phần. Đảm bảo rằng tất cả các thành phần trẻ em cũng là "thuần túy".
Việc sử dụng PureComponent
trong một số trường hợp có thể cải thiện hiệu suất của ứng dụng của bạn. Hơn nữa, nó bắt buộc bạn giữ các đối tượng state
và props
đơn giản nhất có thể hoặc thậm chí tốt hơn, không thay đổi, có thể giúp đơn giản hóa cấu trúc ứng dụng và làm cho cấu hình trở nên rõ ràng hơn.
Trên ghi chú bên. Trong khi render() có thể được gọi, DOM gốc KHÔNG được cập nhật khi gọi setState() với các tham số giống như trạng thái hiện tại. Vì vậy, có rất ít hiệu suất nâng cao bằng cách sử dụng shouldComponentUpdate() trong trường hợp này. – Jodo