React Hooks的useState、useRef使用

这篇具有很好参考价值的文章主要介绍了React Hooks的useState、useRef使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

React Hooks 是 React 16.8 版本引入的新特性,它允许你在不编写 class 的情况下使用 state 和其他 React 特性。其中,useState 和 useRef 是两个常用的 Hooks。

1. useState

useState 是一个允许你在函数组件中添加 state 的 Hook。

使用说明:

  • useState 返回一个状态变量和一个设置该变量的函数。
  • 如果传递给 useState 的初始值是 undefined,则返回的状态变量初始值为 undefined
  • 你可以在组件的任何地方调用 useState,但通常建议在组件的顶层调用它。

代码示例:文章来源地址https://www.toymoban.com/news/detail-783063.html

import React, { useState } from 'react';

function Example() {
// 声明一个初始值为 "A" 的状态变量 name
const [name, setName] = useState('A');

return (
<div>
<p>Hello, my name is {name}.</p>
<button onClick={() => setName('B')}>Change Name</button>
</div>
);
}

2. useRef

useRef 是一个可以存储任意数据类型的不可变(只读)引用(比如一个 DOM 元素或一个 React 组件)。ref 是一个响应式的引用,这意味着即使它的调用点没有发生改变,它的指向也会随着组件渲染而更新。

使用说明:

  • useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传递的参数(或 undefined)。
  • .current 的值在组件的整个生命周期内保持不变。
  • ref 对象在组件的整个生命周期内保持不变。

代码示例:

import React, { useState, useRef } from 'react';

function Timer() {
const count = useRef(0); // 使用 useRef 存储 count 的初始值
const [seconds, setSeconds] = useState(0); // 使用 useState 来存储当前的秒数
const [countdown, setCountdown] = useState(10); // 使用 useState 来存储倒计时时间(10秒)
const interval = setInterval(() => { // 使用 setInterval 来实现倒计时功能,每秒更新一次 seconds 的值
setSeconds((seconds) => seconds + 1); // seconds 每秒自增 1,当 seconds 大于等于 countdown 时,停止倒计时并清除 interval 以清除倒计时动画
if (seconds >= countdown) { // 当 seconds 大于等于 countdown 时,清除 interval 并调用 clearTimeout 来停止倒计时动画并显示“Game Over”信息,然后调用 setCountdown 来重置倒计时时间(重新开始倒计时)和调用 setSeconds 来重置 seconds 的值(重新开始计时)
clearInterval(interval); // 当倒计时结束后,清除 interval 以停止倒计时动画并显示“Game Over”信息,然后调用 setCountdown 来重置倒计时时间(重新开始倒计时)和调用 setSeconds 来重置 seconds 的值(重新开始计时)
} else { // 当 seconds 小于 countdown 时,继续倒计时动画并显示当前的秒数和剩余的倒计时时间(每秒更新一次)
count.current = seconds; // 将 seconds 的值赋给 ref 的 current 属性以在父组件中通过 useEffect 来使用这个值并在控制台打印这个值,然后通过 countdownRef.current = countdown; 将 countdown 的值赋给 ref 的 current 属性以在父组件中通过 useEffect 来使用这个值并在控制台打印这个值,这样就可以在父组件中获取到当前秒数和剩余的倒计时时间并在控制台打印它们了。注意这里使用 ref 来存储当前的秒数和剩余的倒计时时间是因为它们需要在父组件中通过 useEffect 来使用并在控制台打印它们,而 ref 是唯一可以在函数组件和父组件之间共享数据的 Hook。

到了这里,关于React Hooks的useState、useRef使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ahooks.js:一款强大的React Hooks库及其API使用教程(二)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: 前面的API:aho

    2024年02月12日
    浏览(30)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(一)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: 1. useRequest useR

    2024年02月12日
    浏览(32)
  • 【前端知识】React 基础巩固(四十二)——React Hooks的介绍

    Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。 class组件 VS 函数式组件: class的优势: class组件可以定义自己的state,用来保存组件自己内部的状态;而函数式组件不可以,因为函数每次调用都会产生新的临时

    2024年02月14日
    浏览(61)
  • React钩子函数之useRef的基本使用

    React钩子函数中的useRef是一个非常有用的工具,它可以用来获取DOM元素或者保存一些变量。在这篇文章中,我们将会讨论useRef的基本使用。 首先,我们需要知道useRef是如何工作的。它返回一个可变的ref对象,这个对象可以在组件的整个生命周期中被访问。当我们需要获取DOM元

    2024年02月10日
    浏览(33)
  • 3.react useRef使用与常见问题

    https://zh-hans.legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function

    2024年02月12日
    浏览(39)
  • React -- useState使用方法

    userState 是一个React Hook (函数)。它允许我们向组件添加一个状态变量,从而控制影响组件的渲染结果 1. useState是一个函数,返回值是一个数组 2. 数组中第一个参数是状态变量,第二个参数是set开头的函数名,用于修改变量 3. useState的参数作为count的初始值 4.使用举例

    2024年02月19日
    浏览(32)
  • React 使用 useRef() 获取循环中所有子组件实例

    之前项目中使用了 antd pro 中的 可编辑表格 (EditableProTable) ,在页面中表格要经过多层遍历后组成的新页面,所以我将之抽成了一个公用的组件,另外在遍历的最外层需要通过一个按钮统一提交表格数据,但是提交数据之前需要对每一个表格进行非空校验。 遍历中引入组件这

    2024年02月11日
    浏览(32)
  • 前端开发笔记 | React Hooks子组件和父组件交互

    前端开发框架目前比较常用的就是react、vue等,其中使用React Hooks 带来了不少的好处,今天来聊聊React Hooks开发方式下,子组件和父组件的交互。 子组件定义 父组件调用子组件 父组件定义 子组件中刷新父组件按钮文案 实际效果:点击子组件中“改变父组件按钮”,父组件中

    2024年02月11日
    浏览(81)
  • 【前端知识】React 基础巩固(四十四)——其他Hooks(useContext、useReducer、useCallback)

    在类组件开发时,我们通过 类名.contextType = MyContext 的方式,在类中获取context,多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context: 可以看到,当我们需要使用多个Context时,存在大量繁琐的嵌套代码;而Context Hook能够让我们通过Hook直接获取某个Context的值,如

    2024年02月14日
    浏览(46)
  • react useState useEffect useMemo实际业务场景中的使用

    下面的代码实现了上面图片的功能

    2024年02月16日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包