在使用React 16.12.0 版本的时候写了如下一个函数
const judgeUserExist = () => {
// 在搜索的过程中需要去判断用户是否存在, 需要做节流操作
let pTime = Date.now();
let timer:any = null;
return function (e: any) {
clearTimeout(timer);
timer = null;
let cTime = Date.now();
if ((cTime - pTime) > 500) {
setSearchValue(e.target.value);
pTime = cTime;
} else {
timer = setTimeout(() => {
setSearchValue(e.target.value); //此处报错 ， e.target 为 null
}, 500)
}
}
}
使用后直接在浏览器中报错，
Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property
targeton 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.
此时点击链接跳到 React 官网事件池中，可以看到以下有关事件池的信息，明白了，原来是 没有加 e.persist(); 加了之后，果然不报错了，哈哈哈
事件池
注意
此文章仅适用于 React 16 及更早版本、React Native。
Web 端的 React 17 不使用事件池。
查看更多关于 React 17 中的相关改动。
SyntheticEvent 对象会被放入池中统一管理。这意味着 SyntheticEvent 对象可以被复用，当所有事件处理函数被调用之后，其所有属性都会被置空。例如，以下代码是无效的：
function handleChange(e) {
// This won't work because the event object gets reused.
setTimeout(() => {
console.log(e.target.value); // Too late!
}, 100);
}
如果你需要在事件处理函数运行之后获取事件对象的属性，你需要调用 e.persist()：
function handleChange(e) {
// Prevents React from resetting its properties:
e.persist();
setTimeout(() => {
console.log(e.target.value); // Works
}, 100);
}
