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