在React組件中,Props是由父組件傳遞給子組件的變量。 而State則是由組件直接初始化和管理的變量。

State可以通過Props進行初始化。

例如,父組件可能通過調用以下代碼來包含子組件:

<ChildComponent />

父組件可以通過以下語法傳遞一個Props:

<ChildComponent color="green" />

在ChildComponent的構造函數中,我們可以訪問這個Props:

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

並且在此類中的任何其他方法都可以使用this.props引用該Props。

Props可以用來根據構造函數中的Props值設置內部State, 如下所示:

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

當然,組件也可以不參考Props來初始化State。

在這種情況下,沒有任何有用的內容,但是根據Props值做一些不同的操作,可能最好設置State值。

在子組件中,Props不應該被更改,因此如果有一個改變某個變量的操作,該變量應該屬於組件的State。

Props還用於允許子組件訪問父組件中定義的方法。這是一種將狀態集中管理在父組件中,避免子組件需要擁有自己狀態的良好方式。

大部分組件只會根據接收到的Props顯示一些信息,並且保持無狀態(stateless)