反应状态

如何与组件状态进行交互

设置默认状态

在组件构造函数中,初始化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> }

免费下载我的反应手册


更多反应教程: