美文网首页
React函数组件使用useRef替代var或let定义变量

React函数组件使用useRef替代var或let定义变量

作者: ArslanRobot | 来源:发表于2023-10-29 13:15 被阅读0次

React函数组件中不能使用var/let定义变量,使用中无法更改数值。需要使用useRef定义组件内变量。

export default function Doc({ params }: { params: { docid: string } }) {
  useEffect(() => {
    currChapterId.current = "test"
  }, []);
  
  var currChapterId = useRef("");
}

React 中的 useRef 是一个 Hook 函数,主要用于在组件中存储且更新组件中的可变值,类似于 class 组件中的实例属性。它的作用可以概述为:

保留变量:ref 可以用来保存组件中的变量,在组件不断刷新时不会丢失,相当于在组件之间共享一个变量。

操作 DOM 元素:ref 可以用来引用 DOM 元素,从而可以访问和修改该元素的属性和方法。

保存旧值:可以使用 ref 保存前一个状态或值,可以方便地进行比较,从而触发某些操作。

在 effect 中跨越渲染周期保存数据:ref 中保存的值不会触发组件重新渲染,可以用来在 effect 中保存一些状态数据或是保存一些和组件渲染无关的数据。

相关文章

  • 在 React 函数式组件中使用 useState, 变量,us

    在 React 函数式组件中使用 useState, 变量,useRef 的时机 变量 变量在每次组件重新渲染的时...

  • ES6解读2:const、let和symbol

    let 和 const ES6新增了块作用域,新增了两种定义变量的方法,定义变量时推荐使用let替代var,let...

  • TypeScript基础-变量声明

    使用let替代var JavaScript中变量声明方式有:let var const。TypeScript中推荐...

  • ES6学习

    ES6 块级作用域、字符串、函数 let和const 定义变量是用块级作用域let替代var const定义不可修...

  • js问题

    js中let和var定义变量的区别,主要体现在作用于的不同。 var定义的变量是全局变量或者函数变量。 let定义...

  • React - 函数式组件化 & props参数传递

    React函数式组件化 & props参数传递 函数式组件 定义变量 & 使用组件 通过props传递参数 展开运...

  • Swift常量变量数组(一)

    1. 在Swift中可以使用var, let声明变量, var定义变量时值可以改变, 使用let定义时值不可以改变...

  • js var 、let 、const区别

    1、var定义的变量可以修改。不用多说了(地球人都知道) 2、let是块级作用域,函数内部使用let定义后,对函数...

  • 简短记录

    1、let声明的变量不存在变量提升,var声明的变量存在变量提升,当使用function定义时,这个函数都会 被...

  • Swift5.1 入门(1)

    1. 常量和变量 用 var 定义变量,let 定义常量,系统自动推断出变量或常量类型; 常量(let) 只能赋...

网友评论

      本文标题:React函数组件使用useRef替代var或let定义变量

      本文链接:https://www.haomeiwen.com/subject/wslvidtx.html