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 ?

test php

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.

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.

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.

Bài viết này được đăng tại [free tuts .net]

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:

Bài tập ReactJS: API Requests trong ReactJS

Bài tập ReactJS: API Requests trong ReactJS

Bài tập ReactJS: Conditional Rendering trong ReactJS

Bài tập ReactJS: Conditional Rendering trong ReactJS

Bài tập ReactJS: Lists và Keys trong ReactJS

Bài tập ReactJS: Lists và Keys trong ReactJS

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: Handling Events trong ReactJS

Bài tập ReactJS: Handling Events trong ReactJS

Bài tập ReactJS: State và Lifecycle trong ReactJS

Bài tập ReactJS: State và Lifecycle trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Thiết kế và quản lý form đơn giản với thư viện Formik

Thiết kế và quản lý form đơn giản với thư viện Formik

React Microservices, xây dựng ứng dụng React mạnh mẽ

React Microservices, xây dựng ứng dụng React mạnh mẽ

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Performance Optimization trong React Js, tăng hiệu suất cực ngon

Performance Optimization trong React Js, tăng hiệu suất cực ngon

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

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…

Top