REACTJS CĂN BẢN
REACTJS NÂNG CAO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Tìm hiểu Component Life Cycle trong ReactJS

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 ?

Component Life Cycle là gì ?

Chúng ta có thể thấy được mọi thứ trong thế giới đều hoạt động theo một chu kì (ví dụ như con người và cây cối). Cây được mọc lên, sẽ phát triển rồi đến một khoảng thời gian nào đó là sẽ chết đi. Trong React Component cũng vậy, một chu kì cũng xuất hiện, 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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

React cho phép chúng ta tham gia vào các giai đoạn của mỗi component bằng cách sử dụng các phương thức được xây dựng sẵn trong mỗi giai đoạn đó. Khi một components được khởi chạy nó sẽ phải trải qua 4 giai đoạn chính:

  • initialization
  • mounting
  • updating
  • unmounting

Phần tiếp theo chúng ta sẽ đi vào cách mà bạn có thể tham gia vào giai đoạn trong một components.

Component Life Cycle

Chúng ta sẽ tìm hiểu về các lifcecycle methods có trong mỗi giai đoạ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 thức 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 (
         <div>
            <h3>Mouting Method</h3>
         </div>
      );
   }
}

Updating

Đây là giai đoạn thứ ba mà các component phải thực hiện, sau giai đoạn initialization (khởi tạo ) , mount (render lần đầu),... . Trong giai đoạn này, dữ liệu của các phần (props & state) sẽ được cập nhật để đáp ứng với các 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 giai đoạn này chúng ta sẽ có 4 phương thức 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à nextStatenextProps.

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à nextStatenextProps

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 thức 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 (
         <div>
            <h3>Mounting Lifecycle Methods</h3>
         </div>
      );
   }
}

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 (
      <div>
        <p>Component LifeCycle</p>
      </div>
    );
  }
}

Đây là bước cuối cùng và sẽ kết thúc một vòng đời của components.

Trên đây chúng ta đã cùng nhau đi tìm hiểu về Component Life Cycle trong ReactJS. Đây là kiến thức rất cơ bản về nó nhưng cũng hết sức quan trọng trong quá trình làm việc với ReactJS sau này. Mong rằng bài viết sẽ giúp ích cho bạn.

Cùng chuyên mục:

Xây dựng Hook trong React JS (React Custom Hook)

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ…

Tích hợp Redux vào ReactJS

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…

React Router cơ bản

React Router cơ bản

Có thể khẳng định rằng những trang SPA (single page application) hiện đang rất phổ…

useEffect trong React Hooks

useEffect trong React Hooks

Trong bài viết này chúng ta sẽ đi tìm hiểu về useEffect trong React Hooks.…

Tìm hiểu React Hook useState

Tìm hiểu React Hook useState

React Hooks bao gồm rất 10 hooks khác nhau, trong phạm vi bài viết này…

Giới thiệu Hooks trong React JS

Giới thiệu Hooks trong React JS

Higher-Order Components trong ReactJS

Higher-Order Components trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Refs trong ReactJS

Tìm hiểu về Refs trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về refs trong…

Kỹ thuật Lifting State Up trong ReactJS

Kỹ thuật Lifting State Up trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về kỹ thuật…

Tìm hiểu về List và Keys trong ReactJS

Tìm hiểu về List và Keys trong ReactJS

Trong bài viết này chúng ta sẽ cùng hau đi tìm hiểu về lists và…

Render với điều kiện trong ReactJS

Render với điều kiện trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách để…

Handling Events (xử lý sự kiện) trong ReactJS

Handling Events (xử lý sự kiện) trong ReactJS

Top