这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
这篇笔记记录了React与refs相关的一些基础知识
一、本堂课重点内容
- refs相关知识点
二、详细知识点介绍
1、refs定义
- 组件内的标签可以定义
ref属性来标识自己 refs能够越过虚拟DOM去直接操控真实DOMrefs使用的几种场景：- 焦点的管理、文本的选择、媒体的播放；
- 强制触发动画；
- 继承三方 DOM 库；
2、refs基本使用
ref可以挂到任何组件上，可以挂到组件上也可以是dom元素上- 挂到组件（这里组件指的是有状态组件）上的ref表示对组件实例的引用，而挂载到dom元素上时表示具体的dom元素节点。
3、字符串形式的ref
class Vup extends React.Component {
showData = () => {
const {azi} = this.refs;
alert(azi.value);
}
render() {
return (
<div>
<input ref="azi" type="text" placeholder="510azi" />
<button onClick="{this.showData}">点我提示左侧的数据</button>
</div>
)
}
}
4、回调形式的ref
- 字符串形式的
ref存在效率问题，因此官方不推荐使用，并有可能在未来的某个版本删除 - 使用回调形式的
ref
showData = () => {
const {azi} = this;
alert(azi.value);
}
render() {
return (
<div>
<input ref={(currentNode) => {this.azi = currentNode}}>
<button onClick="{this.showData}">点我提示左侧的数据</button>
</div>
)
}
- 补充小知识点：JSX的注释需要使用
{/**/}（外层{}表示这是一段js代码，内层/**/表示js注释） - 如果
ref回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式（就是直接写在类里）可以避免上述问题，但是大多数情况下它是无关紧要的。一般写成内联形式即可
5、createRef形式的ref
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用”的
myRef = React.createRef();
showData = () => {
const {azi} = this.myRef.current;
alert(azi.value);
}
render() {
return (
<div>
<input ref={this.myRef}>
<button onClick="{this.showData}">点我提示左侧的数据</button>
</div>
)
}
6、React中的事件处理
- 通过onXxx属性指定事件处理函数(注意大小写)
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ———— 为了更好地兼容性
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ———— 为了高效
- 事件委托：利用事件流的冒泡特性，将本来要绑定到多个元素的事件函数，委托到了其祖先元素上
- 例如有多个
<li>标签的列表，需要给每个列表元素绑定事件，一个一个地绑消耗内存 - 这时我们可以将事件绑定到
<ul>节点上，执行函数时，通过event对象拿到必要的信息进行操作 - 通过
event.target我们能获得这次事件流的目标节点，然后从该节点对象中提取出需要的信息。
- 通过event.target得到发生事件的DOM元素对象 ———— 不要过度使用
ref- 如果发生事件的元素和要操作的元素是同一个，可以使用
event.target避免使用ref
- 如果发生事件的元素和要操作的元素是同一个，可以使用
三、实践练习例子
- 已在上一节中列出
四、课后个人总结
- 保持旺盛的好奇心，搞清楚三种
ref方法的区别。
