💪State và Prop trong React

State và Prop trong React: Khác biệt và Mối quan hệ

State và Prop là hai khái niệm quan trọng trong React, đóng vai trò then chốt trong việc quản lý và truyền tải dữ liệu trong các thành phần (component).

1. State:

• Định nghĩa: State là dữ liệu độc quyền thuộc về một component, thay đổi theo thời gian và ảnh hưởng trực tiếp đến giao diện người dùng (UI) của component đó.

• Đặc điểm:

  • Chỉ accessible từ bên trong component.

  • Quản lý bởi component sở hữu.

  • Cập nhật bằng phương thức setState.

  • Kích hoạt re-render component khi thay đổi.

Ví dụ:

JavaScript

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

Hãy thận trọng khi sử dụng các đoạn mã.content_copy

2. Prop:

• Định nghĩa: Prop là dữ liệu bị truyền từ component cha sang component con, không thay đổi và không ảnh hưởng trực tiếp đến giao diện người dùng (UI) của component con.

• Đặc điểm:

  • Accessible từ bên ngoài component.

  • Quản lý bởi component cha.

  • Đọc từ props của component con.

  • Không kích hoạt re-render component con khi thay đổi.

Ví dụ:

JavaScript

const App = () => {
  return (
    <div>
      <Counter title="Counter 1" />
      <Counter title="Counter 2" />
    </div>
  );
};

const Counter = ({ title }) => {
  return (
    <div>
      <h2>{title}</h2>
      {/* ... */}
    </div>
  );
};

Hãy thận trọng khi sử dụng các đoạn mã.content_copy

Sự khác biệt:

Đặc điểm	State	Prop
Định nghĩa	Dữ liệu độc quyền của component	Dữ liệu truyền từ component cha
Tính chất	Thay đổi theo thời gian	Không thay đổi
Ảnh hưởng	Ảnh hưởng UI trực tiếp	Không ảnh hưởng UI trực tiếp
Quản lý	Component sở hữu	Component cha
Truy cập	Từ bên trong component	Từ bên ngoài component
Cập nhật	setState	-
Kích hoạt re-render	Khi thay đổi	Khi component cha re-render

drive_spreadsheetXuất sang Trang tính

Mối quan hệ:

• State và Prop bổ sung cho nhau trong việc quản lý dữ liệu trong React.

• State dùng để quản lý dữ liệu động và riêng tư của component.

• Prop dùng để truyền dữ liệu tĩnh từ component cha sang component con.

• Việc sử dụng state và prop hợp lý giúp viết code React dễ hiểu, dễ bảo trì và tái sử dụng.

Lưu ý:

• Nên sử dụng state cho dữ liệu cần thay đổi và ảnh hưởng UI.

• Nên sử dụng prop cho dữ liệu không thay đổi và cần chia sẻ giữa các component.

• Tránh lạm dụng state, sử dụng prop để truyền dữ liệu khi có thể.

Kết luận:

State và Prop là hai công cụ quan trọng trong React giúp quản lý và truyền tải dữ liệu hiệu quả. Hiểu rõ sự khác biệt và mối quan hệ giữa state và prop là nền tảng để viết code React tốt hơn.