• React中的 Synthetic 事件
    • 参考资料:

    React中的 Synthetic 事件

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

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

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

    1. function handleClick(event) {
    2.   setTimeout(function () {
    3.     console.log(event.target.name);
    4.   }, 1000);
    5. }

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

    1. function handleClick(event) {
    2.   let name = event.target.name;
    3.   setTimeout(function () {
    4.     console.log(name);
    5.   }, 1000);
    6. }

    参考资料:

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