React中的 Synthetic 事件

React在处理事件(event时), 事实上使用了SyntheticEvent对象包裹了原生的event对象.

这些React自己维护的对象是相互联系的, 意味着如果对于某一个事件, 我们给出了对应的响应函数(handler), 其他的SyntheticEvent对象也是可以重用的.这也是React提升性能的秘诀之一. 但是这也意味着, 如果想要通过异步的方式访问事件对象是不可能的, 因为出于reuse的原因, 事件对象里面的值都被重置了.

下面这段代码会在控制台里面打出null, 因为事件在SyntheticEvent池中被重用了.

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

为了避免这种情况, 你需要去保存你关心的事件的属性.

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

参考资料:

• React/Redux: Best practices & gotchas
• React events in depth w/ Kent C. Dodds, Ben Alpert, & Dan Abramov