React新文档切记不要滥用Ref

目录
  • 引言
  • 为什么是逃生舱?
  • 失控的Ref
  • 如何限制失控
  • 人为取消限制
  • useImperativeHandle
  • 总结

引言

React新文档有个很有意思的细节:useRefuseEffect这两个API的介绍,在文档中所在的章节叫Escape Hatches(逃生舱)。

显然,正常航行时是不需要逃生舱的,只有在遇到危险时会用到。

如果开发者过多依赖这两个API,可能是误用。

在React新文档:不要滥用effect哦中我们谈到useEffect的正确使用场景。

今天,我们来聊聊Ref的使用场景。

为什么是逃生舱?

先思考一个问题:为什么refeffect被归类到逃生舱中?

这是因为二者操作的都是脱离React控制的因素。

effect中处理的是副作用。比如:在useEffect中修改了document.title

document.title不属于React中的状态,React无法感知他的变化,所以被归类到effect中。

同样,使DOM聚焦需要调用element.focus(),直接执行DOM API也是不受React控制的。

虽然他们是脱离React控制的因素,但为了保证应用的健壮,React也要尽可能防止他们失控。

失控的Ref

对于Ref,什么叫失控呢?

首先来看不失控的情况:

  • 执行ref.currentfocusblur等方法
  • 执行ref.current.scrollIntoView使element滚动到视野内
  • 执行ref.current.getBoundingClientRect测量DOM尺寸

这些情况下,虽然我们操作了DOM,但涉及的都是React控制范围外的因素,所以不算失控。

但是下面的情况:

  • 执行ref.current.remove移除DOM
  • 执行ref.current.appendChild插入子节点

同样是操作DOM,但这些属于React控制范围内的因素,通过ref执行这些操作就属于失控的情况。

举个例子,下面是React文档中的例子

按钮1点击后会插入/移除 P节点,按钮2点击后会调用DOM API移除P节点:

export default function Counter() {
  const [show, setShow] = useState(true);
  const ref = useRef(null);
  return (
    <div>
      <button
        onClick={() => {
          setShow(!show);
        }}>
        Toggle with setState
      </button>
      <button
        onClick={() => {
          ref.current.remove();
        }}>
        Remove from the DOM
      </button>
      {show && <p ref={ref}>Hello world</p>}
    </div>
  );
}

按钮1通过React控制的方式移除P节点。

按钮2直接操作DOM移除P节点。

如果这两种移除P节点的方式混用,那么先点击按钮1再点击按钮2就会报错:

这就是使用Ref操作DOM造成的失控情况导致的。

如何限制失控

现在问题来了,既然叫失控了,那就是React没法控制的(React总不能限制开发者不能使用DOM API吧?),那如何限制失控呢?

React中,组件可以分为:

  • 高阶组件
  • 低阶组件

低阶组件指那些基于DOM封装的组件,比如下面的组件,直接基于input节点封装:

function MyInput(props) {
  return <input {...props} />;
}

在低阶组件中,是可以直接将ref指向DOM的,比如:

function MyInput(props) {
  const ref = useRef(null);
  return <input ref={ref} {...props} />;
}

高阶组件指那些基于低阶组件封装的组件,比如下面的Form组件,基于Input组件封装:

function Form() {
  return (
    <>
      <MyInput/>
    </>
  )
}

高阶组件无法直接将ref指向DOM,这一限制就将ref失控的范围控制在单个组件内,不会出现跨越组件的ref失控。

文档中的示例为例,如果我们想在Form组件中点击按钮,操作input聚焦:

function MyInput(props) {
  return <input {...props} />;
}
function Form() {
  const inputRef = useRef(null);
  function handleClick() {
    inputRef.current.focus();
  }
  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        input聚焦
      </button>
    </>
  );
}

点击后,会报错:

这是因为在Form组件中向MyInput传递ref失败了,inputRef.current并没有指向input节点。

究其原因,就是上面说的为了将ref失控的范围控制在单个组件内,React默认情况下不支持跨组件传递ref。

人为取消限制

如果一定要取消这个限制,可以使用forwardRef API显式传递ref

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});
function Form() {
  const inputRef = useRef(null);
  function handleClick() {
    inputRef.current.focus();
  }
  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

使用forwardRefforward在这里是传递的意思)后,就能跨组件传递ref

在例子中,我们将inputRefForm跨组件传递到MyInput中,并与input产生关联。

在实践中,一些同学可能觉得forwardRef这一API有些多此一举。

但从ref失控的角度看,forwardRef的意图就很明显了:既然开发者手动调用forwardRef破除防止ref失控的限制,那他应该知道自己在做什么,也应该自己承担相应的风险。

同时,有了forwardRef的存在,发生ref相关错误后也更容易定位错误。

useImperativeHandle

除了限制跨组件传递ref外,还有一种防止ref失控的措施,那就是useImperativeHandle,他的逻辑是这样的:

既然ref失控是由于使用了不该被使用的DOM方法(比如appendChild),那我可以限制ref中只存在可以被使用的方法。

useImperativeHandle修改我们的MyInput组件:

const MyInput = forwardRef((props, ref) => {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    focus() {
      realInputRef.current.focus();
    },
  }));
  return <input {...props} ref={realInputRef} />;
});

现在,Form组件中通过inputRef.current只能取到如下数据结构:

{
  focus() {
    realInputRef.current.focus();
  },
}

就杜绝了开发者通过ref取到DOM后,执行不该被使用的API,出现ref失控的情况。

总结

正常情况,Ref的使用比较少,他是作为逃生舱而存在的。

为了防止错用/滥用导致ref失控React限制默认情况下,不能跨组件传递ref。

为了破除这种限制,可以使用forwardRef

为了减少refDOM的滥用,可以使用useImperativeHandle限制ref传递的数据结构。

以上就是React新文档切记不要滥用Ref的详细内容,更多关于React新文档Ref的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue3 关于reactive的重置问题及解决

    目录 关于reactive的重置问题 理解vue3中的reactive 1.什么是reactive? 2.reactive注意点 关于reactive的重置问题 在vue3的reactive的使用, 有时候需要对里面的数据进行清空处理, 下面推荐一个方法 假如有一个info的reactive的数据 const info = reactive<{ name: string; age: string; gender: string }>({   name: "1",   age

  • 关于vue3中的reactive赋值问题

    目录 vue3 reactive赋值问题 vue3 reactive的坑 清空数组 清空对象 vue3 reactive赋值问题 vue3中直接对reactive整个对象赋值检测不到 let obj = reactive({ name: 'zhangsan', age: '18' }) obj = { name: 'lisi' age: '' } // 上面这样赋值检测不到,因为响应式的是它的属性,而不是它自身 // 如需要对 reactive 赋值 // 方法1: 单个赋值 obj['name

  • vue3中的reactive函数声明数组方式

    目录 reacitve函数如何声明一个响应式数组 解决办法 使用reactive包裹数组赋值 需求 代码 reacitve函数如何声明一个响应式数组 如以下案例 <template>   <div>       <div v-for="item in arr" :key="item">            {{item}}       </div>         <button @click="ch

  • vue3中reactive不能直接赋值的解决方案

    目录 vue3 reactive不能直接赋值 方法 vue3 reactive赋值不响应 (1)多嵌套一层 (2)使用ref (3)用obeject.assign vue3 reactive不能直接赋值 最近比较忙,都没什么时间学习了. 在vue3里,ref和reacitve都可以定义响应式数据,但是两者有所不同.在使用reactive定义复杂结构的响应式数据时,如果你要对其赋值,会丢失其响应性.然后赋值是我们经常进行的操作,那么该怎么解决呢? 方法 1. 改为ref定义 const arr=

  • vue3中reactive数据被重新赋值后无法双向绑定的解决

    目录 reactive数据被重新赋值后无法双向绑定 推荐写法 vue3数据的双向绑定 一.script setup 二.ref() 函数 三.reactive()函数 reactive数据被重新赋值后无法双向绑定 这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发 推荐写法 import {reactive, toRefs} from 'vue' setup(props, context) { const state = reactive({ my

  • 对Vue3中reactive的深入理解

    目录 Vue3 reactive的理解 1.什么是reactive? 2.reactive注意点 Vue3笔记 reactive函数 Vue3 reactive的理解 1.什么是reactive? reactive是Vue3中提供实现响应式数据的方法. 在Vue2中响应式数据是通过defineProperty来实现的. 而在Vue3响应式数据是通过ES6的Proxy来实现的 2.reactive注意点 reactive参数必须是对象(json/arr) 如果给reactive传递了其他对象,默认

  • React新文档切记不要滥用Ref

    目录 引言 为什么是逃生舱? 失控的Ref 如何限制失控 人为取消限制 useImperativeHandle 总结 引言 React新文档有个很有意思的细节:useRef.useEffect这两个API的介绍,在文档中所在的章节叫Escape Hatches(逃生舱). 显然,正常航行时是不需要逃生舱的,只有在遇到危险时会用到. 如果开发者过多依赖这两个API,可能是误用. 在React新文档:不要滥用effect哦中我们谈到useEffect的正确使用场景. 今天,我们来聊聊Ref的使用场景

  • React新文档切记不要滥用effect

    目录 引言 一些理论知识 处理副作用 总结 引言 你或你的同事在使用useEffect时有没有发生过以下场景: 当你希望状态a变化后发起请求,于是你使用了useEffect: useEffect(() => { fetch(xxx); }, [a]) 这段代码运行符合预期,上线后也没问题. 随着需求不断迭代,其他地方也会修改状态a.但是在那个需求中,并不需要状态a改变后发起请求. 你不想动之前的代码,又得修复这个bug,于是你增加了判断条件: useEffect(() => { if (xxx

  • 给XML文档添加新 ”records”

    本文所举的例子与保存HTML格式数据至XML类似.在以往当表格被提交后,我们通常会创建一个新的文档,现在只要文档已经存在,那么直接添加就可以了.此种技术的使用与创建基本数据类似. 在前面的文章里,我已经演示了如何使用XMLDOM.因此,我们可以直接进入本文的示例. 我们需要考虑的第一件事是我们将用于添加新"记录"的HTML 表单.在"将HTML表单数据保存至XML"例子中我们已使用过此表单,只是更改了文件名,但代码是相同的. AddContact.html: 复制代

  • 从ASP.NET得到Microsoft Word文档的代码

    背景 自动化(Automation)是一个过程,它允许编程语言譬如Visual Basic.NET或C#写的应用程序可以编程控制其它应用程序.自动化到Word允许你执行像创建新文档,向文档中添加文本,邮件合并,还有控制文档格式这样的操作.使用Word和其它Microsoft Office应用程序,几乎所有你能在用户面板上手动实现的操作都可以通过自动化编程实现.Word通过一个对象模型来实现这个编程功能性(programmatically functionality).对象模型是一系列类和方法,它

  • C#实现通过模板自动创建Word文档的方法

    本文实例讲述了C#实现通过模板自动创建Word文档的方法,是非常实用的技巧.分享给大家供大家参考.具体实现方法如下: 引言:前段时间有项目要用c#生成Word格式的计算报告,通过网络查找到很多内容,但是都很凌乱,于是自己决定将具体的步骤总结整理出来,以便于更好的交流和以后相似问题可以迅速的解决! 现通过具体的示例演示具体的步骤:   第一步,制作模板   1.新建一个文档,设置文档内容. 2.在相应位置插入书签:将鼠标定位到要插入书签的位置,点击"插入">"书签&quo

  • html文档中的location对象属性理解及常见的用法

    关于location对象的简单理解: 1.location对象中涵盖了当前页面(本页面)或者更直接的说,是当前加载的这个html文档的url信息 2.location对象作为window对象的一个属性,可以通过window.location老访问 下面顺便介绍一些URL(资源定位符)的相关信息吧: 在浏览器中URL通常由下面几个部分组成的: [协议][host][path][query] 协议:常见的协议有: http:// 表示资源文件在web服务器上 ftp://表示资源文件在网络上的ftp

  • asp.net 在线编辑word文档 可保存到服务器

    注意:你要打开的服务器端的word文档要有写权限.iis要开起 web服务扩展中的webdav为允许 具体参考文档msdn:http://msdn2.microsoft.com/en-us/library/ms454230.aspx 原理:通过 javascript 创建一个ActiveX控件实例(为浏览者机器Program Files\Microsoft Office\OFFICE11\owssupp.dll或Program Files\Microsoft Office\OFFICE10\ow

  • asp.net中如何批量导出access某表内容到word文档

    下面通过图文并茂的方式给大家介绍asp.net中批量导出access某表内容到word文档的方法,具体详情如下: 一.需求: 需要将表中每一条记录中的某些内容导出在一个word文档中,并将这些文档保存在指定文件夹目录下 二.界面,简单设计如下: 三.添加office相关引用 添加后可在解决方案资源管理器中看到: 四.添加form1中的引用 using System.Data.OleDb; using System.Data.SqlClient; using System.IO; using Mi

  • 在PHP中读取和写入WORD文档的代码

    复制代码 代码如下: <?  // 建立一个指向新COM组件的索引  $word = new COM("word.application") or die("Can't start Word!");  // 显示目前正在使用的Word的版本号  //echo "Loading Word, v. {$word->Version}<br>";  // 把它的可见性设置为0(假),如果要使它在最前端打开,使用1(真)  // t

  • Java经验点滴:类注释文档编写方法

    文章来源:csdn 作者:chensheng913 对于Java语言,最体贴的一项设计就是它并没有打算让人们为了写程序而写程序--人们也需要考虑程序的文档化问题.对于程序的文档化,最大的问题莫过于对文档的维护.若文档与代码分离,那么每次改变代码后都要改变文档,这无疑会变成相当麻烦的一件事情. 解决的方法看起来似乎很简单:将代码同文档"链接"起来.为达到这个目的,最简单的方法是将所有内容都置于同一个文件.然而,为使一切都整齐划一,还必须使用一种特殊的注释语法,以便标记出特殊的文档:另外还

随机推荐