SyntheticEvent objects are pooled

## 0x00

> 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**.

在 React 事件处理中，事件对象被包装在一个 `SyntheticEvent`（合成事件）对象中。这些对象是被池化的（pooled），这意味着在事件处理程序会把这些对象重用于其他事件以提高性能。随之而来的问题就是，异步访问事件对象的属性是不可能的，因为事件的属性由于重用而被重置（nullified）。

## 0x01

下面代码存在问题：

```
function handleClick(event) {
setTimeout(function () {
console.log(event.target.name);
}, 1000);
}
```

控制台会输出 `null`，因为每次事件回调完成后，`SyntheticEvent` 会被重置。

解决方式是把 `event` 赋值到一个内部变量上。

```
function handleClick(event) {
let name = event.target.name; // 内部变量保存 event.target.name 的值
setTimeout(function () {
console.log(name);
}, 1000);
}
```

## 0x02

facebook 官方的实例：

```
function onClick(event) {
console.log(event); // => nullified object.
console.log(event.type); // => "click"
const eventType = event.type; // => "click"

setTimeout(function() {
console.log(event.type); // => null
console.log(eventType); // => "click"
}, 0);

// Won't work. this.state.clickEvent will only contain null values.
this.setState({clickEvent: event});

// You can still export event properties.
this.setState({eventType: event.type});
}
```

如果想异步访问事件属性，可以在事件上调用 `event.persist()`，这会从池中移除合成事件并允许对事件的引用被保留。

## 参考资料

- [SyntheticEvent - React](https://facebook.github.io/react/docs/events.html)