合成事件中e.persist()方法

合成事件

合成事件对象实例为SyntheticEvent，他是浏览器原生事件的跨浏览器包装器，能够兼容所有浏览器，并且包含浏览器原生事件相同的接口。合成事件与浏览器的原生事件不同，也不会直接映射到原生事件

react16及之前版本使用事件池的概念，即SyntheticEvent的事件是放在事件池中进行处理的，也就是每个事件可以被复用，即当事件被调用后，他的属性会被置空，如果需要在事件处理函数执行过后（setTimeout之类的延时），获取属性值，那就要用到event.persist()方法

从 v17 开始，e.persist() 将不再生效，因为 SyntheticEvent 不再放入事件池

e.persist()

如果react事件想要异步访问事件属性（如在setTimeout内），那么在处理事件时调用该方法

• 不使用persist方法

const Test = () => {
  const [value, setValue] = useState('');

  const onChange = (e: any) => {
    // e.persist();
    setTimeout(() => {
      console.log('---------', e?.target);
      setValue(e?.target?.value);
    }, 1000);
  };

  return <Input onChange={onChange} value={value} />;
};

image.png

• 使用persist方法

const Test = () => {
  const [value, setValue] = useState('');

  const onChange = (e: any) => {
    e.persist();
    setTimeout(() => {
      console.log('---------', e?.target);
      setValue(e?.target?.value);
    }, 1000);
  };

  return <Input onChange={onChange} value={value} />;
};

image.png

参考文献：

react合成事件：https://zh-hans.reactjs.org/docs/events.html
事件池：https://zh-hans.reactjs.org/docs/legacy-event-pooling.html
·