前端

这篇笔记记录了React与refs相关的一些基础知识

一、本堂课重点内容

  • refs相关知识点

二、详细知识点介绍

1、refs定义

  • 组件内的标签可以定义ref属性来标识自己
  • refs 能够越过虚拟DOM去直接操控真实DOM
  • refs 使用的几种场景：
    • 焦点的管理、文本的选择、媒体的播放；
    • 强制触发动画；
    • 继承三方 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方法的区别。

五、引用参考