Vòng đời của component trong React

Vòng đời của component trong React hướng dẫn về 3 giai đoạn của component trong React và cách dùng các hàm tự động chạy trong component.

Ở bài trước , chúng ta đã tìm hiểu và sử dụng component trong React , nhưng câu chuyện về component chưa hết, bài bày chúng ta tiêp tục nhé, câu chuyện về component bây giờ có tên Vòng đời của component trong React


Component là một khối code độc lập, có thể tái sử dụng nhiều lần.  Trong mỗi component có 2 loại thông tin: là props và state. React cũng trang bị cho mỗi compoment một số hàm tự động chạy, trong bài trước bạn đã làm quen hàm constructor. Bài này chúng ta sẽ biết thêm nhiều hàm tự chạy khác nữa thông qua việc tìm hiểu vòng đời của component trong React.

Chuẩn bị bài học

1. Tạo project react với lệnh create-react-app bai3

2. Chạy project với lệnh npm start

3. File index.html

 <div class="container">
    <header id="header"> HEADER </header>      
    <main>
      <article> 
            <div id="sachMoi"></div>
      </article> 
      <aside>
          <div id="giohang_container">Giỏ hàng</div>
      </aside>
    </main>
    <footer>FOOTER</footer>
  </div>

index.css

a { text-decoration: none;}
body { margin: 0; background: #193549; color: white}
.container { width: 1200px; margin: auto; font-size: 1.2em;}
header { height: 80px; background: slategray; position: relative;}
main {
  display: grid; grid-template-columns: auto 300px;
  min-height: 400px;
}
main > article {background: lightgrey; }
main > aside { background:indianred;}
footer { background:bisque; height: 45px; color:brown; 
  text-align: center; line-height: 45px;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const arrSach = [
  {  id:1 , tensach:'Sống Chậm Đợi Nắng Lên', gia:89000 , 
     urlHinh:'./nghethuatsong/song-cham-doi-nang-len.png' ,mota:''
  },
  {  id:2 , tensach:'Sống Xanh Như Những Lá Trà', gia:109000 ,  
     urlHinh:'./nghethuatsong/song-xanh-nhu-nhung-la-tra.png' ,mota:''
  },
  {  id:3 , tensach:'Sống Như Lần Đầu, Yêu Như Lần Cuối', gia:99000 ,
     urlHinh:'./nghethuatsong/song-nhu-lan-dau-tien-yeu-thuong-nhu-lan-cuoi.jpg' ,mota:''
  },
  {  id:4 , tensach:'Những Ngày Đầy Nắng', gia:129000 , 
     urlHinh:'./nghethuatsong/nhung-ngay-day-nang.png' ,mota:''
  },
  {  id:5, tensach:'Sức Mạnh Của Sự Tử Tế', gia:68000 , 
     urlHinh:'./nghethuatsong/suc-manh-cua-su-tu-te.png' ,mota:''
  },
  {  id:6 , tensach:'Để Có Một Tương Lai', gia:155000 , 
     urlHinh:'./nghethuatsong/de-co-mot-tuong-lai.png' ,mota:''},
]

Kết quả chạy project trong trình duyệt:

Layout trang web chuẩn bị test bài học

Vòng đời của component trong react là gì

Mỗi 1 component trong react có 1 vòng đời (lifecycle) của riêng nó. Vòng đời component có 3 giai đoạn: mounting, updating, unmounting

React component  lifecycle

Giai đoạn mouting component

Mounting là giai đoạn kết xuất JSX vào DOM, các hàm sau trong component sẽ tự chạy theo thứ tự (nếu có) : constructor(), render(), componentDidMount()

contructor()  là hàm được chạy trước tiên , khi khởi tạo component. Đây là nơi bạn dùng để gán các giá trị ban đầu cho state. Hàm constructor() có props là tham số. Trong constructor, bạn phải có dùng lệnh  super(props) để chạy constructor của React.

Hàm render()  trong component luôn được gọi khi mouting, trong hàm này bạn cho hiển thị JSX vào DOM.

Hàm componentDidMount() trong component – nếu có – cũng sẽ được chạy tự động 1 lần trong lifecycle, sau khi component được render xong.  Ví dụ:

– Tạo file src/Hien1Sach.js

import React from 'react';
class Hien1Sach extends React.Component {
  constructor(props){
    super();
    console.log("Hien1Sach Constructor");
  }
  componentDidMount(){
    console.log("Hien1Sach DidMount");
  }
  render(){
    console.log("Hien1Sach Render");
    const kq =
    <div className='Hien1Sach'>
        <h3>{this.props.sach.tensach}</h3>        
        <p className="gia">{this.props.sach.gia}</p>
    </div>
    return (kq);
  }
}
export default Hien1Sach;

– index.js

import Hien1Sach from './Hien1Sach';
ReactDOM.render(
  <Hien1Sach sach={arrSach[0]} />,
  document.getElementById("sachMoi")
);

– Kết quả chạy

Kết quả test react component mouting

Giai đoạn update component

Là giai đoạn component đang hoạt động vả props/ state của nó bị thay đổi.  Khi đổi props/state, 3 hàm sau sẽ tuần tự chạy  nếu có khai báo trong component:  shouldComponentUpdate() , render() , componentDidUpdate()

shouldComponentUpdate() là hàm chạy trước tiên khi có thay đổi props/state, bạn code ở đây để cân nhắc xem có nên chạy 2 hàm phía sau hay không. Hàm này mặc định trả về true, bạn có thể trả về false nếu không muốn chạy 2 hàm phía sau (render và componentDidUpdate)

render(): hàm này đã được chạy khi mount, nhưng khi có thay đổi props/state, nó sẽ tự chạy lại , nhờ đó, các thay đổi sẽ tự động có kết quả trên trang web.

componentDidUpdate() là hàm chạy  tự động sau cùng, sau hàm render khi có đổi props/state. Ví dụ:

– src/Hien1Sach.js , code thêm code

import React from 'react';
class Hien1Sach extends React.Component {
  constructor(props){
    super();
    console.log("Hien1Sach Constructor");
  } 
  shouldComponentUpdate(){
    console.log("Hien1Sach shouldComponentUpdate");
    return true; //false
  }
  componentDidUpdate(){
    console.log("Hien1Sach componentDidUpdate");
  }
  componentDidMount(){
    console.log("Hien1Sach DidMount");
  }
  render(){
    console.log("Hien1Sach Render");
    const kq =
    <div className='Hien1Sach'>
        <h3>{this.props.sach.tensach}</h3>        
        <p className="gia">{this.props.sach.gia}</p>
    </div>
    return (kq);
  }
}
export default Hien1Sach;

– file index.js: thêm 1 đoạn code để kết xuất 1 quyển sách khác ra, khi props sach thay đổi giá trị thì các hàm đề cập trên sẽ chạy:

import Hien1Sach from './Hien1Sach';
ReactDOM.render(
  <Hien1Sach sach={arrSach[0]} />,
  document.getElementById("sachMoi")
);
ReactDOM.render(
  <Hien1Sach sach={arrSach[1]} />,
  document.getElementById("sachMoi")
);

– Kết quả:

Kết quả test React component update

Chú ý: nếu trong hàm shouldComponentUpdate sửa true thành false thì 2 hàm sau sẽ không chạy

Kết quả test react component update, không cho update

Giai đoạn unmounting component

Là lúc mà component được xoá khỏi DOM, kết thúc lifecycle của component, lúc này hàm componentWillUnmount() sẽ tự động chạy nếu có định nghĩa trong component. Ví dụ:

– file index.js bổ sung code:

function xoaSach(){
  ReactDOM.render(
    null,
    document.getElementById("sachMoi")
  );
}
ReactDOM.render(
  <button onClick={xoaSach}> Xóa Sách </button>,
  document.getElementsByTagName("footer")[0]
);

– file Hien1Sach.js bổ sung code:

componentWillUnmount(){
    console.log("Hien1Sach componentWillUnmount");
}

– Test: nhắp nút Xóa Sách, sách sẽ mất và hàm sẽ chạy

Kết quả test react component unmouting

Chuyện về component đến đây tạm dừng nhé, để làm lab. Mời bạn tham khảo link này để hiểu thêm: https://www.w3schools.com/react/react_lifecycle.asp