SyntheticEvent
React在原生的DOM事件上封装了一层,称为SyntheticEvent(合成事件)。所有事件都会冒泡到根节点上,然后进行后续处理。
事件池中装满了SyntheticEvent对象,需要时池中取出使用,用完后再放回池中,这就意味着 SyntheticEvent对象可以被缓存且反复使用。目的是提高性能,减少创建不必要的对象。
当调用事件回调函数之后,合成对象上的所有属性重置为null,但是合成事件对象依旧存在。
因此,写React事件回调函数的时候不能将 event 用于异步操作 —— 当异步操作真正执行的时候,SyntheticEvent对象有可能已经被重置了。
import React, { Component } from "react";
class TextInput extends Component {
state = {
counter: 0,
value: this.props.defaultValue,
}
// 由于 setState 是异步操作,event.target.value 在运行时可能已经被重置了
handleChange = event =>
this.setState(prevState => ({ value: event.target.value, counter: prevState.counter + 1 }));
render() {
return (
<span>Edited {this.state.editionCounter} times</span>
<input
type="text"
value={this.state.value}
onChange={this.handleChange} // WRONG!
/>
)
}
}
一般有两种解法:
event.persist()
持久化合成事件:将当前event挪出事件池,从而该event属性值可以一直存在而不会被重置。 SyntheticEvent
事件复用能力,不推荐import React, { Component } from "react";
class TextInput extends Component {
state = {
counter: 0,
value: this.props.defaultValue,
}
handleChange = event => {
const value = event.target.value; // value这个本地变量已经保存了目标值
this.setState(prevState => ({ value, editionCounter: prevState.counter + 1 }));
}
render() {
return (
<span>Edited {this.state.editionCounter} times</span>
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
)
}
}
如要想要阻止冒泡,不要直接调用原生e.stopPropagation()
方法,没用的。
利用合成事件上的nativeEvent
访问到原生事件,再调用nativeEvent.stopImmediatePropagation
方法。
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation
key
就一定好吗?(此知识点React和Vue通用)渲染列表时,大家都知道要加key
值,为什么呢?为了配合diff
算法做性能优化呀?
那么如果是纯文字改动呢?
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
</ul>
// 更新为
<ul>
<li id="1">1</li>
<li id="2">3</li>
<li id="3">4</li>
<li id="4">5</li>
</ul>
如果指定了key
,需要做移动,删除,新增,三种操作。但是,我们仅仅更新个textContent
,需要这么大动作吗?
那就不要指定key
好了,React(或者Vue)会复用原DOM节点,只做textContent
更新而已,性能明显更好。
当然,如果节点上绑定了事件,且事件和节点内容相关,那么请务必小心,为了不必要的Bug,还是建议加上key
。