Props so với State trong React

Sự khác biệt giữa trạng thái và đạo cụ trong React là gì?

Trong một thành phần React,đạo cụlà các biến được chuyển cho nó bởi thành phần cha của nó.Tiểu bangmặt khác vẫn là các biến, nhưng được khởi tạo và quản lý trực tiếp bởi thành phần.

Trạng thái có thể được khởi tạo bằng đạo cụ.

Ví dụ: một thành phần mẹ có thể bao gồm một thành phần con bằng cách gọi

<ChildComponent />

Cha mẹ có thể chuyển một hỗ trợ bằng cách sử dụng cú pháp sau:

<ChildComponent color=green />

Bên trong hàm tạo ChildComponent, chúng ta có thể truy cập vào phần mềm prop:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.color)
  }
}

và bất kỳ phương thức nào khác trong lớp này đều có thể tham chiếu đến các đạo cụ bằng cách sử dụngthis.props.

Props có thể được sử dụng để thiết lập trạng thái bên trong dựa trên giá trị prop trong constructor, như sau:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state.colorName = props.color
  }
}

Tất nhiên một thành phần cũng có thể khởi tạo trạng thái mà không cần nhìn vào đạo cụ.

Trong trường hợp này, không có gì hữu ích xảy ra, nhưng hãy tưởng tượng làm điều gì đó khác biệt dựa trên giá trị prop, có lẽ tốt nhất nên đặt giá trị trạng thái.

Đạo cụ không bao giờ được thay đổi trong một thành phần con, vì vậy nếu có điều gì đó xảy ra làm thay đổi một số biến, thì biến đó phải thuộc về trạng thái thành phần.

Props cũng được sử dụng để cho phép các thành phần con truy cập các phương thức được xác định trong thành phần mẹ. Đây là một cách tốt để quản lý tập trung trạng thái trong thành phần cha mẹ, và tránh việc trẻ em có nhu cầu có trạng thái riêng của chúng.

Hầu hết các thành phần của bạn sẽ chỉ hiển thị một số loại thông tin dựa trên các đạo cụ mà họ nhận được vàvô quốc tịch.

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: