Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về component life cycle trong React, đây là một phần quan trọng trong React, nó cho phép bạn hiểu được cách mà một component họat động ra sao ?
Bài viết này được đăng tại
freetuts.net
Bạn đang đọc: Tìm hiểu Component Life Cycle trong ReactJS – Freetuts
, không được copy dưới mọi hình thức.
Component Life Cycle là gì ?
Chúng ta hoàn toàn có thể thấy được mọi thứ trong quốc tế đều hoạt động giải trí theo một chu kì ( ví dụ như con người và cây cối ). Cây được mọc lên, sẽ tăng trưởng rồi đến một khoảng chừng thời hạn nào đó là sẽ chết đi. Trong React Component cũng vậy, một chu kì cũng Open, components được khởi tạo ( hiển thị ra DOM ), update, và kết thúc ( unmount ), .. đó được gọi là một component life cycle .
React được cho phép tất cả chúng ta tham gia vào những quy trình tiến độ của mỗi component bằng cách sử dụng những phương pháp được thiết kế xây dựng sẵn trong mỗi quy trình tiến độ đó. Khi một components được khởi chạy nó sẽ phải trải qua 4 tiến trình chính :
- initialization
- mounting
- updating
- unmounting
Phần tiếp theo tất cả chúng ta sẽ đi vào cách mà bạn hoàn toàn có thể tham gia vào quá trình trong một components .
Component Life Cycle
Chúng ta sẽ tìm hiểu và khám phá về những lifcecycle methods có trong mỗi quy trình tiến độ .
Initialization
Đây là giai đoạn mà thành phần sẽ bắt đầu hành trình của mình bằng cách khởi tạo state và props. Điều này thường được thực hiện bên trong phương thức constructor. Ở đây mình có ví dụ:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
website: 'Học ReactJS cùng Freetuts.net'
};
}
}
Ở giai đoạn này, React Component sẽ tiến hành khởi tạo các state, props hay các câu lệnh được khởi tạo trong constructor(),…
Mounting
Giai đoạn này được thực hiện sau khi quá trình initialization(khởi tạo) được hoàn thành. Nó thực hiện nhiệm vụ chuyển virtual DOM (DOM ảo) trong React thành DOM và hiển thị trên trình duyệt. Component sẽ được render lần đầu tiên, ở đây chúng ta có 3 phương thức để tham gia vào giai đoạn này.
componentWillMount()
Được khởi chạy khi một component chuẩn bị được mount (tức là trước khi thực hiện render), sau khi thực hiện xong componentWillMount() thì component mới có thể được mount.
Lưu ý: Chúng ta không nên thực hiện bất cứ thay đổi nào liên quan đến state, props hay call API ở trong hàm này, bởi thời gian chuẩn bị mount -> mount rất ngắn nên các tác vụ đó không thể hoàn thành kịp. Khiến cho component render ra kết quả không như bạn mong muốn.
componentDidMount()
Được gọi khi component đã được mount (render thành công ), quá trình này xảy ra sau khi componentWillMount() thực hiện xong. Trong phương thức này bạn có thể gọi API, thay đổi state, props.
Ở đây mình có ví dụ về 2 phương pháp mà mình vừa để cập :
class LifeCycle extends React.Component {
componentWillMount() {
console.log('Component will mount!')
}
componentDidMount() {
console.log('Component did mount!')
this.getList();
}
getList=()=>{
/*** Gọi API, update state,vv...***/
}
render() {
return (
Mouting Method
);
}
}
Updating
Đây là tiến trình thứ ba mà những component phải triển khai, sau quá trình initialization ( khởi tạo ), mount ( render lần đầu ), …. Trong quá trình này, tài liệu của những phần ( props và state ) sẽ được update để cung ứng với những sự kiện của người dùng như click, gõ, v.v. Điều này dẫn đến việc re-render lại component, ở trong quá trình này tất cả chúng ta sẽ có 4 phương pháp chính :
shouldComponentUpdate()
Phương thức này xác định xem component có nên được render lại hay không ? Theo mặc định, nó trả về true. Nhưng bạn có thể thay đổi giá trị trả về của nó theo từng trường hợp.
Nó sẽ nhận về 2 tham số truyền vào là nextState và nextProps.
componentWillUpdate()
Phương thức này được gọi trước khi tiến hành re-render, bạn có thể thực hiện các hành động như update state, props,…trong phương thức này trước khi tiến hành re-render. Giống như shouldComponentUpdate(), componentWillUpdate() sẽ nhận vào 2 tham số đó là nextState và nextProps
ComponentDidUpdate()
Phương thức này được gọi khi component đã re-render xong. Chúng ta có ví dụ về cả 3 phương pháp về đề cập ở trên .
class LifeCycle extends React.Component {
constructor(props)
{
super(props);
this.state = {
date : new Date(),
clickedStatus: false,
list:[]
};
}
componentWillMount() {
console.log('Component will mount!')
}
componentDidMount() {
console.log('Component did mount!')
this.getList();
}
getList=()=>{
/*** method to make api call***/
fetch('https://api.mydomain.com')
.then(response => response.json())
.then(data => this.setState({ list:data }));
}
shouldComponentUpdate(nextProps, nextState){
return this.state.list!==nextState.list
}
componentWillUpdate(nextProps, nextState) {
console.log('Component will update!');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component did update!')
}
render() {
return (
Mounting Lifecycle Methods
);
}
}
Unmounting
Đây là bước cuối cùng trong mỗi component, khi tất cả các tác vụ hoàn thành và bạn tiến hành unmount DOM. Quá trình này chỉ có duy nhất 1 phương thức đó là componentWillUnmount() :
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
website: 'Học ReactJS'
};
}
componentWillUnmount() {
console.log('component will unmount')
}
render() {
return (
Component LifeCycle
);
}
}
Đây là bước sau cuối và sẽ kết thúc một vòng đời của components .
Trên đây tất cả chúng ta đã cùng nhau đi khám phá về Component Life Cycle trong ReactJS. Đây là kỹ năng và kiến thức rất cơ bản về nó nhưng cũng rất là quan trọng trong quy trình thao tác với ReactJS sau này. Mong rằng bài viết sẽ giúp ích cho bạn .
Source: https://wikifin.net
Category: Blog