React（五）State属性

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。

添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

（1）初始化state属性

class App extends Component {
  constructor(props){
    super(props);
    this.state = {userName: "yulingjia"}
  }
  render() {
      ...
  }
}

　　顺便说下ES6的class类的constructor方法

• constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
• 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

（2）修改state属性

this.setState({userName:'Somnusy'})

（3）读取state属性

<p>{this.state.userName}</p>

注：state的作用域只属于当前的类，不会造成其他模块污染