摘要:原生事件中的在按鈕原生事件中定義的和定時器效果一樣,每次都會引起新的事件是合并的成一次的。原生事件事件生成計時器點擊按鈕,先執行原生事件,再執行事件,但是原生事件會觸發兩次,事件觸發一次。
常規情況
在同一個方法中多次setState是會被合并的,并且對相同屬性的設置只保留最后一次的設置;
import React from "react"; export class Test extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentWillMount() { let me = this; me.setState({ count: me.state.count + 2 }); me.setState({ count: me.state.count + 1 }); } componentDidMount() { let me = this; me.setState({ count: me.state.count + 2 }); me.setState({ count: me.state.count + 1 }); } onClick() { let me = this; me.setState({ count: me.state.count + 1 }); me.setState({ count: me.state.count + 1 }); } render() { console.log(this.state.count); console.log("1111111111111111111111111111111111111111111"); return () } }{this.state.count}
定時器中的setState上述執行過程如下:
willmount中的setState會合并成一次執行,count只會保留最后一次的設置,前面的放棄,所以willmount之后是1,并不是3;并且在render之前執行,不會引起新的render
render之后執行didMount,setState做同樣的處理,這是count是2,并且引起新的render
點擊按鈕,setState做同樣處理,count是3,引起新的render
定時器中的setState,每次都會引起新的render,即使是同一個定時器中的多次setState
代碼更改成如下:
componentWillMount() { let me = this; setTimeout(() => { me.setState({ count: me.state.count + 1 }); me.setState({ count: me.state.count + 1 }); }, 0); } componentDidMount() { let me = this; setTimeout(() => { me.setState({ count: me.state.count + 1 }); me.setState({ count: me.state.count + 1 }); }, 0); } onClickTime() { let me = this; setTimeout(() => { me.setState({ count: me.state.count + 1 }); me.setState({ count: me.state.count + 1 }); }, 0); }
上述代碼,每次setState都會引發新的render,需要深入了解的可以查查setState的原理,簡單理解是定時器中的setState沒走react的事物機制,執行時批量更新沒被設置true,所以每次都直接render了。原生事件中的setState
在按鈕原生事件中定義的setState,和定時器效果一樣,每次setState都會引起新的render
react事件是合并的成一次render的。
componentDidMount() { this.button.addEventListener("click", this.onClick.bind(this, "原生事件"), false); } onClick(info) { console.log(info); this.setState({ count: ++count }); this.setState({ count: ++count }); } render() { console.log(this.state.count); returnthis.button = input} onClick={this.onClick.bind(this, "React事件")} value="生成計時器" />}Count:{this.state.count}
點擊按鈕,先執行原生事件,再執行react事件,但是原生事件會觸發兩次render,react事件觸發一次。總結
上述是我對setState的理解,拋磚引玉,希望幫助大家有方向的去了解react原理機制。剛開始接觸,很多同學想深入了解,但可能不知道從何入手,這也是我遇到過的困擾,所以現在分享出來,希望能幫助大家少走彎路,更快的、更有準針對性的去研究學習React。
以下為補充內容
回調不會觸發react的批量更新機制其實在回調函數中,setState是不會觸發批量更新機制的,無論是promise,ajax,setTimeout回調等等,同時設置多次setState,每個setState都會多帶帶執行并render,因為上下文發生了變化。
下面是驗證code
onClickBtn = () => { // const promise = new Promise((resolve, reject) => { // this.setState({ count: this.state.count + 1 }); // console.log(this.state.count); // this.setState({ count: this.state.count + 1 }); // console.log(this.state.count); // resolve(); // }); // promise.then(() => { // this.setState({ count: this.state.count + 1 }); // console.log(this.state.count); // this.setState({ count: this.state.count + 1 }); // console.log(this.state.count); // }); fetch("/api/getlist") .then(response => { return response.json(); }) .then(data => { console.log(JSON.stringify(data)); this.setState({ count: this.state.count + 1 }); console.log(this.state.count); this.setState({ count: this.state.count + 1 }); console.log(this.state.count); }); };生命周期和事件中多次setState的區別
在寫demo時發現,雖然didMount中的多次setState會被合并,符合正常的規律,但是通過調試發現,在didMount中isBatchingUpdates始終是false,而事件調用觸發的setState,isBatchingUpdates則是true。
---------------------轉載請標明出處!--------------------文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94451.html
摘要:首先賣個關子,下面我們一起來復習下小學還是初中的一枚數學知識。一旦更改了,會觸發組件的重新渲染。為了頁面渲染性能的考慮,有助于在中進行比較并確定是否重新渲染。 概念引入 對于React來說, 沒有State就沒有頁面的渲染, 我們也將什么都看不到 咋一聽怎么那么唬人?不過的確是這樣,正如標題所言State是UI的靈魂。我們都知道React的核心思想之一是組件化,將頁面所展示的東西按一定...
摘要:因為是深入系列文章,本文不會仔細介紹每個生命周期方法的使用,而是會重點講解在使用組件生命周期時,經常遇到的疑問和錯誤使用方式。父組件發生更新導致的組件更新,生命周期方法的調用情況同上所述。 文:徐超,《React進階之路》作者授權發布,轉載請注明作者及出處 React 深入系列4:組件的生命周期 React 深入系列,深入講解了React中的重點概念、特性和模式等,旨在幫助大家加深...
摘要:出現紅幀表示頁面已經超負荷,會出現卡頓,響應緩慢等現象。因此當滑動周日歷時已經不會有紅幀發生了。我的目的是每一次遞歸會調用一次與但是這樣寫只會在遞歸結束時調用一次因此修改如下這樣優化之后,發現內存占用下降一些,但是紅幀仍然存在。 性能優化可以說是衡量一個前端程序員react使用水平的重要標準。 在學習react之初的時候,由于對react不夠了解,寫的項目雖然功能都實現了,但是性能優化...
閱讀 2102·2021-11-19 09:58
閱讀 1701·2021-11-15 11:36
閱讀 2867·2019-08-30 15:54
閱讀 3386·2019-08-29 15:07
閱讀 2759·2019-08-26 11:47
閱讀 2805·2019-08-26 10:11
閱讀 2496·2019-08-23 18:22
閱讀 2744·2019-08-23 17:58