[React] Những điều có thể bạn chưa biết về Function Component

by Hieu Nguyen
0 comment 142 views

Chắc hẳn khi đọc bài này bạn cũng đã từng nghe nói đến các khái niệm Function Component và Class Component hay Stateless Component và Stateful Component. Cũng có thể bạn cũng từng nghe Function Component là Stateless Component. Vậy nó có thực sự là như thế. Trong bài viết này chúng ta cùng nhau tìm hiểu nhé.

Nội dung bài viết gồm các phần sau:

  • Function Component là gì?
  • Function Component có props không?
  • Function component và sức mạnh đến từ React Hook

Function component là gi?

Function component là React Component được viết bằng Pure Function. Dễ hiểu hơn thì nó được viết theo dạng sau:

export function Counter() {
  return <div>count</div>;
}

Function Component có props không?

Có bạn sẽ đặt câu hỏi sau khi nhìn thấy cách viết trên, Function Component có props không? Câu trả lời là có. Bạn có thể truyền props cho component như sau:

import React from 'react';

export function Counter(props) {
  return <div>{props.count}</div>;
}

Và bạn vẫn có thể khai báo propTypes cho component như bình thường

Counter.propTypes = {
  count: PropTypes.number
};

Mọi thứ đều ổn đến lúc này và có lẽ bạn cũng có nghe ai đó nhắc đến Stateless component. Có thể bạn cũng nghe ai đó nói Function Component là Stateless component. Vậy thì Function component có thực sự là Stateless không?

Function component và sức mạnh đến từ React Hook

Trước khi React Hooks ra đời, Function component thực sự là Stateless component. Đơn giản bởi bạn chẳng có cách nào thêm state cho nó cả. Function component khi đó chỉ có thể được dùng để render HTML với props truyền vào mà thôi.

Khi React Hooks ra đời thì lại là câu chuyện khác. Function component có thể có state của riêng nó. Vậy làm sao để thêm state cho Function component? Với useState bạn có thể thêm state cho nó.

Thay đổi một chút đoạn source code bên trên như sau là Functiona component của bạn đã support state rồi đấy.

import React, { useState } from 'react';
import PropTypes from 'prop-types';

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Counter.propTypes = {
  count: PropTypes.number
};

Kết luận lại là Function Component sẽ là Stateless Component nếu không có sự trợ giúp của React Hooks. Với React Hooks thì Function Component đã có toàn bộ sức mạnh như Class Component rồi.

Cám ơn các bạn đã dành thời gian theo dõi bài viết. Hy vọng bày viết sẽ giúp ích cho các bạn.

0 comment
5

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

You may also like