Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về Functional Component - một khái niệm quan trọng trong ReactJS. Đây là một cách đơn giản và hiệu quả để tạo ra các component trong ReactJS.

Khái niệm về Functional Component

Functional Component, còn được gọi là Stateless Component, là một hàm JavaScript đơn giản nhận vào props và trả về một React Element.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Trong đoạn mã trên, Welcome là một functional component. Nó nhận vào props là một đối tượng, và trả về một React Element là một thẻ <h1>.

So sánh giữa Functional Component và Class Component

Trong ReactJS, chúng ta có thể tạo component bằng cách sử dụng class hoặc function. Tuy nhiên, Functional Component có một số ưu điểm so với Class Component:

• Đơn giản hơn: Functional Component chỉ là một hàm JavaScript đơn giản, không có this, không có lifecycle method.
• Dễ đọc và hiểu hơn: Do không có this và lifecycle method, code của Functional Component thường ngắn gọn và dễ đọc hơn.
• Hiệu năng tốt hơn: React có thể xử lý hiệu quả hơn với Functional Component so với Class Component.

Props - Functional component

Giới thiệu Trong bài viết này, chúng ta sẽ tìm hiểu về props trong Functional Component trong React. Props là một cách để chúng ta truyền dữ liệu từ component cha đến component con. Khái niệm về...

useState

Giới thiệu Trong bài viết này, chúng ta sẽ tìm hiểu về useState, một Hook cơ bản trong ReactJS. Hook là một tính năng mới được thêm vào trong phiên bản React 16.8, cho phép chúng ta sử dụng state và...

useEffect

Giới thiệu Trong bài viết này, chúng ta sẽ tìm hiểu về useEffect, một trong những Hooks cơ bản trong ReactJS. useEffect giúp chúng ta thực hiện các side effect trong function component. Khái niệm về...

useRef

Giới thiệu Trong bài viết này, chúng ta sẽ tìm hiểu về useRef, một Hook trong ReactJS, cách sử dụng nó và một số ví dụ minh họa. Khái niệm useRef useRef là một Hook trong ReactJS, cho phép bạn tạo...

useMemo

Giới thiệu useMemo là một hook được cung cấp bởi ReactJS. Nó được sử dụng để tối ưu hóa hiệu suất của ứng dụng React bằng cách tránh việc thực hiện lại các hàm tính toán phức tạp hoặc render lại các...

useCallback

Giới thiệu Trong bài viết này, chúng ta sẽ tìm hiểu về useCallback - một hook quan trọng trong React. useCallback giúp chúng ta tối ưu hiệu suất của ứng dụng bằng cách tránh việc tạo lại các hàm...

useReducer

Giới thiệu Trong bài viết này, chúng ta sẽ tìm hiểu về useReducer, một hook trong ReactJS, cách sử dụng nó và tại sao nó lại quan trọng. Khái niệm về useReducer useReducer là một hook trong ReactJS...