Sự khác nhau giữa Props và State trong ReactJS

State là gì?

State là thành phần lưu trữ thông tin về một component, khi state thay đổi nhờ vào hàm setState() thì component sẽ bị re-render lại.

Video học Hook useState()

Nguồn F8 - Sơn Đặng

Chú ý:

• State (trạng thái) là một đối tượng chứa các dữ liệu có thể thay đổi trong một component.
• Được sử dụng trong Class Component hoặc Function Component với Hook useState.
• Chỉ có thể được quản lý và thay đổi bên trong component đó.
• Khi state thay đổi, React sẽ tự động cập nhật lại giao diện để phản ánh các thay đổi đó.
• Nếu dự đoán được một component cần quản lý state, thì nó nên được tạo ở trong một class component chứ không phải là một function component.

1) Chúng ta sẽ đến với phần ví dụ để hiểu rõ hơn nhé

import React, { useState } from 'react';
                                                                             
const ExampleComponent = () => {
  // Khai báo một biến state mới, gọi nó là "count"

  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

Ví dụ trên khai báo một biến state gọi là count và set nó về 0. React sẽ nhớ giá trị hiện tại của nó và cung cấp cho hàm của chúng ta giá trị mới nhất giữa những lần re-render. Nếu chúng ta muốn cập nhật giá trị count hiện tại, có thể gọi hàm setCount.

Props là gì?

Props là 1 từ viết ngắn gọn của properties , nhưng lại là 1 khái niệm trong ReactJS. props là 1 đối tượng, nó lưu trữ các giá trị của các attribute (thuộc tính) của một thẻ (Tag).Là cách mà component có thể nhận được các giá trị của thuộc tính truyền vào từ bên ngoài vào, và là cách mà các component có thể nói chuyện với nhau.

Video Học Props cơ bản

Nguồn F8 - Sơn Đặng

Chú ý:

• Props (thuộc tính) là các dữ liệu được truyền từ component cha xuống các component con thông qua các thuộc tính (props).
• Props không thể thay đổi bên trong component con, chỉ được truyền từ component cha.
• Dùng để truyền dữ liệu và cấu hình cho các component con.
• Khả năng tái sử dụng cao.

import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <p>Name: {props.name}</p>                                            
      <p>Age: {props.age}</p>
    </div>
  );
};

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent name="Blog Zecky" age={30} />
      <ChildComponent name="Zecky ReactJS" age={20} />
    </div>
  );
};

Sự khác nhau giữa Props và State

• Các thành phần nhận dữ liệu từ bên ngoài cùng props, trong đó chúng có thể tạo và quản lý data của chúng cùng state.
• Props dùng để truyền dữ liệu, trong đó state quản lý dữ liệu.
• Dữ liệu trong props chỉ để đọc, và không thể bị sửa đổi bởi thành phần nhận nó từ bên ngoài.
• Dữ liệu state có thể được sửa đổi bởi thành phần của chính nó, nhưng riêng tư (Không thể bị truy cập từ bên ngoài)
• Props chỉ có thể được truyền từ thành phần mẹ đến thành phần con (flow không trực tiếp)
• Thay đổi state nên được thực hiện cùng setState.

Tôi có thể dùng state trong mọi component không?

• Một câu hỏi quan trọng khác mà bạn nên đặt ra về state đó là: Chính xác là chúng ta có thể dùng state ở đâu. Dạo gần đây, state chỉ được dùng trong class components, không phải trong functional components.
• Đó là lý do tại sao các thành phần chức năng còn được gọi là các thành phần không trạng thái. Tuy nhiên, sau sự ra đời của React Hooks, state bây giờ có thể được sử dụng cả trong class và functional components.
• Nếu dự án của bạn không sử dụng React Hooks, vậy thì bạn chỉ có thể sử dụng state trong các lớp chức năng.

Tổng kết

Props và State là hai khái niệm rất quan trọng và được sử dụng rất là nhiều trong mọi dự án ReactJS, NextJS. Vì vậy hãy đọc thật kỹ và làm thật nhiều để hiểu rõ hơn về bản chất của hai khái niệm này nhé!.