道具與狀態在React中

React中的state和props有什麼區別?

在React組件中,道具是由其父組件傳遞給它的變量。狀態另一方面,變量仍然是變量,但是直接由組件初始化和管理。

狀態可以通過props初始化。

例如,父組件可以通過調用來包括子組件

<ChildComponent />

父母可以使用以下語法傳遞道具:

<ChildComponent color=green />

在ChildComponent構造函數中,我們可以訪問prop:

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

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

道具可用於基於構造函數中的道具值設置內部狀態,如下所示:

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

當然,組件也可以在不查看道具的情況下初始化狀態。

在這種情況下,沒有任何用處,但可以想像根據prop值做一些不同的事情,最好設置一個狀態值。

子組件中的道具永遠都不應更改,因此,如果發生某些事情改變了某些變量,則該變量應屬於組件狀態。

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

您的大多數組件只會根據收到的道具顯示一些信息,並留下來無狀態的

免費下載我的反應手冊


更多反應教程: