Lifecycle rất quan trọng trong việc xử lý, thường khi xử lý vấn đề gì liên quan tới lifecycle thì mình thường đặt câu hỏi when và where. Tùy thuộc vào từng giai đoạn từng tính chất của yêu cầu mà chúng ta xử lý ở lifecycle method khác nhau.
Ở đây mình ko đi chi tiết các methods của react lifecycle. Mình chỉ đưa ra các thay đổi trong react release gần đây.
II. Giới thiệu
Trong react thì mỗi component trong react đều có lifecycle như nhau, và lifecycle của react được chia thành 3 phần chính: mounting, updating và unmounting.
Refer link: http://projects.wojtekmaj.pl/reactlifecyclemethodsdiagram/
Mounting: Khi component được tạo và add vào DOM.
Thứ tự các methods:
Ở các phiên bản trước còn có thêm method “componentWillMount” nhưng từ bản cập nhật sau này nó đã được bỏ đi và được rename thành “UNSAFE_componentWillMount()”, và nó vẫn còn work cho đến version 17.
Unmounting: Bắt đầu remove component ra khỏi DOM.
Unmounting thì chỉ có 1 method là
Updating: xẩy ra khi props hoặc state thay đổi
Thứ tự các methods sẽ là:
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
Cũng tương tự như componentWillMount, thì componentWillUpdate và componentWillRecieveProps sẽ được bỏ đi trong thời gian tới, và hiện tại vẫn work cho đến version 17 với tên là:
III. Thay đổi
Thường thì tùy vào mục đích mà chúng ta xử lý ở mỗi event khác nhau. Ở version react 16.3 đã giới thiệu một số vòng đời mới nhằm thay thế cho các method cũ, để cung cấp hỗ trợ tố hơn cho bản chất không động bộ asynchronous của react.
- getDerivedStateFromProps
Nếu như ai đã từng làm react từ version 16.3 trở về trước thì có thể nó tương đồng với componentWillReceiveProps, getDerivedStateFromProps nó sẽ được invoked khi component nhận các props mới. Nhưng tới version 16.4 nó được invoked cả ngay sau khi setSate() or forceUpdate().
Nó nhận trách nhiệm đảm bảo state và props được đồng bọ, khi được yêu cầu, và nó được thay thế cho componentWillReceiveProps .
Ví dụ
Function getDerivedStateFromProps được invoked khi component đã mounted, hoặc khi nhận props mới (16.3), setstate(), foreUpdate() (16.4). Và nó sẽ được gọi nếu như parent component rerender lại. Tham số của method này là tất cả props được thay đổi gọi là nextProps, thường thì chúng ta cũng có thể so sánh giá trị hiện tại và giá trị sẽ nhận trong method này.
Ở ví dụ trên nếu như giá trị của chosen mới nhận khác với giá trị hiện tại thì chúng ta tiến hành thay đổi state, giảm tránh việc rerender lại (after setstate) component nếu như giá trị mới và giá trị hiện tại là như nhau.
Do tính chất là sẽ được gọi khi nhận prop mới, nên có thể method này được gọi nhiều lần cho single update. Để tránh việc render nhiều lần thì chúng ta có thể thực thi update một lần.
- ComponentDidMount
Ở method này thường dung để load data, call API… Ví dụ dưới chúng ta fetch data từ API:
- getSnapshotBeforeUpdate(prevProps, prevState)
- Depprecate functions các chức năng không được sử dụng nữa
- componentWillReceiveProps— UNSAFE_componentWillReceiveProps
- componentWillUpdate— UNSAFE_componentWillUpdate
IV. Kết
Tobe continues
Để lại bình luận cho trang này