Sự khác nhau giữa state và props trong React là gì?

Trong React, state và props là hai khái niệm cốt lõi giúp quản lý dữ liệu và tương tác trong các component. Dưới đây là sự khác biệt chính giữa state và props:

State

• Định nghĩa: state là một tập hợp các dữ liệu động mà component có thể sở hữu và quản lý. State có thể thay đổi theo thời gian, thường do sự kiện người dùng hoặc hệ thống.
• Quản lý: state được quản lý bên trong component và có thể được cập nhật bằng cách sử dụng this.setState() trong class components hoặc hooks như useState trong function components.
• Tính riêng tư: state là riêng tư và chỉ có thể truy cập hoặc thay đổi bởi chính component đó.
• Khi sử dụng: Sử dụng state khi dữ liệu cần thay đổi theo thời gian hoặc do tương tác người dùng.

Props

• Định nghĩa: props (viết tắt của "properties") là các tham số mà component nhận từ bên ngoài, thường là từ component cha. Props được sử dụng để truyền dữ liệu và sự kiện giữa các component.
• Tính bất biến: props là bất biến, tức là một khi đã được truyền vào component, bạn không thể thay đổi giá trị của chúng bên trong component đó.
• Tính tái sử dụng: props giúp tăng tính tái sử dụng của component bằng cách cho phép component nhận dữ liệu động từ cha, giúp tạo ra các component linh hoạt và tái sử dụng.
• Khi sử dụng: Sử dụng props khi bạn muốn truyền dữ liệu từ component cha xuống component con hoặc khi bạn muốn render component dựa trên dữ liệu đầu vào từ bên ngoài.

Ví dụ

class ParentComponent extends React.Component {
  state = {
    greeting: 'Hello'
  };

  render() {
    return <ChildComponent greeting={this.state.greeting} />;
  }
}

class ChildComponent extends React.Component {
  render() {
    // Props được sử dụng ở đây và không thể thay đổi
    return <h1>{this.props.greeting}, World!</h1>;
  }
}

Trong ví dụ trên, ParentComponent có state chứa dữ liệu chào hỏi, và nó truyền state này như một prop cho ChildComponent. ChildComponent sau đó sử dụng prop để render dữ liệu, nhưng không thể thay đổi nó.

Tóm lại, state và props đều quan trọng trong việc xây dựng các ứng dụng React, nhưng chúng phục vụ cho các mục đích khác nhau: state cho phép component quản lý dữ liệu động của chính mình, trong khi props cho phép truyền dữ liệu giữa các component, tạo ra một dòng dữ liệu một chiều từ component cha xuống component con.