Tìm hiểu Life Cycle Reactjs qua các ví dụ cụ thể
26/10/2021 13:44
Nếu đã tìm hiểu qua về ReactJS, bạn sẽ biết rằng ReactJs có nhiều thành phần, hay còn gọi là Component. Mỗi component sẽ có vòng đời phát triển riêng từ khi bắt đầu dự án đến hết. Trong bài viết này, T3H sẽ giới thiệu với bạn về Life Cycle Reactjs và các phương pháp quản lý component Life Cycle ReactJs.
Phương pháp Life Cycle ReactJs
- componentWillMount được thực thi trước khi hiển thị, trên cả phía máy chủ và phía máy khách.
- componentDidMount được thực thi sau lần hiển thị đầu tiên chỉ ở phía máy khách. Đây là nơi các yêu cầu AJAX và DOM hoặc cập nhật trạng thái sẽ xảy ra. Phương pháp này cũng được sử dụng để tích hợp với các khung JavaScript khác và bất kỳ hàm nào có quá trình thực thi bị trì hoãn như setTimeout hoặc setInterval . Chúng ta đang sử dụng nó để cập nhật trạng thái để chúng tôi có thể kích hoạt các phương thức vòng đời khác.
- componentWillReceiveProps được gọi ngay sau khi các đạo cụ được cập nhật trước khi một kết xuất khác được gọi. Chúng tôi đã kích hoạt nó từ setNewNumber khi chúng tôi cập nhật trạng thái.
- shouldComponentUpdate phải trả về giá trị true hoặc false . Điều này sẽ xác định xem thành phần sẽ được cập nhật hay không. Điều này được đặt thành true theo mặc định. Nếu bạn chắc chắn rằng thành phần không cần hiển thị sau khi trạng thái hoặc đạo cụ được cập nhật, bạn có thể trả về giá trị sai .
- componentWillUpdate được gọi ngay trước khi kết xuất.
- componentDidUpdate được gọi ngay sau khi kết xuất.
- componentWillUnmount được gọi sau khi thành phần được ngắt kết nối khỏi dom. Chúng tôi đang unmount toàn bộ thành phần của chúng tôi trong main.js .
>>> Đọc thêm: setState ReactJs là gì? Cách sử dụng setstate trong lập trình ReactjS
Ví dụ Life Cycle ReactJs
Chúng ta sẽ khởi tạo 1 app trong file App.js chúng ta dùng code như sau để hiểu rõ hơn:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 0
}
this.setNewNumber = this.setNewNumber.bind(this)
};
setNewNumber() {
this.setState({data: this.state.data + 1})
}
render() {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
}
class Content extends React.Component {
componentWillMount() {
console.log('Component WILL MOUNT!')
}
componentDidMount() {
console.log('Component DID MOUNT!')
}
componentWillReceiveProps(newProps) {
console.log('Component WILL RECIEVE PROPS!')
}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('Component WILL UPDATE!');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component DID UPDATE!')
}
componentWillUnmount() {
console.log('Component WILL UNMOUNT!')
}
render() {
return (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
}
export default App;main.js trong Life Cycle Reactjs
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
setTimeout(() => {
ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);Kết quả
Sau khi kết xuất ban đầu, chúng ta sẽ nhận được màn hình sau.
Bên trên là một ví dụ đơn giản về cách tạo vòng đời component - Life Cycle Reactjs, trong thực tế tùy vào mục đích sử dụng mà ta có thể điều chỉnh vòng đời dừng tại đâu cho phù hợp, ví dụ nếu tạo một đồng hồ điện tử, thì ta sẽ không cho vòng đời kết thúc, khi đó sẽ không cần sử dụng componentWillUnmount().
Trên đây là một số thông tin về Life Cycle Reactjs bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về ReactJs qua khóa học lập trình ReactJs và các khóa học lập trình khác của Viện công nghệ thông tin T3H.
