Vòng đời của component trong React đề cập đến 3 giai đoạn hoạt động của component trong React và cách dùng các hàm tự động 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. 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 đã biết 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.
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:
Vòng đời của component trong react là gì
Mỗi 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
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 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
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ả:
Chú ý: nếu trong hàm shouldComponentUpdate sửa true thành false thì 2 hàm sau sẽ không chạy
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
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
