React中为何打印event时currentTarget为null，却能访问其属性？

这是React合成事件的事件池机制在搞鬼！我来给你拆解清楚背后的逻辑：

• React为了性能优化，会把合成事件（比如你用到的ChangeEvent）放进一个「事件池」里复用。当你的事件处理函数执行完毕后，React会立刻重置这个事件对象的所有属性（包括currentTarget），把它放回池子里等着下次被调用时再使用。
• 当你直接写console.log(event.currentTarget.files)时，这段代码是同步执行的：在事件处理函数还没跑完的瞬间，你就读取了currentTarget的files属性，这时候事件对象还没被React重置，所以能正常拿到文件列表。
• 但console.log(event)就不一样了：浏览器的控制台是异步渲染对象内容的。当你把整个event对象丢进console.log，浏览器不会立刻把所有属性都打印出来，而是等你手动展开这个对象的时候才去读取它的属性。这时候你的事件处理函数早已经执行完了，React已经把event对象的属性重置，currentTarget自然就变成null了。

如果你想验证这个逻辑，可以试试把事件对象转换成普通对象再打印，比如：

console.log({...event}); // 展开成普通对象，同步捕获当前状态

这时候你就能看到未被重置的currentTarget值了。

内容的提问来源于stack exchange，提问作者me.at.coding