Trong bài viết này hãy cùng Dạy kèm IT tìm hiểu về các kiểu component trong react nhé!

ReactJS là một trong những thư viện JavaScript phổ biến nhất hiện nay và được sử dụng rộng rãi trong việc xây dựng các ứng dụng web hiện đại. Một trong những điểm đặc biệt của ReactJS là dùng các Component để tách biệt giao diện thành các phần nhỏ và có thể tái sử dụng. Trong bài viết này, chúng ta sẽ tìm hiểu về hai loại Component cơ bản trong ReactJS là Function Component và Class Component, cùng với cách sử dụng và sự khác nhau giữa chúng.

Function Component

Function Component là một hàm JavaScript thông thường, nhận vào các props và trả về một đoạn code JSX để hiển thị giao diện. Đây là cách đơn giản nhất để tạo ra một Component trong ReactJS. Ví dụ:

function Greeting(props) {
  return <h1>Hello {props.name}</h1>;
}
<div class="copied" data-code="function Greeting(props) {
  return 
Hello {props.name}
;
}
">

Trong đoạn code trên, chúng ta tạo một Function Component có tên là “Greeting” với props là “name” và trả về một phần tử JSX là thẻ “h1” với nội dung là “Hello” kèm theo giá trị của props “name”. Để sử dụng Component này, chúng ta có thể viết như sau:

<Greeting name="John" />
<div class="copied" data-code="
">

Vì Function Component chỉ là một hàm thông thường, nên nó không có khả năng lưu trữ các giá trị state của Component. Nếu cần sử dụng state, chúng ta có thể sử dụng hooks bên trong Function Component.

Class Component

Class Component là một class JavaScript đặc biệt, kế thừa từ React.Component. Class Component cũng nhận các props và trả về một đoạn code JSX để hiển thị giao diện. Để tạo một Class Component, chúng ta phải định nghĩa các phương thức bắt buộc như “render()” và có thể sử dụng các phương thức khác như “constructor()” để khởi tạo giá trị ban đầu cho state. Ví dụ:

class Time extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: new Date() };
  }

  componentDidMount() {
    this.timer = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  tick() {
    this.setState({ time: new Date() });
  }

  render() {
    return <p>The current time is: {this.state.time.toLocaleTimeString()}</p>;
  }
}
 this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  tick() {
    this.setState({ time: new Date() });
  }

  render() {
    return 
The current time is: {this.state.time.toLocaleTimeString()}
;
  }
}
">

Trong đoạn code trên, chúng ta tạo một Class Component có tên là “Time”. Trước khi hiển thị giao diện, class này sẽ khởi tạo giá trị state là “time” với giá trị ban đầu là một đối tượng Date. Sau đó, trong phương thức “componentDidMount()”, chúng ta sử dụng hàm setInterval() để cập nhật state “time” sau mỗi giây và sử dụng hàm clearInterval() trong phương thức “componentWillUnmount()” để dừng cập nhật state khi Component bị hủy. Cuối cùng, trong phương thức “render()”, chúng ta hiển thị giá trị state hiện tại của “time” trong một thẻ “p”. Để sử dụng Component này, chúng ta có thể viết như sau:

<Time />
<div class="copied" data-code="
">