反應狀態

如何與組件狀態進行交互

設置默認狀態

在組件構造函數中,初始化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> }

免費下載我的反應手冊


更多反應教程: