Nếu bạn chưa biết React là gì thì có thể tham khảo từ các bài viết này nhé.
Giới thiệu
Đầu tiên thì React cho phép tạo component bằng method React.createClass() hoặc với ES6 là class App extends React.Component {}, Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái.
Khái niệm component lifecycle trong react là một trong những khái niệm quan trọng nhất, hiểu rõ lifecycle của component sẽ giúp bạn biết khi component được tạo, thay đổi, unmount thì những method nào được gọi và làm những công việc gì. Rất thú vị phải không.
Component Lifecycle
Để có thể hiểu rõ về lifecycle thì chúng ta cần nắm được sự khác nhau của lifecycle khi component được khởi tạo (mounting), khi state, props thay đổi(Updating) và khi unmount component như hình dưới đây:
Tiếp theo chúng ta sẽ đi đến chi tiết tìm hiểu cụ thể khi Mounting, Updating và Unmount React sẽ làm những gì nhé.
Khi khởi tạo
Từ ảnh trên ta thấy có 2 method getDefaultProps và getInitialState được gọi đầu tiên. 2 method này được gọi 1 lần khi rendering component.
Cụ thể, getDefaultProps có thể sử dụng cho việc định nghĩa bất cứ props nào mà bạn cần. Sau khi định nghĩa, có thể sử dụng bằng this.props
App.defaultProps = {
//Khai bao bien cho props
people: 'vnlab'
};
Tương tự thì getInitialState sẽ dùng để định nghĩa bất cứ state nào mà bạn cần. Và đương nhiên, sau khi định nghĩa thì có thể sử dụng với this.state.
this.state = {
yasumi: false,
};
2 method khác sẽ được gọi khi khởi tạo component là componentWillMount và componentdidMount.
Đúng như tên gọi, componentWillMount sẽ được gọi trước khi method render được executed. Có một lưu ý là componentWillMount sẽ không được gọi trong quá trình re-render.
Ngắn gọn là nó chỉ được gọi một lần duy nhất khi component được mount vào DOM.
componentWillMount() {
}
render method sẽ return về nội dung mà bạn đã viết, có thể là một component hoặc null hoặc là false (trong trường hợp không muốn render gì cả).
Dưới đây là ví dụ trường hợp không muốn render gì cả.
render() {
return (
fasle
)
}
Ngay sau khi method render được gọi thì function componentDidMount sẽ được gọi. Hàm này được gọi để thông báo component đã tồn tại trên DOM, từ đó các thao tác trên DOM có thể thực hiện bình thường với component này.
Khi State thay đổi
Khi state thay đổi, sẽ trigger đến những methods sau:
Hàm shouldComponentUpdate thực hiện ngay sau khi state và props thay đổi. shouldComponentUpdate sẽ trả về kết quả true/false. Vậy sử dụng nó để làm gì nhỉ?
Ví dụ đây là subtree của components. Với mỗi node SCU sẽ cho React biết chính xác chỗ nào cần render lại.
Từ ảnh trên, ta có thể thấy SCU của C2 trả về giá trị false nên React sẽ không render C2, thậm chí là cả C4,C5 cũng không cần phải kiểm tra shouldComponentUpdate nữa.
Tương tự như vây, nhận thấy C1 và C3 shouldComponentUpdate trả về giá trị true, React sẽ xuống node dưới và được C6 có shouldComponentUpdate trả về false nên cần phải render lại.
Như ví dụ bên dưới chỉ khi nào state count là số chẵn thì mới tiến hành render lại.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {count: 1};
}
shouldComponentUpdate(nextProps, nextState) {
console.log(nextState)
if (nextState.count % 2 === 0) {
return true;
}
return false;
}
render() {
return (
<button
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}
Ngay sau khi shouldComponentUpdate return true thì componentWillUpdate sẽ được gọi. Lưu ý là bạn không thể gọi this.setState() tại đây.
componentWillUpdate(nextProps, nextState) {
// shouldComponentUpdate return true
}
Cuối cùng componentDidUpdate sẽ được gọi sau khi render xong.
componentDidUpdate(prevProps, prevState) {
}
Khi Props thay đổi
componentWillRecieveProps chỉ được gọi khi props được thay đổi ngoại trừ lần đầu rendering.
Sử dụng để thay đổi trạng thái (State) của component phụ thuộc props, ngoài việc hiển thị lên browser thì muốn làm thêm gì đó. Ví dụ như notification chẳng hạn.
Ngoài ra, có thể sử dụng trong việc update State ứng với mỗi giá trị của Prop thay đổi.
componentWillReceiveProps(nextProps) {
}
Khi unmouting
Unmouting là khi component được xóa khỏi DOM.
Chỉ có một method duy nhất được gọi trước khi Component được xóa khỏi DOM.
Được sử dụng trong trường hợp muốn cleanup event hay timer chẳng hạn.
Tổng kết
Khi mới chân ướt chân ráo vào React, chắc hẳn ai cũng thấy lúng túng với Redux, Flux... Nó vốn là những khái niệm rất khó nuốt, nhất là khi bạn chưa hiểu rõ lifecycle của component trong React như thế nào. Hi vọng qua bài viết này có thể giúp bạn hiểu rõ về vòng đời của component trong React.
