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

 

posted @ 2020-04-10 09:03  大沙漠  阅读(1428)  评论(0编辑  收藏