Trong cuộc sống thường thường, mọi thứ đều sẽ hoạt động theo một chu kì nào đó ví dụ như con người lúc thức dậy thì cần mở mắt sau đó mới làm đến những việc khác. Thì tương tự trongReact Componentcũng sẽ hoạt động theo một chu kì nào đó mà nhờ đó chúng ta có thể theo dõi và thao tác, xử lý dữ liệu trên các chu kì đó.
Bạn đang xem : Componentdidmount là gìMà đơn cử ở đây những chu kì sẽ là :initializationmountingupdatingunmounting
Component lifecycle
Trước tiên để có cái nhìn tổng quát nhất vềcomponent lifecyclethì những người bạn bè hãy nhìn ảnh này để thấy được thứ tự những phương pháp sẽ được gọi trong một chu kì .
Các giai đoạn ở các phiên bản trước
Các giai đoạn ở phiên bản bây giờ (v17)
Sự khác biệt giữa ngày ấy và bây giờ
Nhìn vào hai ảnh trên thì những bạn cũng thấy rõ sự đổi khác .Đã có 3 method lifecycle bị vô hiệucomponentWillMountcomponentWillReceivePropscomponentWillUpdate
Những method này trong phiên bản hiện tại được đánh dấu làunsaferồi, tên gọi của chúng được thay thế bằng
UNSAFE_methodName/ / Ví dụUNSAFE_componentWillMountThêm vào đó là sự Open của 2 method mới làstatic getDerivedStateFromPropsgetSnapshotBeforeUpdate
Note: Ở bài này mình sẽ giới thiệu cả những method cũ luôn để các bạn thấy được sự khác biệt.
Why
Muốn biết tại sao người ta lại có những biến hóa những method này thì những bạn hãy đọc bài viết này, uy tín luônhttps : / / viblo.asia/p/react-lifecycle-methods-are-changing-in-v170-bJzKmMokK9N .
Chú ý: Component Lifecycle này chỉ áp dụng đối với cácclass component. Nếu sử dụngfunctional componentchúng ta sẽ không thể truy cập tới từ khóathiscũng như các method lifecycle.
Theo như mình được biết thì ở phiên bản hiện tại thì nếu muốn sử dụng các method lifecycle này thì sẽ dùng đến methoduseEffect()trongReact hook. Cái này khi nào mình tìm hiểu mình sẽ viết bài chia sẻ sau.
Common React Lifecycle Methods
render()
Trước tiên phải nói đến một method được sử dụng nhiều nhất trongclass componentđơn giản vì đây là method bắt buộc ở trongclass component, được dùng đểrendercomponent.
Như ảnh trên thìrender()sẽ được gọi lại ở các chu kì làmoutingvàupdating.
Lưu ý: Không được gọi setState() trong hàm này, bởi khi gọi setState() thì hàm render sẽ được gọi => gây ra lặp vô hạn.
class App extends Component {render ( ) {
return
}}
Không linh tinh luyên thuyên nữa, đi vào tìm hiểu từng quá trình xảy ra trong mộtcomponentthôi.
1. Initialization
constructor
Phương thứcconstructor()là phương thức được gọi đầu tiên trongclass componentcủa bạn. Nhớ là cái này không áp dụng đối vớifunction component.
Thường thườngReactsẽ khởi tạo cácstate,propsở trongconstructor().
class App extends React. Component {constructor ( props ) {super ( props ) ;this.state = {name : ” Quang Phú “} ;}}
2. Mouting
Đây là quá trình sẽ được gọi sau khiinitializationhoàn thành. Nó sẽ thực hiện việc chuyểnvirtual DOMtrong React thànhDOMvà hiển thị trên trình duyệt. Component sẽmounttrong lầnrenderđầu tiên.
Sẽ có 3 methods sẽ lần lượt được gọi ở quy trình này là :UNSAFE_componentWillMountgetDerivedStateFromPropsrendercomponentDidMount
UNSAFE_componentWillMount
Chú ý: Đây là method ở các phiên bản cũ
Phương thức này sẽ được gọi tới trước khi mộtcomponentchuẩn bị đượcmount, trước khi phương thức render() được gọi. Sau phương thức này thìcomponentsẽ đượcmounted.
Ở trong phương thức này thì chúng ta có thể gọi tới API cũng như truy cập đếnstatehaypropsrồi, nhưng có một lưu ý là khi gọi API response ở đây rồi dùngsetStateđể cập nhật dữ liệu, vì thời gian chuẩn bị mount -> mount rất ngắn nên đôi khi kết quả lúcrender componentcó thể không như mong muốn.
class App extends Component {constructor ( props ) {super ( props ) ;this.state = {name : ” Quang Phu ” ,}} ;UNSAFE_componentWillMount ( ) {console.log ( ” component will mount ” ) ;console.log ( this.state.name ) ;} ;…}Bạn thử reload lại trình duyệt xem, sẽ thấy hàmcomponentWillMountđược gọi .
getDerivedStateFromProps
static getDerivedStateFromProps ( nextProps, prevState ) {/ / code}
Phương thứcgetDerivedStateFromProps()được gọi ngay trước khi render component. Đây là static method nên do đó chúng ta không thể thao tác vớithistrong method này. Phương thức này được dùng để thiết lập lại state dựa trên props ban đầu.
static getDerivedStateFromProps ( nextProps, prevState ) {if ( nextProps. data = = prevState. data ) {return null ;}return { data : nextProps. data } ;}Method này sẽ nhận 2 tham số truyền vào là giá trị mới của props và giá trị cũ của state trước khi được update. Nếu không có update state mới tất cả chúng ta chỉ cần return null. Nếu có update thì trả về 1 object chứa giá trị biến hóa cho state là được .
componentDidMount
Sau khi 2 phương thứccomponentWillMountvàrenderthìcomponentDidMountlà method được gọi cuối cuối trong quá trình này.
Nghĩa là sau khi render component xong. Nếu ứng dụng của bạn cần gọi đến những web API khác, sử dụng AJAX để fetch dữ liệu, hay update tài liệu thì đây là nơi hài hòa và hợp lý nhất để gọi tới những API khác .Đến tới hàm này thì những thành phần đã được sinh ra, và tất cả chúng ta hoàn toàn có thể tương tác với DOM bằng JS trong hàm này .class App extends Component {constructor ( props ) {super ( props ) ;this.state = {name : ” Quang Phu ” ,}} ;UNSAFE_componentWillMount ( ) {console.log ( ” component will mount ” ) ;} ;componentDidMount ( ) {console.log ( ” component did mount ” ) ;}render ( ) {console.log ( ” render call ” ) ;return (
)}}
Thử chạy chương trình lên tất cả chúng ta sẽ thấy lần lượt những phương pháp được gọi .Xem thêm : Tổng Quan Về Erp và Openerp Là Gì ? Tìm Hiểu Chi Tiết Về Phần Mềm Odoo
3. Updating
Đây là quá trình thứ 3 được gọi quá trìnhinitializationvàrender đầu tiên(mount). Quá trình này sẽ được gọi khi chúng tarender component lần thứ 2 trở lên.
Trong giai đoạn nàypropsvàstatesẽ được cập nhật khi bạn tác một một sự kiện để cập nhật trạng thái củapropsvàstate, điều này dẫn đến việc re-render lạicomponent.
Khi một instance trong component được update nó sẽ lần lượt gọi đến những methods .componentWillReceiveProps(đối với props)getDerivedStateFromPropsshouldComponentUpdateUNSAFE_componentWillUpdaterendergetSnapshotBeforeUpdatecomponentDidUpdate( so với props )
UNSAFE_componentWillReceiveProps
Chú ý: Đây là method ở các phiên bản cũ Phương thức này sẽ được gọi khipropsđược truyền đi được cập nhật. Mình có 1 ví dụ này khá dễ hiểu.
class App extends Component {constructor ( props ) {super ( props ) ;this.state = {data : 0 ,}} ;UNSAFE_componentWillMount ( ) {console.log ( ” component will mount ” ) ;} ;componentDidMount ( ) {console.log ( ” component did mount ” ) ;} ;increament ( ) {this. setState ( { data : this.state.data + 1 } ) ;}render ( ) {console.log ( ” render call ” )return (
)}}class Result extends React. Component {UNSAFE_componentWillReceiveProps ( newProps ) {
console.log(“new props called”);
console.log ( newProps ) ;} ;render ( ) {return (
)}}Kết quả
Lưu ý :componentWillReceivePropsnhận tham số truyền vào là giá trị mới của props sau khi được thay đổi.
getDerivedStateFromProps
Cái này dùng cho quả quá trìnhmoutinglẫnupdating, mình đã nói ở trên rồi .
shouldComponentUpdate
Phương thức này sẽ chạy trước khi hàmrender()được gọi. Phương thức này sẽ kiểm tra xem component có đượcrenderlại hay không.
Giá trị trả về của hàm này làtruehoặcfalse. Mặc định sẽ làtrue, nếu trả vềfalsecomponent của bạn sẽ không đượcrenderlại .Hàm này sẽ nhận hai tham số truyền vào lànextPropsvànextStatetương ứng với giá trị mới củapropsvàstate .
UNSAFE_componentWillUpdate
Chú ý: Đây là method ở các phiên bản cũ
Hàm này được gọi ngay sau phương thứcshouldComponentUpdate(nếu trả vềtrue), ngay trước khi giá trị mới củapropsvàstateđược nhận. Hàm này cũng sẽ nhận 2 tham số truyền vào lànextPropsvànextState.
Chú ý: Nếu muốn lấy giá trịpropsvàstatecũ ở trong hai phương thứccomponentWillUpdatevàshouldComponentUpdatethì chỉ cần sử dụngthis.propshoặcthis.stateđể lấy giá trị cũ.
Chúng ta không thể gọithis.setState()trong hàm này được, vì việc gọithis.setState()cũngtriggertớicomponentWillUpdatekhiến xảy ra một vòng lặp vô hạn.
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate ( prevProps, prevState ) {/ / code}
Hàm này được sử dụng để thay thế choacomponentWillUpdate, được gọi ngay trước khi DOM update.
Có một đặc biệt là hàm này sẽ trả về một giá trị, mà gía trị này sẽ được sử dụng trongcomponentDidUpdatenên trongcomponentDidUpdatesẽ có thêm 1 tham số thứ 3 tương ứng với giá trị mà hàm này trả về.
getSnapshotBeforeUpdate ( prevProps, prevState ) {console.log ( prevProps ) ;console.log ( prevState ) ;return 999 ;}componentDidUpdate ( prevProps, prevState, snapshot ) {console.log ( snapshot ) ; / / 999}
componentDidUpdate
Phương thức này được gọi khi component đã re-render xong. Khác vớicomponentWillUpdatevàshouldComponentUpdatethìcomponentDidUpdatenhận tham số truyền vào làprevPropsvàprevStatetương ứng với gía trị cũ củapropsvàstate.
Trong phương pháp này tất cả chúng ta cũng có thể thao tác với DOM trong JS rùi .class App extends Component {constructor ( props ) {super ( props ) ;this.state = {data : 0 ,}} ;UNSAFE_componentWillMount ( ) {console.log ( ” component will mount ” ) ;} ;componentDidMount ( ) {console.log ( ” component did mount ” ) ;} ;increament ( ) {this. setState ( { data : this.state.data + 1 } ) ;}render ( ) {console.log ( ” render call ” )return (
)}}class Result extends React. Component {UNSAFE_componentWillReceiveProps ( newProps ) {console.log ( ” new props called ” ) ;console.log ( newProps ) ;} ;static getDerivedStateFromProps ( nextProps, prevState ) {console.log ( ” getDerivedStateFromProps called ” ) ;if ( nextProps. data = = prevState. data ) {return null ;}return { data : nextProps. data } ;}shouldComponentUpdate ( nextProps, nextState ) {console.log ( ” shouldComponentUpdate called ” ) ;return true ;} ;UNSAFE_componentWillUpdate ( nextProps, nextState ) {console.log ( ” componentWillUpdate called ” ) ;} ;getSnapshotBeforeUpdate ( prevProps, prevState ) {console.log ( ” getSnapshotBeforeUpdate called ” ) ;return 999 ;}componentDidUpdate ( prevProps, prevState ) {console.log ( ” componentDidUpdate called ” ) ;}render ( ) {return (
)}}export default App
4. Unmounting
Đây là giai đoạn cuối cùng trongcomponent, quá trình này xảy ra khicomponentbị loại bỏ ra khỏi DOM.
Trong giai đoạn này chỉ có mỗi một phương thức làcomponentWillUnmount(). Trong hàm này người ta thường sẽ dùng để hủy các timer, cancel các request…
class App extends React. Component {…componentWillUnmount ( ) {console.log ( ” component will unmount ” )}…}
Lưu ý: Không thể gọisetStatetrong này vìcomponentsẽ không thểrenderlại.
setState() trong lifecycle method
Qua những giới thiệu trên mình sẽ tổng kết lại một chút để xem chúng ta nên sử dụngsetStatevà không được sử dụng trong các phương thức nào trong các giai đoạn diễn ra tại một component.
|
Phương thức |
Yes/No |
|
constructor() |
Không, vì đây là nơi chúng ta khởi tạo giá trị củastate |
|
UNSAFE_componentWillMount() |
Không, vì đây là quá trình diễn ra trước khirendercomponent, nên việc dùngsetStatetrong này không làm thay đổi giá trị |
|
getDerivedStateFromProps |
Không |
|
componentDidMount() |
Có, nhưng sẽ gây ra việcre-renderngay saurenderđược thực thi |
|
render() |
Không, sẽ dẫn tới vòng lặp vô hạn đơn vìsetStategọi tớirender() |
|
UNSAFE_componentWillReceiveProps |
Có |
|
shouldComponentUpdate |
Không |
|
UNSAFE_componentWillUpdate |
Không, vì sẽ dẫn tớiinfinite loop |
|
getSnapshotBeforeUpdate |
Không |
|
componentDidUpdate |
Có, nhưng phải bọc trong câu lệnh điều kiện kèm theo nếu không sẽ xảy rainfinite loop |
|
componentWillUnmount Xem thêm: Compliance Officer là gì? Công việc ra sao? Mức lương thế nào? |
Không |
Kết luận
Trên đây là những tìm hiểu được của mình về vòng đời trong mộtcomponenttrong một ứng dụng React.
