/

在React中，Props和State有什麼區別？

在React中，Props和State有什麼區別？

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

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

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

1
<ChildComponent />

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

1
<ChildComponent color="green" />

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

1
2
3
4
5
6
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(props.color);
  }
}

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

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

1
2
3
4
5
6
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { colorName: props.color };
  }
}

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

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

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

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

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