首页 > 其他分享 >react中什么时候使用useRef,直接在外层定义普通的变量可以吗

react中什么时候使用useRef,直接在外层定义普通的变量可以吗

时间:2024-03-24 12:01:08浏览次数:31  
标签:React useRef 变量 渲染 current 外层 react 组件

react中什么时候使用useRef,直接在外层定义普通的变量可以吗

在React中,useRef 主要是用来创建一个可变的引用对象,它可以用来保存任何可变值,而且这个引用在组件重新渲染时始终保持不变。以下是几个典型使用场景:

  1. 访问DOM元素
    当你需要直接访问HTML元素时,可以使用 useRef 创建一个引用,然后将其分配给元素的 ref 属性。在后续的生命周期钩子或事件处理函数中,通过 ref.current 访问到真实的DOM节点。

    import React, { useRef } from 'react';
    
    function TextInput() {
      const inputEl = useRef(null);
    
      useEffect(() => {
        console.log(inputEl.current.value); // 访问文本框的值
      }, []);
    
      return <input ref={inputEl} type="text" />;
    }
    
  2. 跨渲染周期保留值
    如果你需要在组件重新渲染时保留一个值,但又不想触发组件状态(useState)的重新渲染,可以使用 useRefuseRef 返回的对象 .current 属性的值在组件生命周期内不会触发组件重新渲染。

    import React, { useRef } from 'react';
    
    function Counter() {
      const latestCount = useRef(0);
    
      function handleClick() {
        latestCount.current++;
        console.log('Latest count:', latestCount.current); // 不会触发UI更新
      }
    
      return (
        <>
          <button onClick={handleClick}>Increment</button>
          {/* UI更新依据的是useState状态 */}
          <div>{/* 使用useState的状态展示在UI上 */}</div>
        </>
      );
    }
    
  3. 闭包陷阱
    在某些涉及事件处理或计时器等闭包场景中,useRef 可以用来存储在重新渲染后仍需保持不变的函数引用或变量,以解决闭包问题。

直接在外层定义普通变量是可行的,尤其是在函数外部定义的顶级变量(通常是常量或不可变变量),它们在整个应用生命周期内都能保持可见。
但是,这种做法不适合于React组件内部的状态管理,因为React组件每次重新渲染时都会创建新的函数实例,导致外层定义的变量无法在组件内部闭包中捕获和更新。

总结来说,何时使用 useRef

  • 当你需要在组件重新渲染后还能访问到同一个引用,尤其是访问到DOM节点时。
  • 当你需要存储一个值并在组件重新渲染时不触发组件状态更新时。

而在某些场景下,直接定义外层变量并不适用,特别是涉及组件内部状态管理时,推荐使用React的状态管理工具如 useStateuseReducer

标签:React,useRef,变量,渲染,current,外层,react,组件
From: https://www.cnblogs.com/longmo666/p/18092236

相关文章

  • new ReactRefreshWebpackPlugin({ overlay: false, }), 作用是什么
    ReactRefreshWebpackPlugin是一个专门为React应用程序提供快速热更新(FastRefresh/HotReloading)的Webpack插件。当你的React组件代码发生变化时,它能够自动重新渲染受影响的组件,而不是刷新整个页面,从而显著提升开发效率。配置项中的overlay:false表示禁用错误提示覆......
  • React&Nest.js社区平台(四)——✏️文章发布与管理实战
    公众号:【可乐前端】,每天3分钟学习一个优秀的开源项目,分享web面试与实战知识。前言在上一期我们已经实现了个人信息模块,这一期来实现文章发布与管理。涉及到如下功能:草稿创建/修改文章发布文章删除获取我发布的文章看起来像是文章的增删改查功能,其实还是有不少值得思考......
  • react 数字求和
    在生命周期中,写了如下代码asynccomponentDidMount(){    //方法1:提取树型结构数据    letp={};   p.style="full";   p.sqlprocedure="app01";   letrs=awaitreqdoSQL(p);    //计算总销售额  // reduce函数,将数组......
  • react我需要在表格数据变化后,下一次渲染结束后,执行表单校验逻辑
    在React中,要在表格数据变化后且下一次渲染完成后执行表单校验逻辑,可以考虑在useEffect钩子中处理这个问题。useEffect会在每次渲染完成后的DOM更新之后执行指定的回调函数。以下是一个简化的示例:importReact,{useState,useEffect}from'react';functionYourComponent({......
  • 【React】使用 JSX 为 JavaScript 添加标签
    使用JSX为JavaScript添加标签实际上是将JSX语法与JavaScript代码结合使用,以描述用户界面。JSX允许你在JavaScript中编写类似HTML的结构,并最终由React库将其转换为真正的DOM元素。以下是将标签引入JavaScript以及将HTML转化为JSX的步骤和JSX的一些基本......
  • 解决react useEffect中的内容被执行两次的问题
    当我们在函数组件中,希望使用useEffect来达到初始化的目的时,会发现总是在初始化的时候执行两遍问题复现组件代码部分import"./assets/App.css";import{useEffect}from"react";constApp=()=>{useEffect(()=>{console.log("组件初始化");},......
  • 【React 】如何提高组件的渲染效率?在React中如何避免不必要的render?
    1.是什么react基于虚拟DOM和高效Diff算法的完美配合,实现了对DOM最小粒度的更新,大多数情况下,React对DOM的渲染效率足以我们的业务日常复杂业务场景下,性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能,避免不必要的渲染则是业务中常见的优化手段之一2.如何做......
  • vue或react项目上线刷新出现404的原因以及解决办法
    问题描述:vue/react项目,正常的页面操作跳转,不会出现404的问题,但是一旦刷新,就会出现404报错。产生原因:我们打开vue/react打包后生成的dist文件夹,可以看到只有一个index.html文件及一些静态资源,这个是因为vue/react是单页应用(SPA),只有一个index.html作为入口文件,其它的路由都是通......
  • react 版本比对的库
     react版本比对的库React本身不提供版本比对的库,但是你可以使用第三方库 semver 来进行版本比较。semver 是一个用于处理语义版本(SemanticVersioning)的库,它提供了一系列的方法来比较版本号。首先,你需要安装 semver 库:  npminstallsemver然后,你可......
  • 4年前的React老项目打包报错解决问题处理过程
    处理公司一个4年前React应用时,发现打包编译时会出现如题错误:Failedtominifythebundle.Error:index.71782de2.jsfromUglify]s  查看打包编译后源码错误位置: 经过bing搜索引擎查找类似解决方式: https://github.com/sorrycc/blog/issues/68 1、npm安装 https://g......