HocCode.net - Chia sẽ kiến thức công nghệ

Reactjs - Lifecycle

04/01/2022   React

Reactjs - Lifecycle

Reactjs - Lifecycle

Vòng đời của component

Mỗi component trong react có một vòng đời mà bạn có thể theo dõi và thao tác trong ba giai đoạn chính của nó. đó là mounting, updating và unmounting

Mounting Updated Unmounting

1. constructor()// khởi tạo
2. getDerivedStateFromProps(props, state)//trả về đối tượng state với các giá trị thay đổi
3. render() //trả về HTML → hiển thị
4. componentDidMount() //gọi sau khi render, không trả về giá trị

1. getDerivedStateFromProps(props, state)// gọi khi component cập nhật, trả về đối tượng state với các giá trị thay đổi
2. shouldComponentUpdate()//trả về true/ false, mặc định là true, để kiểm tra có tiếp tục updated không
3. render() //trả về html sau khi updated
4. getSnapshotBeforeUpdate(prevProps, prevState) //giúp lấy props, state trước khi updated
5. componentDidUpdate() // gọi sau khi component cập nhật, không trả về giá trị

 1.componentWillUnmount()//gọi trước khi component bị remove khỏi DOM

1. Mounting: Đưa các phần tử vào DOM

- Khi mounting một component có 4 phương thức được gọi theo thứ tự:

→ constuctor()
→ getDerivedStateFromProps()
→ render()
→ componentDidMount().

- Phương thức render () là bắt buộc và sẽ luôn được gọi, các phương thức khác là tùy chọn và sẽ được gọi nếu bạn định nghĩa chúng.

f1. constructor
- Phương thức constructor () được gọi trước bất kỳ thứ gì khác, khi component được khởi tạo và nó là nơi tự nhiên để thiết lập trạng thái ban đầu và các giá trị ban đầu khác.

- Phương thức constructor () được gọi với props, như là các đối số, và bạn phải luôn bắt đầu bằng cách gọi super (props) trước bất kỳ thứ gì khác, điều này sẽ khởi tạo phương thức constructor của cha và cho phép component kế thừa các phương thức từ cha của nó (React. component).

Ví dụ: 

class Header extends React.Component {
  constructor(props) { // ko trả về 
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

f2. getDerivedStateFromProps
Phương thức getDerivedStateFromProps () được gọi ngay trước khi hiển thị (các) phần tử trong DOM.

Đây là nơi tự nhiên để thiết lập đối tượng state dựa trên các props ban đầu. 

Hàm này có 2 tham số là props, state và chạy sau hàm constructor

Nó nhận state làm đối số và trả về một đối tượng có các thay đổi đối với state.

Ví dụ bên dưới bắt đầu với màu yêu thích là "đỏ", nhưng phương thức getDerivedStateFromProps () cập nhật màu yêu thích dựa trên thuộc tính favcol:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) { 
  //trả về đối tượng state với các giá trị thay đổi
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

f3. render

Phương thức render () là bắt buộc và là phương thức thực sự xuất HTML ra DOM.

class Header extends React.Component {
  render() {//trả về HTML
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

f4. componentDidMount
Phương thức componentDidMount () được gọi sau khi component được kết xuất (render()).

Đây là nơi bạn chạy các câu lệnh yêu cầu component đó đã được đặt trong DOM.

VD: Lúc đầu, màu yêu thích của tôi là màu đỏ, nhưng hãy chờ tôi một chút, và thay vào đó nó là màu vàng:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  // chạy sau hàm render()
  componentDidMount() {
    setTimeout(() => {// không trả về giá trị
      this.setState({favoritecolor: "yellow"})
    }, 2000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

2. Updating,
Giai đoạn tiếp theo trong vòng đời là khi một component được updated

Một component được updated bất cứ khi nào có thay đổi về state hoặc props của component.

React có năm phương thức tích hợp được gọi, theo thứ tự này, khi một component được update:

→ getDerivedStateFromProps()
→ shouldComponentUpdate()
→ render()
→ getSnapshotBeforeUpdate()
→ componentDidUpdate()

Phương thức render () là bắt buộc và sẽ luôn được gọi, các phương thức khác là tùy chọn và sẽ được gọi nếu bạn định nghĩa chúng.

f1. getDerivedStateFromProps
Cũng tại các bản cập nhật, phương thức getDerivedStateFromProps được gọi. Đây là phương thức đầu tiên được gọi khi một component được cập nhật.

Đây vẫn là nơi tự nhiên để thiết lập đối tượng trạng thái dựa trên các đạo cụ ban đầu.

Ví dụ: bên dưới có một nút thay đổi màu yêu thích thành màu xanh lam, nhưng vì phương thức getDerivedStateFromProps () được gọi, cập nhật trạng thái với màu từ thuộc tính favcol, màu yêu thích vẫn được hiển thị dưới dạng màu vàng:

* Nếu muốn thay đổi được thì trả về return {} thì state không thay đổi.

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
  //trả về đối tượng state với các giá trị thay đổi
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

f2. shouldComponentUpdate: 

Nếu return false thì sẽ dừng updated
Trong phương thức shouldComponentUpdate (), bạn có thể trả về một giá trị Boolean chỉ định liệu React có nên tiếp tục kết xuất hay không. 

Giá trị mặc định là true.

Ví dụ dưới đây cho thấy điều gì sẽ xảy ra khi phương thức shouldComponentUpdate () trả về false. Dừng component hiển thị ở bất kỳ bản cập nhật nào:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {// trả về true/ false, mặc định là true
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

f3. render()
Tất nhiên, phương thức render () được gọi khi một component được cập nhật, nó phải kết xuất lại HTML thành DOM với những thay đổi mới.

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

f4. getSnapshotBeforeUpdate
Trong phương thức getSnapshotBeforeUpdate (), bạn có quyền truy cập vào các props và state trước khi cập nhật, có nghĩa là ngay cả sau khi cập nhật, bạn vẫn có thể kiểm tra các giá trị trước khi cập nhật.

Nếu có phương thức getSnapshotBeforeUpdate (), bạn cũng nên bao gồm phương thức componentDidUpdate (), nếu không bạn sẽ gặp lỗi.

Ví dụ dưới đây có vẻ phức tạp, nhưng tất cả những gì nó làm là thế này:

Khi component được mounting, nó được hiển thị với màu yêu thích "đỏ".

Khi component đã được mounting, một bộ đếm thời gian sẽ thay đổi state và sau một giây, màu yêu thích sẽ trở thành "vàng".

Hành động này kích hoạt giai đoạn updated và vì component này có phương thức getSnapshotBeforeUpdate (), phương thức này được thực thi và ghi thông báo vào phần tử DIV1 trống.

Sau đó, phương thức componentDidUpdate () được thực thi và viết một thông báo trong phần tử DIV2 trống:

Sử dụng phương thức getSnapshotBeforeUpdate () để tìm hiểu đối tượng state trông như thế nào trước khi update

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
   giúp lấy props, state trước khi updated
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

f5. componentDidUpdate
Phương thức componentDidUpdate được gọi sau khi component được cập nhật trong DOM.

Ví dụ dưới đây có vẻ phức tạp, nhưng tất cả những gì nó làm là thế này:

Khi component được gắn kết, nó được hiển thị với màu yêu thích "đỏ".

Khi component đã được gắn kết, một bộ đếm thời gian sẽ thay đổi trạng thái và màu sẽ trở thành "vàng".

Hành động này kích hoạt giai đoạn cập nhật và vì component này có phương thức componentDidUpdate, phương thức này được thực thi và viết thông báo trong phần tử DIV trống:

Thí dụ:
Phương thức componentDidUpdate được gọi sau khi bản cập nhật được hiển thị trong DOM:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {// không trả về giá trị
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <div id="mydiv"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

3. Unmounting.

Giai đoạn tiếp theo trong vòng đời là khi một thành phần bị xóa khỏi DOM hoặc ngắt kết nối như React thích gọi nó.

React chỉ có một phương thức tích hợp được gọi khi một thành phần không được gắn kết:

Phương thức componentWillUnmount được gọi khi thành phần sắp bị xóa khỏi DOM.

Component Child bị remove khỏi DOM trước khi remove nó sẽ gọi hàm componentWillUnmount

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false});
  }
  render() {
    let myheader=”xin chao”;
    if (this.state.show) {
      myheader = <Child />;
    };
    return (
      <div>
      {myheader}
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

ReactDOM.render(<Container />, document.getElementById('root'));

Cám ơn

Nhóm hữu ích Việc làm IT Lập trình viên Kiến thức CNTT Học Code

Bài viết cùng chủ đề

Reactjs - Giới thiệu, cài đặt

Reactjs - tìm hiểu React JSX

Reactjs - render HMTL

Reactjs - Components

Reactjs - Cài đặt dự án đầu tiên

Reactjs - Props

Reactjs - State

Reactjs - Lifecycle

Reactjs - Events

Reactjs - Form

Reactjs - sử dụng CSS &amp; Sass

Reactjs - thư viện UI Components tốt nhất cho ReactJS

Reactjs - Sử dụng thư viện react-redux
Powered By Hoccode.net © 2022