Hướng dẫn sử dụng React Class Components

27 tháng 09, 2022 - 417 lượt xem

Written by: Trung Hiếu
Gmail: buihieu3008@gmail.com
Bài viết gốc: https://www.w3schools.com/react/react_class.asp

  • Trước React 16.8, React Class Component là cách duy nhất để theo dõi trạng thái và vòng đời của một thành phần React. Các thành phần chức năng được coi là “không có trạng thái”.
  • Với việc bổ sung Hooks, các thành phần Function bây giờ gần như tương đương với các thành phần Class. Sự khác biệt rất nhỏ nên có thể bạn sẽ không bao giờ cần sử dụng thành phần Class trong React.
  • Mặc dù các thành phần Function được ưu tiên hơn, nhưng hiện tại không có kế hoạch nào về việc loại bỏ các thành phần Lớp khỏi React.
  • Bài viết dưới đây sẽ cung cấp cho bạn một cái nhìn tổng quan về cách sử dụng các thành phần Class trong React.

1. React Components:

  • Components là các cấu trúc độc lập được tách nhỏ ra và có thể tái sử dụng. Chúng phục vụ cùng mục đích như các hàm JavaScript, nhưng hoạt động riêng lẻ và trả về HTML thông qua một hàm render ().
  • Components có hai loại, Class Components và Function components, trong bài này bạn sẽ tìm hiểu về Class components.

2. Cách tạo một Class Components

  • Khi tạo một React Component, tên của thành phần đó phải bắt đầu bằng một chữ cái viết hoa.
  • Component phải bao gồm câu lệnh extends React.Component, câu lệnh này tạo ra sự kế thừa cho React.Component và cấp cho Component của bạn quyền truy cập vào các chức năng của React.Component.
  • Component cũng yêu cầu một phương thức render(), phương thức này trả về HTML.

Ví dụ:

Tạo một Class Component gọi là Car

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}
  • Bây giờ ứng dụng React của bạn có một thành phần gọi là Car, nó trả về một phần tử <h2>.
  • Để sử dụng Component này trong ứng dụng, hãy sử dụng cú pháp tương tự như HTML thông thường: <Car />

Ví dụ:

Hiển thị Component Car trong phần tử “root”:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Link ví dụ: https://www.w3schools.com/react/showreact.asp?filename=demo2_react_component_class

3. Component Constructor

  • Nếu có một hàm constructor() trong Component của bạn, thì hàm này sẽ được gọi khi Component được khởi tạo.
  • Constructor() là nơi bạn khởi tạo các thuộc tính của Component.
  • Trong React, các thuộc tính của Component nên được giữ trong một đối tượng gọi state.
  • Để kế thừa thành phần cha Constructor() sử dụng câu lệnh super, câu lệnh này thực thi hàm tạo của thành phần cha và Compnent của bạn có quyền truy cập vào tất cả các chức năng của thành phần cha (React.Component).

Ví dụ:

Tạo constructor function trong Car Component và thêm thuộc tính màu.

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

4. Props

  • Một cách khác để xử lý các thuộc tính Component là sử dụng props.
  • Props giống như các đối số của hàm và bạn gán chúng vào Component dưới dạng thuộc tính.

Ví dụ:

Sử dụng một thuộc tính để chuyển một màu cho Car Component và sử dụng nó trong hàm render ():

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);

5. Props trong Constructor

Nếu Component của bạn có một hàm khởi tạo, các props phải luôn được chuyển cho hàm tạo và cho cả React.Component thông qua phương thức super().

Ví dụ:

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car model="Mustang"/>);

6. Components trong Components

Trong Component có thể có Component khác

Ví dụ:

Sử dụng Car Component bên trong Garage Component:

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

7. Component trong file

  • React giúp chúng ta tái sử dụng lại 1 đoạn code và nó có thể chèn một số Component vào trong file.
  • Để làm điều đó chúng ta hãy tạo một file có đuôi .js
  • Chúng ta phải import React vào và kết thúc bằng export default Car;.

Ví dụ:

Tạo 1 file mới có tên là Car.js

import React from 'react';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

export default Car;
  • Mốn sử dụng Component Car bạn phải import file Car.js

Ví dụ:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

8. React Class Component State

  • State là nơi bạn lưu trữ nhưng thành phần, giá trị của một Component.
  • Khi State thay đổi thì Component của bạn cũng bị cập nhật lại.

Cách tạo một State

Ví dụ:

class Car extends React.Component {
  constructor(props) {
    super(props);
  this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

State có thể chứa nhiều thuộc tính

Ví dụ:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Cách sử dụng State

Có thể tham chiếu đến State ở bất kỳ đâu trong Component bằng cách sử dụng cú pháp this.state.propertyname

Ví dụ:

Tham chiếu đến State trong hàm render()

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

Link ví dụ: https://www.w3schools.com/react/showreact.asp?filename=demo2_react_state

Cách thay đổi giá trị của State

  • Để thay đổi giá trị của một State ta sử dụng phương thức this.setState()
  • Khi một giá trị trong State bị thay đổi Component sẽ được hiển thị lại và cập nhật những giá trị đã được thay đổi.

Ví dụ:

Thêm một nút để thay đổi thuộc tính màu

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

Link ví dụ: https://www.w3schools.com/react/showreact.asp?filename=demo2_react_state_setstate

Chú ý: Luôn sử dụng phương thức setState() để thay đổi thuộc tính State để đảm bảo Component của bạn hiểu rằng nó đã được cập nhật và render().

Bình luận

avatar
Mai Ngọc Hưng 2022-09-27 11:22:29.527685 +0000 UTC

Thanks author!!!

Avatar
* Vui lòng trước khi bình luận.
Ảnh đại diện
  +2 Thích
+2