React Hooks中use的细节

devtools/2024/11/29 0:32:47/

文档

useState

  • useState如果是以函数作为参数,那要求是一个纯函数,不接受任何参数,同时需要一个任意类型的返回值作为初始值。

  • useState可以传入任何类型的参数作为初始值,当以一个函数作为参数进行传入的时候需要注意:
    如果只传入了函数名,那么这个函数参数只会在初始化渲染的时候被调用,后续页面发生变化也不会触发函数;如果传入的是函数调用后的结果,那么当初始化渲染和后续页面变化的时候都会触发函数。

    javascript">import { useState } from 'react';export default function Counter() {const [age, setAge] = useState(increment); // 因为传入的是函数名,所以只有在初始化的时候才触发,因此只有一个输出const [age, setAge] = useState(increment()); // 传入的是函数返回的内容,所以当点击+1的按钮进行更新的时候也会触发increment函数,所以一直会有输出function increment() {console.log('-----输出')return 0}function add(){setAge(a => a + 1);}return (<><h1>Your age: {age}</h1><button onClick={() => {add();}}>+1</button></>);
    }
    

    箭头函数同理:

    javascript">import { useState } from "react";export default function Counter() {const [age, setAge] = useState(() => {console.log("-----输出");return 0;});const [age, setAge] = useState((() => {console.log("-----输出");return 0;})());function add() {setAge((a) => a + 1);}return (<><h1>Your age: {age}</h1><buttononClick={() => {add();}}>+1</button></>);
    }
    

    请添加图片描述

  • setState是变更state的方法,它接受任何类型的值,包括函数。需要注意的是,set函数不会更新已经运行代码中的state状态变量,因此 ,当一个运行中的代码存在同时多次触发同一个set函数的时候,set中的state值其实都是之前没变化时的同一个。如果需要解决这个问题,可以向set函数传递一个更新函数,它必须是纯函数,只接受待定的 state 作为其唯一参数,并应返回下一个状态。此时,更新函数将会获取待定状态并从中计算下一个状态。

    javascript">//假设 age 为 42,这个处理函数三次调用 setAge(age + 1):
    function add() {setAge(age + 1); // setAge(42 + 1),因为add函数已经运行了,set函数不会更新里面的age值,所以取得全是上一次的值,即42,因此,每个 setAge(age + 1) 调用变成了 setAge(43)setAge(age + 1); // setAge(42 + 1)setAge(age + 1); // setAge(42 + 1)
    }
    

    解决这个问题,你可以向 setAge 传递一个更新函数,而不是下一个状态:

    javascript">function handleClick() {setAge(a => a + 1); // setAge(42 => 43)setAge(a => a + 1); // setAge(43 => 44)setAge(a => a + 1); // setAge(44 => 45)
    }
    

    这里,a => a + 1 是更新函数。它获取待定状态并从中计算下一个状态。

    React 将更新函数放入队列中。然后,在下一次渲染期间,它将按照相同的顺序调用它们:

    a => a + 1 将接收 42 作为待定状态,并返回 43 作为下一个状态。
    a => a + 1 将接收 43 作为待定状态,并返回 44 作为下一个状态。
    a => a + 1 将接收 44 作为待定状态,并返回 45 作为下一个状态。
    现在没有其他排队的更新,因此 React 最终将存储 45 作为当前状态。

    按照惯例,通常将待定状态参数命名为状态变量名称的第一个字母,如 age 为 a。然而,你也可以把它命名为 prevAge 或者其他你觉得更清楚的名称。

其他参考:
React Hooks中常用Hooks的用法详解
React Hooks中常用Hooks钩子的用法详解


http://www.ppmy.cn/devtools/137782.html

相关文章

粗配准+icp精配准 搭配3DSC 实现配准流程

文章目录 前言一、制作source和target点云数据二、完整代码三、配准效果 前言 借鉴 参考一 一、制作source和target点云数据 制作翻转点云数据可以参照这篇文章这里不再赘述 二、完整代码 #include <pcl/point_types.h> #include <pcl/point_cloud.h> #include…

计算机网络 实验七 NAT配置实验

一、实验目的 通过本实验理解网络地址转换的原理和技术&#xff0c;掌握扩展NAT/NAPT设计、配置和测试。 二、实验原理 NAT配置实验的原理主要基于网络地址转换&#xff08;NAT&#xff09;技术&#xff0c;该技术用于将内部私有网络地址转换为外部公有网络地址&#xff0c;从…

限制对 etcd 的访问范围是确保 Kubernetes 集群安全的一个重要环节。

限制对 etcd 的访问范围是确保 Kubernetes 集群安全的一个重要环节。通常&#xff0c;etcd 只应当对 Kubernetes 控制平面的组件&#xff08;如 API Server、Controller Manager、Scheduler 等&#xff09;以及某些维护工具&#xff08;如备份工具&#xff09;开放访问权限&…

Docker 容器网络创建网桥链接

一、网络&#xff1a;默认情况下&#xff0c;所有的容器都以bridge方式链接到docker的一个虚拟网桥上&#xff1b; 注意&#xff1a;“172.17.0.0/16”中的“/16”表示子网掩码的长度为16位&#xff0c;它表示子网掩码中有16个连续的1&#xff0c;后面跟着16个连续的0。用于区分…

C语言解决空瓶换水问题:高效算法与实现

标题&#xff1a;C语言解决空瓶换水问题&#xff1a;高效算法与实现 一、问题描述 在一个饮料促销活动中&#xff0c;你可以通过空瓶换水的方式免费获得更多的水&#xff1a;3个空瓶可以换1瓶水。喝完这瓶水后&#xff0c;空瓶会再次变为空瓶。假设你最初拥有一定数量的空瓶&a…

从 HTML 到 CSS:开启网页样式之旅(开篇之一)——CSS 初体验与网页样式新征程

从 HTML 到 CSS&#xff1a;开启网页样式之旅&#xff08;一&#xff09;——CSS 初体验与网页样式新征程 前言一、为什么需要 CSS&#xff1f;二、CSS的引用&#xff08;一&#xff09;行内样式&#xff08;二&#xff09;内部样式&#xff08;三&#xff09;外部样式&#xf…

论文笔记 网络安全图谱以及溯源算法

​ 本文提出了一种网络攻击溯源框架&#xff0c;以及一种网络安全知识图谱&#xff0c;该图由六个部分组成&#xff0c;G <H&#xff0c;V&#xff0c;A&#xff0c;E&#xff0c;L&#xff0c;S&#xff0c;R>。 1|11.知识图 ​ 网络知识图由六个部分组成&#xff0c…

职业技术学校新方向,无人机组装、调试、维修技术培训详解

职业技术学校开展无人机组装、调试、维修技术培训&#xff0c;是紧跟时代步伐、满足市场需求的重要举措。以下是对这一培训方向的详细解析&#xff1a; 一、培训目标 无人机组装、调试、维修技术培训旨在培养具备无人机组装、调试、维修以及应用能力的专业技术人才。学员通过…