setState的一個(gè)Synthetic Event Warning

silencezwm 發(fā)布于2019-08-21 17:48 / 2195人閱讀

摘要：不保證的改變會(huì)立刻發(fā)生。所以，在我的這段代碼中顯然是異步的，因?yàn)槲覀儾荒茉诘母潞瘮?shù)中訪問變量。既然找到了原因，解決方法就有了不要在的更新函數(shù)中訪問變量或者如果不需要的話

今天使用React時(shí)遇到一個(gè)警告：

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 對(duì)象是通過合并得到的。這意味著在事件回調(diào)被調(diào)用后，SyntheticEvent 對(duì)象將被重用并且所有屬性都將被取消。這是出于性能原因。因此，您無法以異步方式訪問該事件。

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

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

看了很多遍沒發(fā)現(xiàn)哪里有異步操作，沒辦法只好加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當(dāng)作是請(qǐng)求更新組件，而不是立即更新組件。為了性能，React會(huì)延遲更新，會(huì)把多個(gè)組件的更新放在一次操作里。React不保證state的改變會(huì)立刻發(fā)生。
setState并不總是立即更新組件。它可能會(huì)推后至批量更新。

所以，在我的這段代碼中顯然setState是異步的，因?yàn)镋vent Polling我們不能在setState的更新函數(shù)中訪問event變量。既然找到了原因，解決方法就有了：

不要在setState的更新函數(shù)中訪問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
        }
    });
}