react状态管理_React状态

react状态管理

设置默认状态 (Setting the default state)

In the Component constructor, initialize this.state. For example the BlogPostExcerpt component might have a clicked state:

在Component构造函数中，初始化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>
    )
  }
}

访问状态 (Accessing the state)

The clicked state can be accessed by referencing this.state.clicked:

可以通过引用this.state.clicked来访问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>
    )
  }
}

改变状态 (Mutating the state)

A state should never be mutated by using

绝对不能通过使用来改变状态

this.state.clicked = true

Instead, you should always use setState() instead, passing it an object:

相反，您应该始终使用setState() ，并向其传递一个对象：

this.setState({ clicked: true })

The object can contain a subset, or a superset, of the state. Only the properties you pass will be mutated, the ones omitted will be left in their current state.

对象可以包含状态的子集或超集。 只有您传递的属性会发生突变，省略的属性将保留其当前状态。

为什么应该始终使用setState() (Why you should always use setState())

The reason is that using this method, React knows that the state has changed. It will then start the series of events that will lead to the Component being re-rendered, along with any DOM update.

原因是使用此方法，React知道状态已更改。 然后它将启动一系列事件，这些事件将导致重新渲染组件以及任何DOM更新。

单向数据流 (Unidirectional Data Flow)

A state is always owned by one Component. Any data that’s affected by this state can only affect Components below it: its children.

状态始终由一个组件拥有。 受此状态影响的任何数据只能影响其下的组件：其子组件。

Changing the state on a Component will never affect its parent, or its siblings, or any other Component in the application: just its children.

更改组件上的状态永远不会影响其父代，其兄弟姐妹或应用程序中的任何其他组件：仅影响其子代。

This is the reason the state is often moved up in the Component tree.

这就是状态通常在组件树中上移的原因。

在树上向上移动状态 (Moving the State Up in the Tree)

Because of the Unidirectional Data Flow rule, if two components need to share state, the state needs to be moved up to a common ancestor.

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

Many times the closest ancestor is the best place to manage the state, but it’s not a mandatory rule.

很多时候，最亲近的祖先是管理国家的最佳场所，但这不是强制性规则。

The state is passed down to the components that need that value via props:

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

The state can be mutated by a child component by passing a mutating function down as a prop:

子组件可以通过将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>
}

翻译自: https://flaviocopes.com/react-state/

react状态管理