Đã đăng vào thg 2 23, 2018 7:12 SA 4 phút đọc

485

React Lifecycle Methods

Bài đăng này đã không được cập nhật trong 6 năm

`1. React Lifecycle`

React cung cấp rất nhiều các method cũng như các hooks để developer có thể phát triển, quản lý các Component một cách hiệu quả nhất. Thông qua các lifecycle method này, ta có thể điều khiển bất cứ điều gì dù là nhỏ nhất mỗi khi React render UI, update, re rendering hay xóa ra khỏi luồng của app. Cám ơn vì React đã xây dựng cho ta nhiều đến thế.

`2. Methods`

componentWillMount

Đây chính là method ngày sau khi Component được khởi tạo. Quá trình này diễn ra hết sức nhanh chóng, vì vậy không nên làm quá nhiều điều tại đây. Lúc này chưa có DOM nào đã được xây dựng, nên cũng không thể thực thi các hàm xử lý, tính toán dom lúc này. Trong một số trường hợp, developer thường call AJAX tại đây. Điều này là không nên. Bởi vì 2 lý do:

Không có gì đảm bảo cho việc AJAX sẽ trả về ngay trong hàm này, dẫn đến việc khi render các data trả về mong muốn trong các life cycling step tiếp theo là không chắc chắn
Nên để việc contruction và render diễn ra một cách thuận lợi và nhanh chóng nhất

Các công việc có thể làm

set initial state
Can call setState: No. Không nên
call side effects (AJAX calls etc.)

componentDidMount

Thời điểm này, component đã sẵn sàng và xuất hiện trên broswer. Đây là thời điểm lý tưởng để gọi các AJAX trên cũng như các xử lý với DOM. Đây là một số các vì dụ:

Vẽ lên canvas element mà bạn vừa render
thêm các event listener

Các công việc có thể làm

Gọi side effect để loading data
Can call setState: Yes.

componentWillReceiveProps

Thi thoảng, một số props mới được parent Component truyền xuống. Trước khi Component xử lý với những props mới này, componentWillReceiveProps được gọi, với nextProps là tham số. Điểm thú vị là ta có thể lấy cả props hiện tại và cả các props tiếp theo, so sánh chúng.

  componentWillReceiveProps(nextProps) {
    if (this.props.question !== nextProps.question) {
     // Setup the effects next question
    }
  }

shouldComponentUpdate

shouldComponentUpdate luôn trả về một giá trị Boolean để trả lời cho câu hỏi, liệu tôi có nên re-render hay không. Câu trả lời mặc định luôn là true. Đây là thời điểm lý tưởng để có thể optimize Component. Tránh những re-render bất ngờ không mong muốn.

componentWillUpdate

Tôi đã sẵn sàn để update. React cố gắng chắc chắn điều đó. Đây là hàm hiếm khi được sử dụng, ta cũng không nên làm điều gì nữa tránh việc render tiếp theo bị trì hoãn.

Các công việc có thể làm:

Sử dụng componentWillReceiveProps thay vì shouldComponentUpdate

componentDidUpdate

Khá giống với componentDidMount, mỗi khi được update thành công, componentDIdUpdate được gọi Các công việc có thể làm:

Updating DOM theo các state, prop thay đổi

  componentDidMount() {
     document.querySelectorAll('.article-img img').forEach(element => element.addEventListener(
       'click',
       //handle event on click image
     ))
  }

componentWillUnmount

Tiệc đã tàn, không nên có gắng setState tại đây. Ở đây, nên hủy bỏ các request đang pending, dọn dẹp các event listener, giải phóng các setup đã xây dựng trước ở contructor

Các công việc có thể làm:

Dọn dẹp, dọn dẹp, dọn dẹp

`3. Conclusion`

Mặc dù React cung cấp ta nhiều life cycling method đến như vậy, nhưng trong trường hợp lý tưởng nhất, một component hoàn toàn không dùng đến nó. Tất cả việc render để được điều khiển thông qua state và props. Những hiếm bào giờ có một điểm lý tưởng như vậy. Sử dụng các method một cách cẩn trọng là điều quan trọng để Component hoạt động đúng theo mong muốn, giảm phát sinh lỗi, mượt mà, trơn chu nhất có thế.

References:

ReactJS

1. React Lifecycle

2. Methods