React State学习

标签：

Last time we looked at how to use properties, to affect the initial rendering of components. Today we’ll take a look at how to use state, how it differs from properties and some things you should consider when using state.

上一次我们讨论了如何使用properties来影响一个将要被渲染的组件，今天我们来看一看怎么使用state，它和properties的区别以及什么场景下可以使用state。

Like properties, state affects how a component behaves and renders. Unlike properties, there’s no way to define what state should be applied to components via JSX…

像properties一样，state影响了一个组件如何表现以及渲染，但和properties不同的是，他没有办法来通过JSX为定义一个组件的行为。

Properties vs. State

Properties are defined when components are created, whether by JSX or by pure JavaScript. State, on the other hand, is only seen on the inside of component definitions. This is the first, and most important difference between the two.

当一个组件被创建出来的时候，properties也被定义好了不管你是通过pure js还是JSX,而state只能在一个组件的内部可见，这是第一点，但最重要的区别在于第二点。

When you think of properties, you should be thinking of component initialisation. When you think of state, you should think of an internal data-set which affects the rendering of components.

当你思考一个properties的时候，你应该思考的是一个组件的初始化，当你思考一个state的时候，你应该思考的是影响渲染一个组件的数据。

There are ways to validate the presence and type of properties, but there is no such mechanism for state. You, as the developer of a component, are the only person who should know what state your component needs, and the correct data types which should be accepted/provided.

由开发人员来决定什么state可以被一个组件接受或使用。

State should be considered private data.

state应该被看作是私有数据。

Setting Initial State

Before we can use state, we need to declare a default set of values for the initial state. This is done by defining a method called getInitialState() and returning an object:

在我们能使用state之前，我们需要通过初始化的state来声明一些默认的值，这个是通过一个叫getInitialState的函数或方法来定义的。

/**
 * @jsx React.DOM
 */
  
var InterfaceComponent = React.createClass({
  getInitialState : function() {
    return {
      name : "chris",
      job  : "developer"
    };
  },
  render : function() {
    return <div>
      My name is {this.state.name}
      and I am a {this.state.job}.
    </div>;
  }
});

React.renderComponent(
  <InterfaceComponent />,
  document.body
);

This method tells the component which values should be available from the first render cycle, until the state values are changed. You should never try to use state values without first declaring them in this manner.

这个方法告诉组件什么样值可以访问在第一次的渲染生命周期的时候，直到state发生了改变。

Setting State

Setting state should only be done from inside the component. As mentioned, state should be treated as private data, but there are times when you may need to update it. This is how that is done:

/**
 * @jsx React.DOM
 */
  
var InterfaceComponent = React.createClass({
  getInitialState : function() {
    return {
      name : "chris"
    };
  },
  handleClick : function() {
    this.setState({
      name : "bob"
    });
  },
  render : function() {
    return <div onClick={this.handleClick}>
      hello {this.state.name}
    </div>;
  }
});

React.renderComponent(
  <InterfaceComponent />,
  document.body
);

You cannot set new state values until the component has been mounted. This happens when it’s passed (whether directly or by nesting it) to theReact.renderComponent() method. Then again, why would you need to?

Setting state in this way is only really needed when your component’s rendering and behaviour depends on outside factors. We’ll look at examples of that later on in the series.

Replacing State

It’s also possible to replace values in the state by using the replaceState()method. Let’s look at an example of this:

/**
 * @jsx React.DOM
 */
  
var InterfaceComponent = React.createClass({
  getInitialState : function() {
    return {
      first : "chris",
      last  : "pitt"
    };
  },
  handleClick : function() {
    this.replaceState({
      first : "bob"
    });
  },
  render : function() {
    return <div onClick={this.handleClick}>
      hello { this.state.first + " " + this.state.last }
    </div>;
  }
});

The replaceState() method is for when you want to clear out the values already in state, and add new ones.

replaceState()方法是在你想清除所有state中的值并且想添加一个的时候使用。

Avoiding State

The use of state should be as limited as it can get. When you use state, you run the risk of introducing a number of (sometimes subtle) errors in the behaviour and rendering of your components.

If you decide to use properties to define your initial state; your properties might change, leaving your initial state calculations based on stale data. You also introduce tight coupling between the properties that need to be defined, and the internal state of the component.

A general rule is not to use state for static components. If you component does not need to change, based on external factors, then do not use state. It’s better to calculate rendered values in the render() method.

Conclusion

State is a double-edged sword. On the one hand, it’s useful for sanely controlling internal data. On the other, it can lead to all sorts of mayhem, if not properly controlled. Use it wisely!

state是一把双刃剑，你最好把state当作私有数据来使用。

React State学习

标签：

原文地址：http://www.cnblogs.com/qiling-studio/p/5095530.html