本篇将介绍 React 组件的API，其中主要的几个API我们在第一篇的时候便已介绍过，这里可以做个温故知新。

本篇的代码你也可以在我的Github上获取到。

setState

参数： nextState（object）, [callback（function）]

设置 nextState 的某个键（属性）值（别忘了我们可以在 shouldComponentUpdate 方法中获取到 nextState 的值来跟当前的 this.state 进行对比），然后下一次 EventLoop 时 this.state 的对应键就会被更新为该设定的值。

通常我们如果希望在某个事件或某个回调中来重新渲染组件（触发UI更新内容），setState 是一个最常用的触发方法，因为我们把UI内容跟state状态直接（或者通过某些条件）绑定在了一起，一旦state发生改变并触动了绑定的逻辑，那么UI内容自然也会跟着变动：

var Component1 = React.createClass({ getInitialState: function() { return { isClick: !1 } }, componentDidUpdate: function(){ console.log(‘componentDidUpdate‘) }, clickCb: function() { this.setState({ isClick : !0 }, function(){ console.log(this.state.isClick) }) }, render: function() { return (<div onClick={this.clickCb}> isClick:{this.state.isClick ? ‘yes‘ : ‘nope‘} </div>) } }); var div = document.getElementById(‘a‘); React.render( <Component1 />, div );

如上我们通过 state.isClick 来决定div内要显示的内容，而我们点击div时会改变 state.isClick 的状态，从而触发绑定条件更改了div中的内容。

注意这段代码里我们使用了 componentDidUpdate 方法，如第二篇文章中所介绍的，它在组件重新渲染后会立即触发。我们点击 div 之后发现打印顺序是这样的：

即我们在 setState 方法中所定义的回调，，它是在组件重新渲染之后才执行的，而不是在我们变更了 nextState 的值之后就立即触发。

replaceState

参数： nextState（object）, [callback（function）]

类似于 setState()，但是删除之前所有已存在的 state 键（key），这些键都不在 nextState 中。

这句话怎么理解呢？我们看这个例子：

var Component1 = React.createClass({ getInitialState: function() { return { isClick: !1, abc: 1 //注意这里我们初始化了一个 state.abc } }, clickCb: function() { this.replaceState({ isClick : !0 }, function(){ console.log(this.state) }) }, render: function() { return (<div onClick={this.clickCb}> isClick:{this.state.isClick ? ‘yes‘ : ‘nope‘} </div>) } }); var div = document.getElementById(‘a‘); React.render( <Component1 />, div );

注意我们在 getInitialState 里还额外定义了一个 abc 的 state 属性，但在 replaceState 后再试着打印 this.state，会发现这个 state.abc 已经被删除了（如果换成 setState 则不会被删除）。

所以顾名思义，replaceState 就是一个彻底更换掉 state 的方法，寻常使用的时候需要小心使用，避免删掉一些重要的state属性。

forceUpdate

参数： [callback（function）]

顾名思义就是在任何调用的时刻强制渲染组件，例如即使 shouldComponentUpdate 返回了false：

var Component1 = React.createClass({ shouldComponentUpdate: function(nextProps, nextState){ console.log( this.state, nextState ); this.forceUpdate(function(){ console.log(‘强制渲染完成‘) }); //强制渲染,去掉这行则不会渲染 return false; }, componentDidUpdate: function(){ console.log(‘componentDidUpdate‘) }, getInitialState: function() { return { isClick: !1 } }, clickCb: function() { this.setState({ isClick : !this.state.isClick }) }, render: function() { return (<div onClick={this.clickCb}> isClick:{this.state.isClick ? ‘yes‘ : ‘nope‘} </div>) } }); var div = document.getElementById(‘a‘); var c1 = React.render( <Component1 />, div );

注意该方法的回调，也是在重新渲染之后才执行的。