正文

配图源自 Freepik

可能大家在 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-pooling for more information.

例子

// 其他无关紧要部分省略了
<input onChange={event => {
  console.log(event.type)  // change
  setTimeout(() => {
    console.log(event.type)  // null，并会出现以上警告
  })
}} />

Why

首先，我们的事件处理程序将传递 SyntheticEvent 实例，这是一个跨浏览器原生事件包装器。它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()，除了事件在所有浏览器中它们的工作方式都相同

每个 SyntheticEvent 对象都具有以下属性：

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

SyntheticEvent 对象是通过合并得到的。出于性能原因的考虑，SyntheticEvent 对象将被重用并且所有属性都将被取消，因此，无法以异步方式访问该事件。

所以，我们异步访问 event.type 时会得到 null 值，那么怎么破呢？

如果要以异步方式访问事件属性，应该对事件调用 event.persist()，这将从池中删除合成事件，并允许用户代码保留对事件的引用。

异步调用方式

// 其他无关紧要部分省略了
<input onChange={event => {
  console.log(event.type)  // change
  event.persist()
  setTimeout(() => {
    console.log(event.type)  // change，能正常访问了
  })
}} />

参考

更详细请查看 合成事件(SyntheticEvent)。