React组件相关API

在React中，我们通过组件来将页面结构组件化，形成一个个独立的模块，方便了程序的开发，在组件内部定义了一系列的API来供开发者调用，操作组件内的数据或是DOM结构。在React中主要有一下几种组件API：

1. 设置状态：setState
2. 替换状态：replaceState
3. 强制更新：forceUpdate

设置状态:setState

this.setState()方法来更新state。当this.setState()方法被调用的时候，React会重新调用render方法来重新渲染UI。setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

 componentWillMount(){
    var self = this;
    //创建定时器，同时给state的nowTime赋值
    setInterval(function(){
      let theTime = new Date();
      self.setState({
        nowTime:theTime.getFullYear()+"年"+(theTime.getMonth()+1)+"月"+theTime.getDate()+"日"+theTime.getHours()+":"+theTime.getMinutes()+":"+theTime.getSeconds()
      })
    },1000);
    
  }

在组件创建前构建一个定时器来显示当前的时间。在上面的说明中说到setState并不会立即对state执行修改，所以当setState执行完成以后再次使用this.state.nowTime的值应该还是之前的值。那么如果我想使用修改之后的值，就应该按照下面的方法，来给setState设置一个回调函数，该函数会在修改完成以后执行。

componentWillMount(){
    var self = this;
      self.setState({
       nowTime:5
      },function(){
         console.log(self.state.nowTime);
      })
    console.log(this.state.nowTime);
  }

替换状态：replaceState

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

强制更新：forceUpdate

constructor(){
    super();
    this.state  = {
      msg:"这是react的信息",
      nowTime:"",
      myName:"张三"
    }
  }
	
	handleClickOnTitle(ds){
		this.setState({
			myName:"李四"
		});
    console.log(this.state.myName);
    this.forceUpdate(function(){
       console.log(this.state.myName);
    });
	}

上面代码中执行handleClickOnTitle函数后先输出的应该是张三，执行forceUpdate之后，在其回调函数内输出结果为李四。也就是说forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。

forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()

一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。