setState的一个Synthetic Event Warning

silencezwm 发布于2019-08-21 17:48 / 2185人阅读

摘要：不保证的改变会立刻发生。所以，在我的这段代码中显然是异步的，因为我们不能在的更新函数中访问变量。既然找到了原因，解决方法就有了不要在的更新函数中访问变量或者如果不需要的话

今天使用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详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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