ReactJS: React Lifecycle

React Lifecycle

ReatcJS 2018

constructor(props) {
  //1# Trước khi rendering
}
componentWillMount() {
  //1# Phương thức này được gọi ngay trước khi component được render lần đầu tiên
}
componentDidMount() {
  //1# Phương thức này được gọi ngay sau khi component được render lần đầu tiên
}
//Dùng setState() ở đây
componentWillReceiveProps(nextProps) {
  //2# Phương thức này được gọi ngay trước khi thuộc tính của component được cập nhật thành giá trị mới là nextProps
}
//Bỏ qua render() if return false
shouldComponentUpdate(nextProps, nextState) {
  //2# Phương thức này được gọi ngay trước khi component được render và sau khi thuộc tính component được cập nhật
}
//Không dùng setState() ở đây
componentWillUpdate(prevProps, prevState) {
  //2# Phương thức này được gọi ngay trước khi component UI đã được cập nhật
}
componentDidUpdate(prevProps, prevState) {
  //2# Phương thức này được gọi ngay sau khi component UI đã được cập nhật
}
componentWillUnmount() {
  //1# Phương thức này được gọi ngay trước khi một component được unmount (hay xoá) khỏi DOM element
}
componentDidCatch() {
  //1# Để xử lý lỗi, trong một lifecycle method hoặc trong constructor của bất kỳ child component
}

NOTE 1#:
Set initial state trên constructor(). 
Thêm trình xử lý sự kiện DOM, bộ tính giờ (vv) vào componentDidMount(), 
Loại bỏ chúng trên componentWillUnmount().
NOTE 2#:
Được gọi properties cha thay đổi và setState()
Chúng không được gọi khi render ban đầu