反應狀態

如何與組件狀態進行交互

設置默認狀態

在組件構造函數中，初始化this.state。例如，BlogPostExcerpt組件可能有一個clicked狀態：

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
}

訪問狀態

這點擊了可以通過引用訪問狀態this.state.clicked：

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
<p>Clicked: {this.state.clicked}</p>
</div>
)
}
}

改變狀態

絕對不能通過使用來改變狀態

this.state.clicked = true

相反，您應該始終使用setState()相反，向它傳遞一個對象：

this.setState({ clicked: true })

對象可以包含狀態的子集或超集。只有您傳遞的屬性會發生突變，省略的屬性將保留其當前狀態。

為什麼你應該總是使用`setState()`

原因是使用此方法，React知道狀態已更改。然後，它將開始一系列事件，這些事件將導致重新渲染組件以及任何其他事件。DOM更新。

單向數據流

狀態始終由一個組件擁有。受此狀態影響的任何數據只能影響其下的組件：其子組件。

更改組件上的狀態永遠不會影響其父代，其兄弟姐妹或應用程序中的任何其他組件：僅影響其子代。

這就是狀態通常在“組件”樹中上移的原因。

在樹上向上移動狀態

由於單向數據流規則，如果兩個組件需要共享狀態，則需要將狀態上移到一個共同的祖先。

很多時候，最親近的祖先是管理國家的最佳場所，但這不是強制性規則。

狀態通過props傳遞給需要該值的組件：

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }
render() {
return (
<div>
<Display currency={this.state.currency} />
<CurrencySwitcher currency={this.state.currency} />
</div>
)
}
}

子組件可以通過向下傳遞mutating函數作為prop來改變狀態：

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }
handleChangeCurrency = event => {
this.setState({ currency: this.state.currency === ‘€’ ? ‘$’ : ‘€’ })
}
render() {
return (
<div>
<Display currency={this.state.currency} />
<CurrencySwitcher
currency={this.state.currency}
handleChangeCurrency={this.handleChangeCurrency}
/>
</div>
)
}
}
const CurrencySwitcher = props => {
return (
<button onClick={props.handleChangeCurrency}>
Current currency is {props.currency}. Change it!
</button>
)
}
const Display = props => {
return <p>Current currency is {props.currency}.</p>
}

免費下載我的反應手冊