React 更新應用setState 和 forceUpdate的方法

React應用創建完成后，只有執行this.setState或this.forceUpdate方法才能更新應用，forceUpdate一般用得比較少，在有些比較另類的需求里比較適合吧。它們的使用方法如下:

• setState(partialState,callback)　　;更新組件的state,partialState是新的state部分對象，callback是更新完成后的回調函數
• forceUpdate(callback)　　　　　  ;強制更新整個應用，callback是更新完成后的回調函數

setState的參數1還可以是個方法，此時可以傳遞兩個參數，參數1是當前的state,參數是最新的props,舉個例子:

    <div id="root"></div>                   
    <script type="text/babel">
        class App extends React.Component{
            constructor(props){
                super(props)
            }
            state={num:0}

            clickHandle1 = ()=>{            
                this.setState({num:this.state.num+1})            //常規的寫法            
            }
            clickHandle2 = ()=>{
                this.setState(e=>({num:e.num+1}))                //可以是一個函數，返回一個對象
            }
            clickHandle3 = ()=>{
                this.setState(e=>e.num++);                       //還可以直接在函數內對state進行操作  
            }
            
            render(){
                return  <div>
                            <button onClick={this.clickHandle1}>測試1</button>
                            <button onClick={this.clickHandle2}>測試2</button>
                            <button onClick={this.clickHandle3}>測試3</button>
                            <p>{this.state.num}</p>
                        </div>
            }
        }  
        ReactDOM.render(<App/>,root)
    </script>

我們點擊測試1、測試2和測試3，都會使React應用的num加1。

 writer by:大沙漠 QQ:22969969