2016-12-25 17 views
7

Tôi đã đọc tài liệu React và đã xem qua shouldComponentUpdate(). Sự hiểu biết của tôi là mỗi khi setState() được gọi, việc hiển thị lại thành phần đó sẽ được cập nhật.ReactJS, Gọi setState với cùng thông số

Câu hỏi của tôi là nếu giá trị được cập nhật là SAME là giá trị trạng thái hiện tại, điều này có kích hoạt sự kiện hiển thị lại không? hoặc tôi sẽ phải tự kiểm tra các giá trị và giá trị hiện tại để được cập nhật trong shouldComponentUpdate()

+0

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

Trả lời

5

Quan chức Phản ứng trạng thái tài liệu:

hành vi

Mặc định là để tái hiển thị trên mỗi thay đổi trạng thái ...

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Điều này có nghĩa rằng theo mặc định, render() sẽ được thực hiện nếu có của một thành phần của state hoặc props giá trị thay đổi.

Bạn có thể ghi đè hành vi mặc định này bằng cách sử dụng shouldComponentUpdate(). Dưới đây là ví dụ chỉ cập nhật nếu giá trị trạng thái thay đổi.

shouldComponentUpdate(nextProps, nextState) { 
    return this.state.someValue !== nextState.someValue; 
} 

Lưu ý: ví dụ này hoàn toàn bỏ qua props. Do đó, mọi thay đổi đối với props sẽ không kích hoạt render().

3

Tôi không biết nếu tôi hiểu câu hỏi của bạn một cách chính xác nhưng chỉ phản ứng lại khi có sự khác biệt giữa dom ảo và dom thực.

Và như Jyothi đã đề cập trong câu trả lời của mình, phương thức kết xuất sẽ được gọi là bất kể giá trị được truyền trong hàm trạng thái đã đặt nhưng kết xuất lại sẽ phụ thuộc vào phương thức trả về.

0

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 stateprops đơ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.

Các vấn đề liên quan