成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

理解setState()，異步還是同步？

hedge_hog / 454人閱讀

摘要：假設(shè)現(xiàn)在最后仍然會(huì)是，不是所以不能依賴來計(jì)算未來狀態(tài)。原理可以參考這篇很簡潔易懂的文章其他情景，如上面的情景，或這樣用綁定函數(shù)脫離了的控制，不知道如何進(jìn)行，就會(huì)是同步的。

state

state的存在是為了動(dòng)態(tài)改變組件，比如根據(jù)不同的用戶操作和網(wǎng)絡(luò)請(qǐng)求，來重新渲染組件。

setState()是React給我們的一個(gè)API，用來改變或定義state。

setState()的批量操作（batching）

在一個(gè)事件handler函數(shù)中，不管setState()被調(diào)用多少次，他們也會(huì)在函數(shù)執(zhí)行結(jié)束以后，被歸結(jié)為一次重新渲染, 可以優(yōu)化性能, 這個(gè)等到最后一起執(zhí)行的行為被稱為batching。

所以在函數(shù)內(nèi)的setState()是有序的，如果要更改同一個(gè)state key，最后被調(diào)用的總會(huì)覆蓋之前的。

因?yàn)閎atching的存在，所以這樣的代碼會(huì)和期待有出入。

//假設(shè)現(xiàn)在this.state.value = 0;

function eventHandler(){
    this.setState({value:this.state.value + 1});
    this.setState({value:this.state.value + 1});
    this.setState({value:this.state.value + 1});
}

//最后this.state.value仍然會(huì)是1，不是3;

所以不能依賴this.state來計(jì)算未來狀態(tài)。如果想實(shí)現(xiàn)這樣的效果，應(yīng)該傳一個(gè)函數(shù)給setState。這個(gè)函數(shù)有兩個(gè)參數(shù)，第一個(gè)為previous state，第二個(gè)為props。這里的例子和props無關(guān)，只需要第一個(gè)參數(shù)，所以要達(dá)到效果，代碼是這樣

// 假設(shè) this.state = { value: 0 };

function eventHandler(){
    this.setState((state) => ({ value: state.value + 1}));
    this.setState((state) => ({ value: state.value + 1}));
    this.setState((state) => ({ value: state.value + 1}));
}

//現(xiàn)在this.state.value === 3;

到這里我們得到結(jié)論，setState是異步執(zhí)行的。

如React文檔所說：

"setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains."

所以當(dāng)更新state，然后想打印state的時(shí)候，應(yīng)該使用回調(diào)。

this.setState({key: val},()=>console.log(this.state));
所以setState總是異步的，嗎？

當(dāng)setState()不在事件Handler函數(shù)中，如在使用ajax的時(shí)候，這種batching的異步表現(xiàn)又不會(huì)發(fā)生。

promise.then(() => {
  // 不在事件函數(shù)中，所以setState立刻執(zhí)行
  this.setState({a: true}); // 重新渲染 {a: true, b: false }
  this.setState({b: true}); // 重新渲染 {a: true, b: true }
});
同步異步要分情況來看： 1. React事件函數(shù)使用，像這樣用最常用的形式綁定函數(shù) 
constructor(props){
    ...
    this.onClick = this.onClick.bind(this);
}

onClick(){
    this.setState({key:val});
}

render(){
    return(
        

            
        

}

這里batching發(fā)生，異步表現(xiàn)，是因?yàn)檫@種常規(guī)情景下React “知道”什么時(shí)候退出該事件，什么時(shí)候進(jìn)行Batch Update。原理可以參考這篇很簡潔易懂的文章

2.其他情景，如上面的ajax情景，或這樣用addEventListener綁定函數(shù) 
componentDidMount(){
    document.querySelector("#btn").addEventListener("click,this.onClick);
}
    
    render(){
        return(
            

                
            

    }
}

脫離了React的控制，React不知道如何進(jìn)行Batch Update，setState()就會(huì)是同步的。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101984.html

相關(guān)文章

  • setState異步、同步與進(jìn)階

    摘要：根本原因在于，并不是真正意義上的異步操作，它只是模擬了異步的行為。而合成事件和生命周期函數(shù)中，是受控制的，其會(huì)將設(shè)置為，從而走的是類似異步的那一套。總結(jié)此處總結(jié)是直接引用了只在合成事件和鉤子函數(shù)中是異步的，在原生事件和中都是同步的。 如何使用setState 在 React 日常的使用中，一個(gè)很重要的點(diǎn)就是，不要直接去修改 state。例如：this.state.count = 1是無...

    widuu 評(píng)論0 收藏0

  • React 中 setState() 為什么是異步的？

    摘要：正文在回復(fù)中表示為什么是異步的，這并沒有一個(gè)明顯的答案，每種方案都有它的權(quán)衡。需要注意的是，異步更新是有可能實(shí)現(xiàn)這種設(shè)想的前提。 前言 不知道大家有沒有過這個(gè)疑問，React 中 setState() 為什么是異步的？我一度認(rèn)為 setState() 是同步的，知道它是異步的之后很是困惑，甚至期待 React 能出一個(gè) setStateSync() 之類的 API。同樣有此疑問的還有 ...

    anonymoussf 評(píng)論0 收藏0

  • React專題：react，redux以及react-redux常見一些面試題

    摘要：我們可以為元素添加屬性然后在回調(diào)函數(shù)中接受該元素在樹中的句柄，該值會(huì)作為回調(diào)函數(shù)的第一個(gè)參數(shù)返回。使用最常見的用法就是傳入一個(gè)對(duì)象。單向數(shù)據(jù)流，比較有序，有便于管理，它隨著視圖庫的開發(fā)而被概念化。 面試中問框架，經(jīng)常會(huì)問到一些原理性的東西，明明一直在用，也知道怎么用， 但面試時(shí)卻答不上來，也是挺尷尬的，就干脆把react相關(guān)的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

    darcrand 評(píng)論0 收藏0

  • React-setState雜記

    摘要：簡單的舉下例子如等生命周期以及的事件即為異步更新，這里不顯示具體代碼。因?yàn)橹挥挟?dāng)父組件后才傳給子組件，那么如果要變成同步的，就需要放棄。 前言 在看React的官方文檔的時(shí)候， 發(fā)現(xiàn)了這么一句話，State Updates May Be Asynchronous，于是查詢了一波資料， 最后歸納成以下3個(gè)問題 setState為什么要異步更新，它是怎么做的？ setState什么時(shí)候會(huì)...

    yuxue 評(píng)論0 收藏0

  • 【React進(jìn)階系列】 setState機(jī)制

    摘要：的批量更新優(yōu)化也是建立在異步合成事件鉤子函數(shù)之上的，在原生事件和中不會(huì)批量更新，在異步中如果對(duì)同一個(gè)值進(jìn)行多次，的批量更新策略會(huì)對(duì)其進(jìn)行覆蓋，取最后一次的執(zhí)行，如果是同時(shí)多個(gè)不同的值，在更新時(shí)會(huì)對(duì)其進(jìn)行合并批量更新。 api解析: setState(updater, [callback]) updater: 更新數(shù)據(jù) FUNCTION/OBJECT callback: 更新成功后的回...

    Yuqi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<