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的作用域只属于当前的类,不会造成其他模块污染

上一篇:内存地址 id


下一篇:由iPhone emoji问题牵出UTF-16编码,UTF-8编码查询