React Hooks、useState、useEffect 、react函数状态

Hooks

Hooks 概念理解

学习目标: 理解 Hooks 的概念及解决的问题

  1. 什么是 hooks

    hooks 的本质: 一套能够使函数组件更强大、更灵活的(钩子)

React 体系里组件分为类组件和函数组件
多年使用发现,函数组件是一个更加匹配 React 的设计理念UI = f(date),也更加有利于逻辑拆分与重用的组件表达形式,而先前组件是不可以有自己的状态的。为了让函数组件可以拥有自己的状态,所以从 react v16.8 开始,加入了 hooks
注意点:

  1. 有了 Hooks 之后,为了兼容老版本,class 类组件并没有被移除,两者都可以使用
  2. 有了 Hooks 之后,不能在把函数成为无状态组件了,因为 Hooks 为函数组件提供了状态
  3. Hooks 只能在函数组件中使用
  4. Hooks 解决了什么问题
    Hooks 的出现解决了两个问题 1.组件的逻辑复用
  5. 组件逻辑复用
    在 Hooks 出现之前,react 先后尝试了 mixin 混入、HOC 高阶组件、render-props 等模式但是都有各自的问题,比如 mixin 的数据来源不清、高阶组件的嵌套问题等
  6. class 组件自身的问题
    class 组件过于厚重,大而全,提供了很多东西,有很高的学习成本,比如繁多的生命周期、this 指向问题等,而更多时候需要轻快的使用组件
  7. Hooks 优势
  8. 告别那一理解的 class
  9. 解决业务逻辑难以拆分的问题
  10. 使状态逻辑复用变的简单
  11. 函数组件在设计思想上与 react 的理念契合

useState

  1. 基础使用
    学习目标: 能够学会 useState 的基础用法
    作用: useState 为函数组件提供状态(state)
    使用步骤:
  2. 导入useState函数
  3. 调用useState函数,并传入状态初始值
  4. useState函数的返回值中,拿到状态和修改状态的方法
  5. 在 JSX 中展示状态
  6. 调用修改状态的方法更新状态
    代码实现:
import { useState } from 'react'
function App() {const [count, setCount] = useState(0)return (<div><button onClick={() => setCount(count + 1)}>{count}</button></div>)
}
export default App

状态读取和修改

const [count, setCount] = useState(0) // 解构赋值 useState 返回值是一个数组

  1. useState 传过来的参数 作为 count 的初始值
  2. [count, setCount] 名字可以自定义保持语义化顺序不可以变 第一个参数是数据状态 第二个参数是修改数据的方法
  3. setCount 函数用来修改 count 依旧保持不能直接修改原值还是生成一个新值替换原值 setCount(基于运算得到的新值)
  4. count 和 setCount 是一对 是绑在一起的 setCount 只能用来修改对应的 count 值

组件的更新过程

学习目标: 能够理解使用 Hooks 之后组件的更新状态
函数组件使用 useState hook 后的执行过程,以及状态值的变化

  • 组件第一次渲染
    1. 从头开始执行该组件中的代码逻辑
    2. 调用useState(0)将传入参数作为状态初始值,即:0
    3. 渲染组件,此时,获取到的状态 count 值为:0
  • 组件第二次渲染 1. 点击按钮,调用setCount(count +1)修改状态,因为状态发生改变,所以该组件会重新渲染 2. 组件重新渲染时,会再次执行组件中的代码逻辑 3. 再次调用setCount(0),此时 React 内部会拿到最新的状态值而非初始值 4. 再次渲染组件时获取到的状态 count 值为:1
    注意:useState 的初始值只有在组件第一次渲染时生效,以后的每一次渲染,useState 获取到的都是最新的状态值

使用规则

学习目标: 能够记住 useState 的使用规则

  1. useState函数可以执行多次,每次执行互相独立,每调用一次为函数组件提供一个状态
function List() {// 字符串状态值const [name, setName] = useState('cp')// 数组状态值const [list, setList] = useState([])
}
  1. useState 注意事项
  2. 只能出现在函数组件中
  3. 不能嵌套在 if、for、其他函数中(react 按照 hooks 的调用顺序识别每一个 hook)
let num = 1
function List() {num++if (num / 2 === 0) {const [name, setName] = useState('cp')}const [list, setList] = useState([])
}
// 两个hook的顺序不是固定的,这是不可以的
  1. 可以通过开发者工具查看 hooks 状态
    代码示例:
import { useState } from 'react'
function App() {const [count, setCount] = useState(0)const [show, setShow] = useState(false)const [list, setList] = useState([])function test() {setShow(!show)setList([1, 2, 3, 4])console.log(show, list)}return (<div><button onClick={() => setCount(count + 1)}>count:{count}</button><button onClick={test}>show:{show ? 'true' : 'false'}---list:{list}</button></div>)
}
export default App

useEffect 函数

基础使用
  1. 理解函数副作用
    学习目标: 能够理解函数副作用的概念
    什么是函数副作用:
    副作用是相对于主作用来说的,一个函数除了主作用,其他的作用就是副作用,对于 React 组件来说主作用是根据数据(state\props)渲染 UI,除此之外都是副作用(比如,手动修改 DOM)
    常见副作用:
  2. 数据请求 ajax
  3. 手动修改 DOM
  4. localstorage 操作

    useEffect 函数的作用就是为 React 函数组件提供副作用处理

  5. 基础使用
    学习目标: 能够学会 useEffect 的基础用法并且掌握默认的执行时机
    作用 为 React 函数组件提供副作用处理
    使用步骤:
  6. 导入useEffect函数
  7. 调用useEffect函数,并传入回调函数
  8. 在回调函数中编写副作用处理(DOM 操作)
import { useState, useEffect } from 'react'
function App() {const [count, setCount] = useState(0)useEffect(() => {document.title = count})return (<div><button onClick={() => setCount(count + 1)}>count:{count}</button></div>)
}
export default App
依赖项控制执行时机
  1. 默认状态(无依赖项) 组件初始化时先执行一次 等每次数据修改更新再次执行
useEffect(() => {console.log('副作用执行了')
})
  1. 添加空数组依赖项 组件只在首次渲染时执行一次 其余时间不执行
useEffect(() => {console.log('副作用执行了')
}, [])
  1. 添加特定依赖项 副作用函数在首次渲染时执行,在依赖项发生变化时再次执行
import { useState, useEffect } from 'react'
function App() {const [count, setCount] = useState(0)const [name, setName] = useState('cp')useEffect(() => {console.log('副作用执行了')document.title = count}, [count, name])return (<div><button onClick={() => setCount(count + 1)}>count:{count}</button><button onClick={() => setName('hs')}>name:{name}</button></div>)
}
export default App

注意事项: 只要在 useEffect 回调函数中用到的数据(比如,count)就是依赖数据,就应该出现在依赖项数组中,如果不添加依赖项就会有 bug 出现

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/749706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity3d版白银城地图

将老外之前拼接的Unity3d版白银城地图&#xff0c;导入到国内某手游里&#xff0c;改成它的客户端地图模式&#xff0c;可以体验一把手游的快乐。 人物角色用的是它原版的手游默认的&#xff0c;城内显示效果很好&#xff0c;大家可以仔细看看。 由于前期在导入时遇到重大挫折&…

PMP的学习方法

PMBOK编撰了管理项目需要的49个过程&#xff08;输入、工具技术、输出&#xff09;。工具技术文件&#xff0c;林林总总百余个。第一部分&#xff0c;按照十大知识领域顺序从前到后编排&#xff1b;第二部分&#xff0c;按照五大过程组顺序重新编排了一遍。 一&#xff0c;PMB…

xray问题排查,curl: (35) Encountered end of file(已解决)

经过了好几次排查&#xff0c;都没找到问题&#xff0c;先说问题的排查过程&#xff0c;多次确认了user信息&#xff0c;包括用户id和alterid&#xff0c;都没问题&#xff0c;头大的一逼 问题排查过程 确保本地的xray服务是正常的 [rootk8s-master01 xray]# systemctl stat…

StarRocks面试题及答案整理,最新面试题

StarRocks 的 MV&#xff08;物化视图&#xff09;机制是如何工作的&#xff1f; StarRocks 的物化视图&#xff08;MV&#xff09;机制通过预先计算和存储数据的聚合结果或者转换结果来提高查询性能。其工作原理如下&#xff1a; 1、数据预处理&#xff1a; 在创建物化视图时…

2024年3月环境管理体系基础考试真题

2024年3月环境管理体系基础考试真题 一、单项选择题&#xff08;每题1.5分&#xff0c;共60分&#xff09; 1.依据GB/T24001-2016标准&#xff0c;6.1.1中要求应确定需应对的风险和机遇&#xff0c;以确保组织能够实现其环境管理体系的预期结果&#xff0c;预防或减少&#x…

开发指南005-前端配置文件

平台要求无论前端还是后端&#xff0c;修改配置可以直接用记事本修改&#xff0c;无需重新打包或修改压缩包里文件。就前端而言&#xff0c;很多系统修改配置是在代码里修改&#xff0c;然后打包或者是修改编译环境来重新编译。 平台前端的配置文件为/static/js/下qlm_config.j…

算法打卡day19|二叉树篇08|Leetcode 235. 二叉搜索树的最近公共祖先、701.二叉搜索树中的插入操作、450.删除二叉搜索树中的节点

算法题 Leetcode 235. 二叉搜索树的最近公共祖先 题目链接:235. 二叉搜索树的最近公共祖先 大佬视频讲解&#xff1a;二叉搜索树的最近公共祖先视频讲解 个人思路 昨天做过一道二叉树的最近公共祖先&#xff0c;而这道是二叉搜索树&#xff0c;那就要好好利用这个有序的特点…

Linux: 调用接口

进程相关 获取进程id与创建进程 头文件: <unistd.h>getpid() : 获取进程idgetppid() : 获取父进程的idfork() : 创建子进程, 给父进程返回子进程的id, 给子进程返回0 等待子进程 头文件: <sys/types.h> <sys/wait.h>pid_t wait(int*status); 返回值: 成…

欧拉openeuler23.09默认软件源太慢了,修改为华为云更新源,附上具体配置内容。

因为是直接在原有的文件基础上修改的&#xff0c;所以有一些不需要的内容我用#号屏蔽掉了。 #generic-repos is licensed under the Mulan PSL v2. #You can use this software according to the terms and conditions of the Mulan PS L v2. #You may obtain a copy of Mulan…

2000-2021年各省外商直接投资水平面板数据(含原始数据+计算结果)(无缺失)

2000-2021年各省外商直接投资水平面板数据&#xff08;含原始数据计算结果&#xff09;&#xff08;无缺失&#xff09; 1、时间&#xff1a;2000-2021年 2、指标&#xff1a;外商直接投资额&#xff08;万美元&#xff09;、外商直接投资额&#xff08;万元&#xff09;、国…

代码随想录 二叉树—二叉树的最大深度

思路&#xff1a;depth初始为0&#xff0c;要是有子孩子就depth加1&#xff0c;循环过了之后最后一个没子孩子&#xff0c;depth也会加1&#xff0c;弥补了先开始的0。简单题&#xff0c;模板略微改一点。 题解c&#xff1a; /*** Definition for a binary tree node.* struc…

lv17 安防监控实现之通信协议制定 2

项目功能框架分层 ***************************************************** 分层分析&#xff1a; ***************************************************** web网页端显示部分&#xff1a; 环境信息摄像头采集图像&#xff1a; 硬件控制&#xff1a; A9数据处理部分 A9-Z…

Linux下最常用的MySQL运维脚本

MySQL是一个广泛用于Web应用程序和服务器的开源关系型数据库管理系统。在Linux环境中&#xff0c;运维MySQL数据库可能涉及到许多日常任务&#xff0c;如备份、性能优化、监控等。为了提高效率&#xff0c;许多运维工作可以通过编写脚本来自动化执行。本文将介绍一些在Linux下最…

Leetcode64. 最小路径和

Problem: 64. 最小路径和 文章目录 思路解题方法复杂度Code 思路 动态规划,偷房子问题变形 解题方法 dp[i][j] min(dp[i-1][j],dp[i][j-1])grid[i][j]; 复杂度 时间复杂度: O ( m ∗ n ) O(m*n) O(m∗n) 空间复杂度: O ( m ∗ n ) O(m*n) O(m∗n) Code class Solution { pub…

leetcode代码记录(动态规划基础题(斐波那契数列)

目录 1. 题目&#xff1a;2. 斐波那契数列&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a…

[LeetCode][LCR173]点名——二分结合输入数据特点找边界

题目 LCR 173. 点名 某班级 n 位同学的学号为 0 ~ n-1。点名结果记录于升序数组 records。假定仅有一位同学缺席&#xff0c;请返回他的学号。 示例 1&#xff1a; 输入&#xff1a;records [0,1,2,3,5] 输出&#xff1a;4 示例 2&#xff1a; 输入&#xff1a;records [0, …

王道c语言-判断对称数,sprintf应用

Description 输入一个整型数&#xff0c;判断是否是对称数&#xff0c;如果是&#xff0c;输出yes&#xff0c;否则输出no&#xff0c;不用考虑这个整型数过大&#xff0c;int类型存不下&#xff0c;不用考虑负值 方法一 取余乘位权 #include <stdio.h> int main() {i…

TensorFlow的介绍和简单案例

TensorFlow是一个开源的机器学习框架,由Google开发和维护。它旨在使构建和训练机器学习模型变得更加容易,同时提供高度灵活性和可扩展性。 TensorFlow基于数据流图的概念。数据流图是一个由节点和边组成的有向图,其中节点表示操作,边表示数据的流动。TensorFlow通过在数据…

YOLOv9更换iou|包含CIoU、DIoU、MDPIoU、GIoU

专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;助力高效涨点&#xff01;&#xff01;&#xff01; 一、改进点介绍 更换YOLOv9中使用的Iou计算方式&#xff0c;目前支持CIoU、DIoU、MDPIoU、GIoU。 二、Iou模块详解 2.1 模块简介 Iou的主要思想&…

<JavaEE> 数据链路层 -- 以太网协议、MTU限制、ARP协议

目录 以太网协议 什么是以太网&#xff1f; 以太网的帧格式 什么是MAC地址&#xff1f; MAC地址和IP地址的对比&#xff1f; MTU&#xff08;最大传输单元&#xff09;限制 什么是MTU限制&#xff1f; MTU对IP协议有什么影响&#xff1f; MTU对UDP协议有什么影响&…