Componentdidmount là gì

  -  

Xin chào tất cả mọi tín đồ sau một thời hạn vắng mặt từ bây giờ mình sẽ quay trở lại. Từ bây giờ chúng ta cùng tò mò về vòng đời của một component vào ReactJs.

Bạn đang xem: Componentdidmount là gì

Hình sau đây minh học cho một vòng đời của một component:

*

1) Initialization

Tương trường đoản cú hàm khởi tạo (constructor) được call đến lúc 1 thể hiện nay của component được chế tạo ra ra.

2) Mounting

Là những hàm thêm kết, kết nối những component với nhau.

componentWillMount()

Được điện thoại tư vấn đến trước khi hiển thị component ra phía bên ngoài trình duyệt. Quy trình này ra mắt hết sức cấp tốc chóng, bởi vì vậy không nên làm quá nhiều điều tại đây và hàm này được tiến hành một lần tốt nhất (từ phiên phiên bản 16.3 thì hàm này sẽ không được khuyến khích cần sử dụng và sẽ bị loại bỏ ở phiên bản 17).

Render()

Được điện thoại tư vấn khi hiển thị component ra ngoài trình duyệt.Sẽ return về ngôn từ mà các bạn đã viết, có thể là một component hoặc null hay là false (trong ngôi trường hợp không thích render gì cả).

componentDidMount()

Được gọi sau khi đã hiển thị component ra phía bên ngoài trình duyệt, với hàm này được thực hiện một lần duy nhất.Hàm này được hotline để thông tin component đã tồn tại trên DOM, từ đó các làm việc trên DOM rất có thể thực hiện bình thường với component này.

Để nắm rõ hơn bọn họ cùng đi qua một trong những ví dụ.

Xem thêm: Download Hp Support Assistant Là Gì, Cần Giúp Đỡ Cách Dùng Hp Support Assistant

Ví dụ:

import React, Component from "react";class app extends Component constructor(props) super(props); console.log("initialization"); componentWillMount() console.log("componentWillMount"); componentDidMount() console.log("componentDidMount"); render() console.log("render"); return ( div className="App"> /div> ); export default App;Khi chạy lên ta được công dụng như sau:

*

Đầu tiên lúc component được điện thoại tư vấn thì hàm hàm constructor() được gọi, kế tiếp đến componentWillMount(), tiếp theo sau là reder() ra phía bên ngoài và sau cuối hàm componentDidMount được hotline khi đã render() xong.

3) Updation

Là các vấn đề lúc mình update component về props, về state.

componentWillReceiveProps(nextProps)

Hàm này được chạy khi nhưng mà props của component đã có sinh ra gồm sự núm đổi.Phải điện thoại tư vấn setState() nếu còn muốn render lại.

shouldComponentUpdate(nextProps, nextState)

Được thực hiện ngay sau thời điểm state với props nạm đổi.sẽ trả về tác dụng true or false. Cách làm này sẽ khẳng định 1 component có được update hay không. Khoác định giá trị này là true. Nếu như bạn không ước ao component render lại sau khoản thời gian update state hay props thì return quý giá thành false.

componentWillUpdate(nextProps, nextState)

Được điện thoại tư vấn khi bọn họ update state của component trước lúc nó render lại.Bạn không thể gọi this.setState vào componentWillUpdateHàm render sẽ tiến hành gọi ngay lập tức sau hàm này.(từ phiên bản 16.3 thì hàm này không được khuyến khích dùng và sẽ bị nockout bỏ ở bạn dạng 17)

componentDidUpdate(prevProps, prevState)

Được gọi khi 1 component instance update, componentDidUpdate sẽ tiến hành gọi sau khoản thời gian render HTML được loading xong.

Sau đây bọn họ sẽ đi vào một số trong những ví dụ để làm rõ hơn.

Xem thêm: Công Ty Cho Thuê Tài Chính Là Gì ? Please Wait

Ví dụ về updation cho state

import React, Component from "react";class ứng dụng extends Component constructor(props) super(props); console.log("initialization"); this.state = component: "Component Init" updateState = () => this.setState( component: "New State" ); shouldComponentUpdate(nextProps, nextState) console.log("shouldComponentUpdate " + nextState.component); return true; componentWillUpdate(nextProps, nextState) console.log("componentWillUpdate " + nextState.component); componentDidUpdate(prevProps, prevState) console.log("componentDidUpdate " + prevState.component); render() console.log("render"); console.log(this.state.component); return ( div className="App"> button type="button" className="btn btn-primary" onClick=() => this.updateState()>Click Me/button> /div> ); export mặc định App;Kết trái khi bấm vào button "Click Me":

*

Ví dụ updation mang lại props

//App.jsimport React, Component from "react";import nội dung from "./Content";class phầm mềm extends Component constructor(props) super(props); this.state = fullName: "Tí" updateState = () => this.setState( fullName: "Tèo Văn Tí" ); render() return ( div className="App"> content name=this.state.fullName>/Content> button type="button" className="btn btn-primary" onClick=() => this.updateState()>Click Me/button> /div> ); export default App;Tạo một tệp tin Content.js trong folder src tất cả nội dung như sau:

//Content.jsimport React, Component from "react";class nội dung extends Component componentWillReceiveProps(nextProps) console.log("shouldComponentUpdate " + nextProps.name); shouldComponentUpdate(nextProps, nextState) console.log("shouldComponentUpdate " + nextProps.name); return true; componentWillUpdate(nextProps, nextState) console.log("componentWillUpdate " + nextProps.name); componentDidUpdate(prevProps, prevState) console.log("componentDidUpdate " + prevProps.name); render() return ( div> div>this.props.name/div> /div> ); export default Content;Kết trái khi click chuột button "Click Me"

*

4) Unmounting

componentWillUnmount()

Được gọi trước lúc một component bị remove khỏi một DOM.

Kết luận

Trên đấy là một chút kiến thức và kỹ năng mình biết về vòng đời của một component trong ReactJs.Cảm ơn mọi người đã xem nội dung bài viết của mình.

*