React Study Note6

React数据流

state

state是组件的内部状态，需要在视图里面用到的状态，才需要放到state里面去。如下，我们在类上创建一个state属性，在视图里面通过使用this.state.name去引用。而这里的state定义则代替的是getinitialstate方法。
import * as React from ‘react’

class Page extends React.Component {
  state = {
      name: '小明'
  }    

  render() {
    return (<div>
      {this}
    </div>)
  }
}

如何更新state呢，直接更改state其实可以可以的，不过这样子无法触发组件视图的更新机制。所以使用setState()api。值得注意的是setState是异步的，原因是react内部需要对setState做优化，不是state变了立刻去更新视图，而是拦截一部分state的改变，等到合适的时机再去更新视图。

import * as React from 'react'

class Page extends React.Component {
  state = {
      name: '小明'
  }    

  render() {
    setTimeout(() => this.setState({name: '小明儿子'})， 5000)

    return (<div>
      {this.state.name}
    </div>)
  }
}