React.JS 状态

React.JS把组件看成是一个状态机(state machines)。通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致。

React.JS里,只需要更新组件的state,然后根据新的state重新渲染用户界面。

实例:

class Clock extends React.Component {
  constructor(props) {
    super(props);    this.state = {date: new Date()};
}
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    ); 
  }
}
 ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

运行案例

说明:创建一个名称扩展为 React.Component 的 ES6 类,在 render() 方法中使用 this.state 来修改当前的时间。添加一个类构造函数来初始化状态 this.state,类组件应始终使用 props 调用基础构造函数。


本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信