EN VI

ReactJS - Component (thành phần) là gì?

Component React là khối xây dựng của một ứng dụng React. Chức năng chính của một component React là hiển thị giao diện người dùng và cập nhật nó mỗi khi trạng thái bên trong của nó thay đổi. Ngoài việc hiển thị UI, nó quản lý các sự kiện liên quan đến giao diện người dùng của nó. Tóm lại, component React cung cấp các chức năng sau:

  • Hiển thị ban đầu cho giao diện người dùng.
  • Quản lý và xử lý các sự kiện liên quan đến DOM và tương tác của người dùng.
  • Cập nhật giao diện người dùng mỗi khi trạng thái bên trong của nó thay đổi.

Component React thực hiện các tính năng này bằng ba khái niệm sau:

  • Thuộc tính (Properties) - Cho phép component nhận đầu vào.
  • Sự kiện (Events) - Cho phép component quản lý các sự kiện DOM và tương tác của người dùng.
  • Trạng thái (State) - Cho phép component giữ trạng thái của nó. Component Stateful cập nhật UI của nó liên quan đến trạng thái của nó.

Tạo một Component React:

Thư viện React có hai loại component. Các loại này được phân loại dựa trên cách chúng được tạo ra:

  • Component hàm: Sử dụng hàm JavaScript đơn giản.
  • Component lớp ES6 − Sử dụng lớp ES6.

Sự khác biệt cốt lõi giữa component hàm và component lớp là:

  • Các component hàm rất đơn giản về bản chất. Yêu cầu duy nhất của chúng là trả về một phần tử React.
function Hello() { 
   return <div>Hello</div>; 
}

Cùng chức năng với component hàm trên có thể được thực hiện bằng component lớp ES6 với một chút mã lệnh bổ sung.

class ExpenseEntryItem extends React.Component {         
   render() { 
      return ( 
         <div>Hello</div> 
      ); 
   }
}
  • Class components hỗ trợ quản lý trạng thái (state) ngay từ đầu, trong khi đó function components không hỗ trợ quản lý trạng thái. Tuy nhiên, React cung cấp một hook là useState() cho function components để quản lý trạng thái của chúng.
  • Class components có một chu kỳ sống (lifecycle) và có thể truy cập vào mỗi sự kiện trong chu kỳ sống thông qua các API gọi lại riêng biệt. Function components không có chu kỳ sống. Tuy nhiên, React cung cấp một hook là useEffect() cho function components để truy cập vào các giai đoạn khác nhau của component.

Tạo một lớp component:

Hãy tạo một thành phần React mới (trong ứng dụng quản lý chi phí của chúng ta), ExpenseEntryItem để trình bày một mục chi phí. Mục chi phí bao gồm tên, số tiền, ngày và loại. Biểu diễn đối tượng của mục chi phí là -

{
    'name': 'Nước ép xoài',
    'amount': 30.00,
    'spend_date': '2020-10-10',
    'category': 'Thực phẩm',
}

Mở ứng dụng quản lý chi phí trong trình soạn thảo ưa thích của bạn.

Tiếp theo, tạo một tệp, ExpenseEntryItem.css trong thư mục src/components để thiết kế thành phần của chúng tôi.

Tiếp theo, tạo một tệp, ExpenseEntryItem.js trong thư mục src/components bằng cách mở rộng React.Component.

import React from'react';
import './ExpenseEntryItem.css';

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div>
            <div><b>Mục:</b> <em>Nước ép xoài</em></div>
            <div><b>Số tiền:</b> <em>30.00</em></div>
            <div><b>Ngày chi:</b> <em>2020-10-10</em></div>
            <div><b>Loại:</b> <em>Thực phẩm</em></div>
         </div>
      );
   }
}

export default ExpenseEntryItem;

Tiếp theo, chỉ định thành phần là lớp xuất mặc định.

Bây giờ, chúng ta đã thành công trong việc tạo thành phần React đầu tiên của mình. Hãy sử dụng thành phần mới được tạo trong index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItem from './components/ExpenseEntryItem'

ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItem />
   </React.StrictMode>,
   document.getElementById('root')
);


Ví dụ:

Cùng chức năng có thể được thực hiện trên một trang web bằng cách sử dụng CDN như được hiển thị dưới đây:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>Ứng dụng React :: Thành phần ExpenseEntryItem</title>
   </head>
   <body>
      <div id="react-app"></div>
       
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
         class ExpenseEntryItem extends React.Component {
            render() {
               return (
                  <div>
                     <div><b>Mục:</b> <em>Nước ép xoài</em></div>
                     <div><b>Số tiền:</b> <em>30.00</em></div>
                     <div><b>Ngày chi:</b> <em>2020-10-10</em></div>
                     <div><b>Loại:</b> <em>Thực phẩm</em></div>
                  </div>
               );
            }
         }
         ReactDOM.render(
            <ExpenseEntryItem />,
            document.getElementById('react-app') );
      </script>
   </body>
</html>

Tiếp theo, dịch vụ ứng dụng bằng lệnh npm.

npm start

Kết quả:
Tiếp theo, mở trình duyệt và nhập http://localhost:3000 vào thanh địa chỉ và nhấn enter. Kết quả hiển thị như sau:

Mục: Nước ép xoài
Số tiền: 30.00
Ngày chi: 2020-10-10
Loại: Thực phẩm


Tạo một thành phần hàm:

Thành phần React cũng có thể được tạo bằng cách sử dụng hàm JavaScript đơn giản nhưng có các tính năng giới hạn. Thành phần React dựa trên chức năng không hỗ trợ quản lý trạng thái và các tính năng nâng cao khác. Nó có thể được sử dụng để nhanh chóng tạo một thành phần đơn giản.

Thành phần ExpenseEntryItem ở trên có thể được viết lại bằng hàm như được chỉ định bên dưới:

function ExpenseEntryItem() {
   return (
      <div>
         <div><b>Mục:</b> <em>Nước ép xoài</em></div>
         <div><b>Số tiền:</b> <em>30.00</em></div>
         <div><b>Ngày chi:</b> <em>2020-10-10</em></div>
         <div><b>Loại:</b> <em>Thực phẩm</em></div>
      </div>
   );
}

Ở đây, chúng ta chỉ bao gồm chức năng render và đó là đủ để tạo một thành phần React đơn giản.

Comment

Login


Forgot Your Password?

Create Account


Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login