setState的一個Synthetic Event Warning

silencezwm 發布于2019-08-21 17:48 / 2186人閱讀

摘要：不保證的改變會立刻發生。所以，在我的這段代碼中顯然是異步的，因為我們不能在的更新函數中訪問變量。既然找到了原因，解決方法就有了不要在的更新函數中訪問變量或者如果不需要的話

今天使用React時遇到一個警告：

Warning: This synthetic event is reused for performance reasons. If you"re seeing this, you"re accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-poo... for more information.

查看文檔解釋：

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

SyntheticEvent 對象是通過合并得到的。這意味著在事件回調被調用后，SyntheticEvent 對象將被重用并且所有屬性都將被取消。這是出于性能原因。因此，您無法以異步方式訪問該事件。

意思就是說我訪問event.target時處于異步操作中。我的代碼是：

handleTitleChange: React.ChangeEventHandler = (event) => {
    this.setState((prevState) => ({
        collection: {
            title: event.target.value,
            content: prevState.content
        }
    }));
}

看了很多遍沒發現哪里有異步操作，沒辦法只好加event.persist()先解決掉警告：

handleTitleChange: React.ChangeEventHandler = (event) => {
    event.persist();
    this.setState((prevState) => ({
        collection: {
            title: event.target.value,
            content: prevState.content
        }
    }));
}

但是，我突然回想起setState并不保證是同步的：

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.
setState() does not always immediately update the component. It may batch or defer the update until later.

把setState當作是請求更新組件，而不是立即更新組件。為了性能，React會延遲更新，會把多個組件的更新放在一次操作里。React不保證state的改變會立刻發生。
setState并不總是立即更新組件。它可能會推后至批量更新。

所以，在我的這段代碼中顯然setState是異步的，因為Event Polling我們不能在setState的更新函數中訪問event變量。既然找到了原因，解決方法就有了：

不要在setState的更新函數中訪問event變量:

handleTitleChange: React.ChangeEventHandler = (event) => {
    const val = event.target.value;
    this.setState((prevState) => ({
        collection: {
            title: val,
            content: prevState.content
        }
    }));
}

或者如果不需要prevState的話：

handleTitleChange: React.ChangeEventHandler = (event) => {
    this.setState({
        collection: {
            title: event.target.value,
            content: this.state.content
        }
    });
}

云服務器 GPU云服務器 java的event Synthetic setState js的event詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90038.html

【譯】Handling Events

摘要：如果你使用實驗性屬性初始化語法，你能用這方法來正確綁定回調函數的綁定這語法在中默認支持。然而，如果這回調函數是作為一個傳遞到更下一級的組件中的時候，些組件可能會做一個額外的重新渲染。下面是react官方文檔的個人翻譯，如有翻譯錯誤，請多多指出原文地址：https://facebook.github.io/re... Handling events with React element...

sugarmo 2019-08-20 14:47 評論0 收藏0
React-事件機制雜記

摘要：前提最近通過閱讀官方文檔的事件模塊，有了一些思考和收獲，在這里記錄一下調用方法時需要手動綁定先從一段官方代碼看起代碼中的注釋提到了一句話的綁定是必須的，其實這一塊是比較容易理解的，因為這并不是的一個特殊點，而是這門語言的特性。前提最近通過閱讀React官方文檔的事件模塊，有了一些思考和收獲，在這里記錄一下~ 調用方法時需要手動綁定this 先從一段官方代碼看起： showImg(...

zhangyucha0 2019-08-23 15:09 評論0 收藏0
React系列 --- Jsx, 合成事件與Refs(二)

摘要：系列系列簡單模擬語法一系列合成事件與二系列算法實現分析三系列從到再到四系列與部分源碼解析五系列從使用了解的各種使用方案六的誕生他是的一種擴展語法。這個函數接受組件的實例或元素作為參數，以存儲它們并使它們能被其他地方訪問。 React系列 React系列 --- 簡單模擬語法(一)React系列 --- Jsx, 合成事件與Refs(二)React系列 --- virtualdom di...

LiuZh 2019-08-26 10:37 評論0 收藏0
理解Javascript的Proxy

摘要：關于在計算機領域是一個很普遍的概念，中文通常翻譯為代理，代理一般用于描述某人或某事代表他人行事。常見的概念有代理服務器反向代理代理模式等。所以至少可以起到兩方面的作用進行訪問控制和增加功能。理解了上面兩個問題，學習的就簡單多了。關于Proxy Proxy在計算機領域是一個很普遍的概念，中文通常翻譯為代理，代理一般用于描述某人或某事代表他人行事。常見的概念有Proxy Server（代...

adie 2019-08-23 11:41 評論0 收藏0
react-router v4.x 源碼拾遺1

摘要：還是先來一段官方的基礎使用案例，熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件，作為的頂層組件來獲取的和設置回調函數來更新。 react-router是react官方推薦并參與維護的一個路由庫，支持瀏覽器端、app端、服務端等常見場景下的路由切換功能，react-router本身不具備切換和跳轉路由的功能，這些功能全部由react-router依賴的history庫完成，his...

itvincent 2019-08-26 13:51 評論0 收藏0