React&Vue 系列:ref 绑定 dom 节点

背景:作为使用三年 react.js 的搬运工,目前正在积极学习 vue.js 语法,而在学习的过程中,总是喜欢和 react.js 进行对比,这里也不是说谁好谁坏,而是怀有他有我也有,他没我还有的思想去学习,去总结。

  • React18
  • Vue3

ref 绑定 dom 节点,其实也就是对真实 dom 节点进行操作。但是呢,无论是 react 开发还是 vue 开发,通常情况下不需要、也不建议直接操作 DOM 原生,但是在某些特殊的场景下,是需要的。所以还是有必要了解一下这个小小的知识点。

其实,在我脑海中,我还能浮现一个画面:我第一份工作的时候,组长对我的代码(React 实现拖拽分组功能)质量检测时,发现我是直接操作节点,还是使用 document 的方式,当场就是一顿批斗。(说 xxx(难听的话),React 开化是以数据流控制状态 ,而不是要你直接操作状态的,dom 操作交给 React 底层操作,不需要你管),组长下去还专门给我搜了一篇关于React 数据流的博客,让我学习。从那以后,我的开发思维就开始变化了。 第一份工作,是招人白眼的工作,也是一份学习的工作。

回忆往事,时间过得真快呀,都快出来工作三年了。好了,进入正题。

熟悉 React,先写 React

React:ref 绑定 dom 节点

单个节点

在大部分的情况下都是不用操作 dom,但是操作 dom 的时候,大部分都是单节点的形式。

在 React 中提供了一个 hook : useRef。该 hook 既可以保存变量,又可以用来操作 dom。

ts 复制代码
import { useRef } from "react";
​
function App() {
  // 定义一个用来保存 dom 的 ref
  const divDomRef = useRef<HTMLDivElement>(null);
  const btn = () => {
    console.log(divDomRef.current);
  };
  return (
    <>
      {/* ref 绑定 */}
      <div ref={divDomRef}>我是单节点</div>
      <button onClick={btn}>获取dom节点</button>
    </>
  );
}

点击按钮,就能拿到真实的 dom 节点了。

注意要点:

  • ref 和 key 在 React 的 props 中,都是保留的 prop【RESERVED_PROPS】,有单独处理的逻辑。
  • ref 只能绑定原生节点,如果在组件上使用 ref,就需要使用 forwardRef 进行转化。

多个节点

就是拿到一个列表数据,进行渲染,需求就是对每条数据进行 ref 绑定,进行保存。

这是理想状态中的写法:

ts 复制代码
import { useRef, useState } from "react";
​
function App() {
  const [list] = useState([1, 2, 3, 4, 5]);
  const liDomRef = useRef<HTMLLIElement>(null);
  const btn = () => {
    console.log(liDomRef.current);
  };
  return (
    <>
      <ul>
        {list.map((v) => {
          return (
            <li ref={liDomRef} key={v}>
              {v}
            </li>
          );
        })}
      </ul>
      <button onClick={btn}>获取dom节点</button>
    </>
  );
}
​
export default App;

点击按钮,发现只会拿到最后一个列表节点,这肯定不是想要的结果。那么该如何操作呢?

这里又会存在一个小小的知识点:ref 可以接受一个 ref 对象,也可以接受一个函数。嘿,那么思路就来了。

函数的第一个参数,就是 dom 节点,那么我们只需要集中保存即可

ts 复制代码
import { useRef, useState } from "react";
​
function App() {
  const [list] = useState([1, 2, 3, 4, 5]);
  const lisDomRef = useRef<HTMLLIElement[]>([]);
​
  const getRef = (el: HTMLLIElement) => {
    lisDomRef.current.push(el);
  };
​
  const btn = () => {
    console.log(lisDomRef.current);
  };
  return (
    <>
      <ul>
        {list.map((v) => {
          return (
            <li ref={getRef} key={v}>
              {v}
            </li>
          );
        })}
      </ul>
      <button onClick={btn}>获取dom节点</button>
    </>
  );
}

点击按钮,就拿到 dom 集合了。

Vue: ref 绑定 dom 节点

单个节点

ts 复制代码
<script setup lang="ts">
import { ref } from "vue";
​
const divDomRef = ref<HTMLDivElement>();
​
const btn = () => {
  console.log(divDomRef.value);
};
</script>
​
<template>
  <div ref="divDomRef">我是单节点</div>
  <button @click="btn">获取dom节点</button>
</template>

点击按钮,拿取 dom 节点。

多个节点

ts 复制代码
<script setup lang="ts">
import { ref, reactive } from "vue";
​
const list = reactive([1, 2, 3, 4, 5]);
​
const lisDomRef = ref<HTMLLIElement[]>([]);
​
// ?? 这里的类型存在问题
const getRef = (el: any) => {
  if (el) {
    lisDomRef.value.push(el);
  }
};
​
const btn = () => {
  console.log(lisDomRef.value);
};
</script>
​
<template>
  <ul>
    <li v-for="item in list" :key="item" :ref="getRef">
      {{ item }}
    </li>
  </ul>
  <button @click="btn">获取dom节点</button>
</template>

敲码完成。

总结

是不是很快,两个方面:

  • 知识点简单
  • React 和 Vue 无论是单节点还是多节点,使用的方式一模一样。

简单的知识,愉快的学习,后面有时间深入源码理解。

相关推荐
羊小猪~~36 分钟前
前端入门一之DOM、获取元素、DOM核心、事件高级、操作元素、事件基础、节点操作
前端·javascript·css·vscode·html·浏览器·edge浏览器
界面开发小八哥1 小时前
DevExpress JS & ASP.NET Core v24.1亮点 - 支持DateOnly/TimeOnly类型
javascript·asp.net·界面控件·devexpress·ui开发·用户界面
getaxiosluo1 小时前
vue3使用element-plus,树组件el-tree增加引导线
前端·javascript·vue.js·elementui·css3·element-plus
YUJIANYUE1 小时前
6KBhtm+js实现提交名单随机抽取功能适用活动或课堂随机点名
前端·javascript·css
小码哥呀1 小时前
RabbitMQ队列详细属性(重要)
javascript·rabbitmq·ruby
寅时码2 小时前
【奇淫技巧】让你的路由跳转拥有TS类型提示,告别人工记路由path
前端·javascript·react.js
Bug从此不上门2 小时前
Nuxt3之使用lighthouse性能测试及性能优化实操
前端·javascript·性能优化·vue·fetch·nuxt3
拼图2092 小时前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉2 小时前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
oliveira-time3 小时前
爬虫学习8
开发语言·javascript·爬虫·python·算法