React函数组件的使用（Hooks）

news/2024/7/15 18:11:59 标签: react.js, javascript, 前端

目录

Hooks概念理解

1. 什么是hooks

2. Hooks解决了什么问题

useState

1. 基础使用

2. 状态的读取和修改

3. 组件的更新过程

4. 使用规则

useEffect

1. 理解函数副作用

2. 基础使用

3. 依赖项控制执行时机

4. 清理副作用

Hooks概念理解

本节任务: 能够理解hooks的概念及解决的问题

1. 什么是hooks

Hooks的本质：一套能够使函数组件更强大，更灵活的“钩子”

React体系里组件分为 类组件 和 函数组件

经过多年的实战，函数组件是一个更加匹配React的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生

注意点：

  1. 有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以使用

  2. 有了hooks之后，不能在把函数成为无状态组件了，因为hooks为函数组件提供了状态

  3. hooks只能在函数组件中使用

2. Hooks解决了什么问题

Hooks的出现解决了俩个问题 1. 组件的状态逻辑复用 2.class组件自身的问题

  1. 组件的逻辑复用 在hooks出现之前，react先后尝试了 mixins混入，HOC高阶组件，render-props等模式 但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题等等

  2. class组件自身的问题 class组件就像一个厚重的‘战舰’ 一样，大而全，提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this指向问题等等，而我们更多时候需要的是一个轻快灵活的'快艇'

useState

1. 基础使用

本节任务: 能够学会useState的基础用法

作用

useState为函数组件提供状态（state）

使用步骤

  1. 导入 useState 函数

  2. 调用 useState 函数，并传入状态的初始值

  3. 从useState函数的返回值中，拿到状态和修改状态的方法

  4. 在JSX中展示状态

  5. 调用修改状态的方法更新状态

代码实现

javascript">import { useState } from 'react'
 ​
 function App() {
   // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
   // 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
   const [count, setCount] = useState(0)
   return (
     <button onClick={() => { setCount(count + 1) }}>{count}</button>
   )
 }
 export default App

2. 状态的读取和修改

本节任务: 能够理解useState下状态的读取和修改

读取状态

该方式提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用

修改状态

  1. setCount是一个函数，参数表示最新的状态值

  2. 调用该函数后，将使用新值替换旧值

  3. 修改状态后，由于状态发生变化，会引起视图变化

注意事项

  1. 修改状态的时候，一定要使用新的状态替换旧的状态，不能直接修改旧的状态，尤其是引用类型

const [count,setCount]=useState(0)

  1. useSate传过来的参数 作为count的初始值

  2. [count, setCount] 这里的写法是一个解构赋值 useState返回值是一个数组

    名字可以自定义吗？-> 可以自定义保持语义化

    顺序可以换吗？-> 不可以 第一个参数就是数据状态 第二个参数就是修改数据的方法

  3. setCount函数 作用用来修改count 依旧保持不能修改原值还是生成一个新值替换原值

    setCount（基于原值计算得到的新值）

  4. count和setCount是一对 是绑在一起的 setCount 只能修改对应的count值

3. 组件的更新过程

本节任务: 能够理解使用hook之后组件的更新情况

函数组件使用 useState hook 后的执行过程，以及状态值的变化

  • 组件第一次渲染

    1. 从头开始执行该组件中的代码逻辑

    2. 调用 useState(0) 将传入的参数作为状态初始值，即：0

    3. 渲染组件，此时，获取到的状态 count 值为： 0

  • 组件第二次渲染

    1. 点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染

    2. 组件重新渲染时，会再次执行该组件中的代码逻辑

    3. 再次调用 useState(0)，此时 React 内部会拿到最新的状态值而非初始值，比如，该案例中最新的状态值为 1

    4. 再次渲染组件，此时，获取到的状态 count 值为：1

注意：useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说，以后的每次渲染，useState 获取到都是最新的状态值，React 组件会记住每次最新的状态值

javascript"> import { useState } from 'react'
 ​
 function App() {
   const [count, setCount] = useState(0)
   // 在这里可以进行打印测试
   console.log(count)
   return (
     <button onClick={() => { setCount(count + 1) }}>{count}</button>
   )
 }
 export default App

4. 使用规则

本节任务: 能够记住useState的使用规则

  1. useState 函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态

  2. useState 注意事项

    • 只能出现在函数组件或者其他hook函数中

    • 不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook） 

      javascript">let num = 1
 function List(){
   num++
   if(num / 2 === 0){
      const [name, setName] = useState('cp') 
   }
   const [list,setList] = useState([])
 }
 // 俩个hook的顺序不是固定的，这是不可以的！！！

    • 可以通过开发者工具查看hooks状态

useEffect

1. 理解函数副作用

本节任务: 能够理解副作用的概念

什么是副作用

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）

常见的副作用

  1. 数据请求 ajax发送

  2. 手动修改dom

  3. localstorage操作

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

2. 基础使用

本节任务: 能够学会useEffect的基础用法并且掌握默认的执行执行时机

作用

为react函数组件提供副作用处理

使用步骤

  1. 导入 useEffect 函数

  2. 调用 useEffect 函数，并传入回调函数

  3. 在回调函数中编写副作用处理（dom操作）

  4. 修改数据状态

  5. 检测副作用是否生效

代码实现

javascript">import { useEffect, useState } from 'react'
 ​
 function App() {
   const [count, setCount] = useState(0)
  
   useEffect(()=>{
     // dom操作
     document.title = `当前已点击了${count}次`
   })
   return (
     <button onClick={() => { setCount(count + 1) }}>{count}</button>
   )
 }
 ​
 export default App

3. 依赖项控制执行时机

本节任务: 能够学会使用依赖项控制副作用的执行时机

1. 不添加依赖项

组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行

  1. 组件初始渲染

  2. 组件更新 （不管是哪个状态引起的更新）

javascript"> useEffect(()=>{
     console.log('副作用执行了')
 })

2. 添加空数组

组件只在首次渲染时执行一次

javascript">useEffect(()=>{
      console.log('副作用执行了')
 },[])
3. 添加特定
依赖项

副作用函数在首次渲染时执行，在依赖项发生变化时重新执行

javascript">function App() {  
     const [count, setCount] = useState(0)  
     const [name, setName] = useState('zs') 
     
     useEffect(() => {    
         console.log('副作用执行了')  
     }, [count])  
     
     return (    
         <>      
          <button onClick={() => { setCount(count + 1) }}>{count}</button>      
          <button onClick={() => { setName('cp') }}>{name}</button>    
         </>  
     )
 }

注意事项

useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现

4. 清理副作用

如果想要清理副作用 可以在副作用函数中的末尾return一个新的函数，在新的函数中编写清理副作用的逻辑

注意执行时机为：

  1. 组件卸载时自动执行

  2. 组件更新时，下一个useEffect副作用函数执行之前自动执行

javascript">import { useEffect, useState } from "react"
 ​
 ​
 const App = () => {
   const [count, setCount] = useState(0)
   useEffect(() => {
     const timerId = setInterval(() => {
       setCount(count + 1)
     }, 1000)
     return () => {
       // 用来清理副作用的事情
       clearInterval(timerId)
     }
   }, [count])
   return (
     <div>
       {count}
     </div>
   )
 }
 ​
 export default App

http://www.niftyadmin.cn/n/5170531.html

相关文章

HIT_OS_LAB3 操作系统的引导

HIT_OS_LAB3 操作系统的引导

操作系统实验三 3.1. 实验目的 熟悉实验环境&#xff1b;建立对操作系统引导过程的深入认识&#xff1b;掌握操作系统的基本开发过程&#xff1b;能对操作系统代码进行简单的控制&#xff0c;揭开操作系统的神秘面纱。 3.2. 实验内容 3.2.1. 改写 bootsect.s 主要完成如下功…
阅读更多...
导轨式安装压力应变桥信号处理差分信号输入转换变送器0-10mV/0-20mV/0-±10mV/0-±20mV转0-5V/0-10V/4-20mA

导轨式安装压力应变桥信号处理差分信号输入转换变送器0-10mV/0-20mV/0-±10mV/0-±20mV转0-5V/0-10V/4-20mA

主要特性 DIN11 IPO 压力应变桥信号处理系列隔离放大器是一种将差分输入信号隔离放大、转换成按比例输出的直流信号导轨安装变送模块。产品广泛应用在电力、远程监控、仪器仪表、医疗设备、工业自控等行业。此系列模块内部嵌入了一个高效微功率的电源&#xff0c;向输入端和输…
阅读更多...
【华为数据通信】BFD是什么？

【华为数据通信】BFD是什么？

一、概述 BFD提供了一个通用的、标准化的、介质无关的、协议无关的快速故障检测机制&#xff0c;有以下两大优点&#xff1a; 对相邻转发引擎之间的通道提供轻负荷、快速故障检测。用单一的机制对任何介质、任何协议层进行实时检测。 BFD是一个简单的“Hello”协议。两个系统…
阅读更多...
C# DirectoryInfo类的用法

C# DirectoryInfo类的用法

在C#中&#xff0c;DirectoryInfo类是System.IO命名空间中的一个类&#xff0c;用于操作文件夹&#xff08;目录&#xff09;。通过DirectoryInfo类&#xff0c;我们可以方便地创建、删除、移动和枚举文件夹。本文将详细介绍DirectoryInfo类的常用方法和属性&#xff0c;并提供…
阅读更多...
【文章阅读 TODO】Transfer learning for drug–target interaction prediction

【文章阅读 TODO】Transfer learning for drug–target interaction prediction

Bioinformatics , 2023 Transfer learning for drug–target interaction prediction 本文主要是对迁移学习所使用的三种模式进行学习 Deep transfer learning is applying transfer learning on deep neural networks. The training phase of deep transfer learning is com…
阅读更多...
使用切面实现前端重复提交（防抖）

使用切面实现前端重复提交（防抖）

使用切面实现前端重复提交&#xff08;防抖&#xff09; 代码结构定义注解请求锁切面处理器入参对象使用注解 代码结构 原理&#xff1a; 1、前端提交保存操作&#xff1b; 2、后端通过注解指定重复提交的关键字段进行识别&#xff0c;可以有多个&#xff1b; 3、拼接关键字段&…
阅读更多...
Redis学习笔记8：基于springboot的Lettuce redis客户端connectTimeout、timeout、shutdownTimeout

Redis学习笔记8：基于springboot的Lettuce redis客户端connectTimeout、timeout、shutdownTimeout

一个对springboot redis框架进行重写&#xff0c;支持lettuce、jedis、连接池、同时连接多个集群、多个redis数据库、开发自定义属性配置的开源SDK <dependency><groupId>io.github.mingyang66</groupId><artifactId>emily-spring-boot-redis</art…
阅读更多...
软件工程的舞台上，《人月神话》的美学纷飞

软件工程的舞台上，《人月神话》的美学纷飞

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 今天给大家分享一本书&#xff1a;《人月神话》——软件工程的经典之作。 《人月神话》是一本具有深远影响力的软件工程著作&#xff0c;无论是软件开发者、管理者还是学习软件工程的人士&#xff0c;都能从中获得宝贵的启…
阅读更多...
最新文章

Copyright @ 2022~2023