React|如何与你的组件的状态互动

如何与你的组件的状态互动

设置默认状态

在组件构造函数中，初始化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更新。

单向的数据流

一个状态总是被一个组件所拥有。任何受该状态影响的数据只能影响它下面的组件：它的孩子。

改变一个Component的状态永远不会影响到它的父辈，或它的兄弟姐妹，或应用程序中的任何其他Component：只是它的子代。

这就是状态经常在组件树中被向上移动的原因。

在树中向上移动状态

由于单向数据流规则，如果两个组件需要共享状态，状态需要被上移到一个共同的祖先。

很多时候，最接近的祖先是管理状态的最佳位置，但这不是一个强制性的规则。

状态通过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>
    )
  }
}

子组件可以通过将突变函数作为一个道具向下传递来突变状态。

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>
}