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 无论是单节点还是多节点,使用的方式一模一样。

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

相关推荐
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说3 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef065 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端7 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder8 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句8 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom8 小时前
JavaScript reduce()函数详解
javascript
小飞悟8 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试