【React】 第十三部分 Hooks

最新推荐文章于 2023-12-27 10:15:36 发布
最新推荐文章于 2023-12-27 10:15:36 发布
阅读量657 收藏 1
点赞数 1
分类专栏： 前端框架React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Trees__/article/details/126540123
版权

【React】 第十三部分 Hooks

文章目录

13. Hooks

13.1 什么是Hooks?

Hook是React 16.8.0版本增加的新特性/新语法

可以让你在函数组件中使用 state ,ref 以及其他的 React 特性


13.2 State Hook

State Hook 作用 ：让函数组件也可以有state状态, 并进行状态数据的读写操作

在这里说几个细节上的问题:

  1. 该函数组件执行次数为 n+1 次, 1 是初始化那一次

  2. 函数重新执行按理说初始化的值会一直被覆盖,导致数据不能发生变化

    问题 ：为什么数据是可以发生变化的?

    原因：react底层做了处理，在初始化的时候将初始化的值存了起来,下次
    执行的时候使用的是存起来的值

  3. StateHook中修改状态的方法不会去合并对象而是去替换对象，这点和类组件中的setState()不同

import React, { Component } from 'react'

export default function Test (){
    /*
        调用React.useState(initValue) ,传入的是初始化的值
        该方法返回的是一个数组
            - 数组中第一个参数为:初始化的值/当前状态的值
            - 数组中第二个参数为:操作该状态的方法
     */
    const [count,setCount] = React.useState(0)
    const [person,setPerson] = React.useState([
        {
            name:'Jack',
            age:18,
            id:'001'
        }
    ])
    const [obj,setObj] = React.useState({name:'Jane',age:52})

    const add = () =>{
        // 第一种写法,参数为非函数值
        // 直接指定新的状态值, 内部用其覆盖原来的状态值
        setCount(count+1)
    }

    const subtract = () =>{
        // 第二种写法,参数为函数
        // 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值
        setCount(count=>count-1)
    }

    const addPerson = () =>{
        setPerson((person)=>{
            let obj = {id:'002',name:'Mark',age:12}
            return [obj,...person]
        })
    }

    /*
        在这里需要注意：它和类组件的中的setState不同
        不会进行合并对象而是去替换对象 
     */
    const changeName = () =>{
        setObj((obj)=>{
            return Object.create(Object.assign(obj,{name:'Lili'}))
        })
    }

    return (
        <div>
            <h2>当前求和为:{count}</h2>
            <h2 onClick={changeName}>{obj.name} --- {obj.age}</h2>
            <button onClick={add}>点我+1</button>
            <button onClick={subtract}>点我-1</button>
            <button onClick={addPerson}>添加人员</button>
            {
                person.map((item)=>{
                    return <li key={item.id}>{item.name} --- {item.age}</li>
                })
            }
        </div>
    )
}

13.3 Effect Hook

Effect Hook 作用： 可以在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)

React中的副作用操作:

1. 发ajax请求数据获取
2. 设置订阅 / 启动定时器
3. 手动更改真实DOM
4. 清除定时器

useEffect Hook 可以看做如下三个生命周期组合

componentDidMount()

componentDidUpdate()

componentWillUnmount() 

第一种写法: 
React.useEffect(()=>{
      // 相当于 componentDidUpdate()
   		// 监视所有的数据一旦数据发生变化就调用该函数
   		console.log('@');
 })


第二种写法:
React.useEffect(()=>{
      // 相当于 componentDidUpdate()
   		// 第二个函数可以传入一个数组，数组内可以指定监视某个属性
  		// 监视的属性一旦发生变化就调用该函数
   		console.log('@');
 },[count])


第三种写法：
React.useEffect(()=>{
   // 如果只写一个数组那么就表示谁也不监视
  // 只在初始化的时候执行一次，相当于componentDidMount()
   console.log('@');
},[])


第四种写法：
  React.useEffect(()=>{
       return ()=>{
         // 该函数中只有在组件将要被卸载的时候才会执行
         // 相当于componentWillUnmount()
        	console.log('@');
       }
},[])

13.4 Ref hook

Ref Hook 作用 ：可以在函数组件中存储/查找组件内的标签或任意其它数据

语法：const refContainer = React.useRef()

用法和React.createRef()一样

import React, { Component } from 'react'

export default function Demo(){
    // 创建一个存放ref的容器
    const inpRef = React.useRef()
    
    const tip = () =>{
        alert(inpRef.current.value)
    }

    return (
        <div>
            <input type="text" ref={inpRef} />
            <button onClick={tip}>alert</button>
        </div>
    )
}

13.5 useCallback(记忆函数)

作用:防止组件重新渲染时,导致函数重新进行创建,对函数起到缓存作用

根据下面这个案例,不管是修改数值还是修改名字,只要一修改那么整个函数式组件就会重新被渲染, 函数就会被重新创建声明,useCallBack( )就是为了解决这个问题而诞生,可以提高性能优化

import React, { useState, useCallback } from 'react'

export default function CallBack() {
    const [count, setCount] = useState(0)
    const [name,setName] = useState('Jack')
    /*
        useCallback()可以传入两个参数
            - 第一个参数就是我们所写的逻辑
            - 第二个参数就是逻辑中所依赖的属性
        函数在第一次创建的时候就被缓存,只有所依赖的属性发生
        变化才会重新创建声明函数
     */
    const handleAdd = useCallback(
        () => {
            setCount(count + 1 )
        },
        [count]
    )

    const modifyName = useCallback(
        () =>{
            setName('LiHua')
        },[]
    )

    return (
        <div>
            <h2>当前的值为:{count}</h2>
            <button onClick={() => { handleAdd() }}>add</button>
            <h2>{name}</h2>
            <button onClick={modifyName}>点击修改名字</button>
        </div>
    )
}

13.6 useMemo (记忆组件)

useCallback的功能完全可以由useMemo所替代

那么它们之间的区别在于哪里呢?

  1. 写法

    useCallback(fn,[attr])   
useMemo(()=> fn, [attr])

  2. 用法

    useCallback不会执行第一个参数中的函数,而是直接将该函数返回,而useMemo会执行第一个参数中的函数并且将函数执行的结果返回给你,学过Vue的小伙伴应该就知道这个相当于Vue中计算属性

  3. 使用场景

    useCallback常用于记忆事件函数,而useMemo更适合通过一个函数计算得到一个确定的值

    import axios from 'axios'
import React,{useState,useMemo,useEffect,useCallback} from 'react'

export default function UseMemo() {
  const [inpVal,setInpVal] = useState('')
  const [list,setList] = useState([])

  useEffect(()=>{
    axios({
        url:'https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=5006381',
        headers:{
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"1660449552376256314998785","bc":"310100"}',
            'X-Host': 'mall.film-ticket.cinema.list'
        }
    }).then((value)=>{
        setList(value.data.data.cinemas)
    }).catch((error)=>{
        console.log(error);
    })
  },[])

  // 处理搜索
  const handleSearch = useCallback(
    (e) =>{
        setInpVal(e.target.value)
      },[]
  )

  // 筛选符合条件的内容
  const filterData = useMemo(()=>{
    return list.filter((item)=>{
        return item.name.toUpperCase().includes(inpVal.toUpperCase()) || item.address.toUpperCase().includes(inpVal.toUpperCase())
    })
  },[list,inpVal])

  return (
    <div>
        <input type="text"  onChange={handleSearch}/>
        <ul>
            {
                filterData.map((item)=>{
                    return (
                        <li key={item.cinemaId}>
                            <h3>{item.name}</h3>
                            <h5>{item.address}</h5>
                        </li>
                    )
                })
            }
        </ul>
    </div>
  )
}

13.7 useContext

作用：适用于祖先和后代间通信

import React ,{createContext,useContext}from 'react'

// 第一步: 创建context对象
const GlobalContext = createContext()
export default function UseContextTest() {
  return (
        // 第二步: GlobalContext.Provider包裹祖先,让他成为供应商
        // value属性:传入数据
        <GlobalContext.Provider value={{
            info:'这是祖先传递的消息',
            message:()=>{
                console.log('这是祖先传递的方法');
            }
        }}>
            <div style={{padding:'10px',background:'green'}}>
                <h2>我是祖先</h2>
                <Father></Father>
            </div>
        </GlobalContext.Provider>
  )
}



function Father() {
  return (
    <div style={{padding:'10px',background:'pink'}}>
        <h2>我是儿子</h2>
        <Son></Son>
    </div>
  )
}

function Son() {

  // 第三步：通过useContext(context对象)
  const value = useContext(GlobalContext)
  return (
    <div style={{padding:'10px',background:'red'}}>
        <h2>我是孙子</h2>
        <h4>{value.info}</h4>
        <h4>{value.message()}</h4>
    </div>
  )
}

13.8 useReducer

作用：用于状态管理，和redux作用一样，也是根据redux所创造出来的hook，那么它需要配合useContext一起使用

import React,{useReducer} from 'react'

export default function UseReducer() {
  const initState = {count:0}
  /*
        reducer处理函数可以接收到两个参数
            - 第一个参数:之前状态的值
            - 第二个参数:所派发的action
                - action是一个对象里面存放type和data
   */
  const reducer = (previousState=initState,action)=>{
    const {type,data} = action
    switch (type) {
        case 'plus':
            return {count:previousState.count + data}
        case 'subtract':
            return {count:previousState.count - data}
        default:
            return previousState
    }
  }
   /*
        useReducer可以接收到两个参数
            - 第一个参数:总状态
            - 第二个参数:dispatch用来派发action
        useReducer需要传入到两个参数
            - reducer:处理函数
            - initState:初始化状态

   */
  const [state,dispatch] = useReducer(reducer,initState)
  return (
    <div>
        <h2>当前的值为:{state.count}</h2>
        <button onClick={()=>{
            dispatch({type:'plus',data:1})
        }}> +1 </button>
        <button onClick={()=>{
            dispatch({type:'subtract',data:1})
        }}> -1 </button>
    </div>
  )
}

13.9 自定义hook

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。

其实本质上就是提取公共部分的逻辑，对其进行函数封装

import {useState,useEffect} from 'react'
import axios from 'axios'
export default function useGetData() {
    const [getData,setData] = useState([]) 
    useEffect(()=>{
        axios({
            url: 'https://m.maizuo.com/gateway?cityId=350600&ticketFlag=1&k=8644263',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"1660449552376256314998785","bc":"350600"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then((value) => {
            setData(value.data.data.cinemas)
        }).catch((error) => {
            console.log(error)
        })
    },[])

    return getData
}

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！

Tree_wws
关注
专栏目录
React-hooks 基础
m0_62118859的博客
04-28 528
1. hooks-介绍 能够说出 React Hooks 是什么？ 大致步骤： hooks 解释 hooks 作用 有了 hooks 之后组件开发模式 具体内容： 1.hooks 解释 Hooks：钩子、钓钩、钩住 ，Hooks是React v16.8中的新增功能 2.hooks 作用 为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性 注意：Hooks 只能在函数组件中使用，自此...
React函数式组件、hooks及初识路由(三)
L_u_c_k_y_m_a_n的博客
07-29 697
一、前言         昨天由于有一些事情耽搁,没有学习新的 react 以及发布博客. 而今天呢,这篇内容会分享类组件、函数式组件、hooks的一些方法以及初识 react 路由.接下来我们学习吧! 二、children         组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容  &nbsp
react-hooks:react+hooks+antd,管理系统基础功能
05-29
这个项目是用引导的。 可用脚本 在项目目录中，您可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果您进行编辑，页面将重新加载。 您还将在控制台中看到任何 lint 错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参阅有关的部分。 yarn build 将用于生产的应用程序构建到build文件夹。 它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。 构建被缩小，文件名包括哈希值。 您的应用程序已准备好部署！ 有关更多信息，请参阅有关的部分。 yarn eject 注意：这是一种单向操作。 一旦eject ，就回不去了！ 如果您对构建工具和配置选择不满意，您可以随时eject 。 此命令将从您的项目中删除单个构建依赖项。 相反，它会将所有配置文件和可传递依赖项（webpack、Babel
Ref Hook
qq_51025561的博客
07-21 155
Ref Hook
React+Hooks+antd Tree组件简单总结
qq_40151160的博客
03-30 2741
Tree组件一般使用于：文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 1、简单的使用（基本tree） import React, { useEffect, useState, useRef } from 'react';//首先引入hooks常用方法 import { connect } from 'react-redux'; import { Tree } from 'antd'; //引入组件 im
React中hooks
m0_61135864的博客
11-11 1001
hooks 是一些可以让你在函数组件里 钩入 react state及生命周期的特点 hooks 只能在函数组件内使用 我们可以使用class提供给状态也可以使用hooks提供状态 但是在16.8之前 只能使用class提供状态 函数组件展示内容 react组件时用来构建用户界面的 函数式组件本身比较简单 可以很好的胜任根据状态渲染ui而我之前说过 函数式组件没有状态 但是结合hooks后 可以让函数组件内具有维护状态的能力 并且带来了组建的逻辑复用 是一种不一样的复用 useState为函数组件提.
React 学习笔记 —— Ref Hook
qq_36904182的博客
05-19 179
用以下三种方式创建 Ref 都可以 import React from 'react' export default function Count () { const [count ,setCount] = React.useState(0) const myRef = React.createRef() const myRef2 = React.useRef() // Ref Hook 的方式 const myRef3 = {current: undefined}.
React Hooks
weixin_47431743的博客
10-16 701
如何正确使用 useState？ 什么时候使用 useReducer？ 如何注意react性能问题？ 什么时候使用 useContext？ 什么时候使用 redux？ useContext 和 useReducer 能否取代 redux？ Prop Drilling && redux-toolkit
react hooks自定义组件居然能这样做
wdj_yyds的博客
12-27 1246
前言 　　这里写一下如何封装可复用组件。首先技术栈 react hooks + props-type + jsx封装纯函数组件。类组件和typeScript在这不做讨论，大家别白跑一趟。 接下来会说一下封装可复用组件的思路，比如一个新手应该怎么去封装，都需要有哪些东西。 　　然后说一些复杂组件需要的功能，比如闭合标签内部dom怎么处理，其实就是插槽功能，比如数据监听，内部做一些业务逻辑。 　　想看原码的点这里，这是一个GitHub上完整的 react hooks 项目，源码： https://git
react源码解析13.hooks源码
zz1999aa的博客
02-10 211
react源码解析13.hooks源码 视频讲解（高效学习）：进入学习 hook调用入口 ​ 在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate ReactCurrentDispatcher.current = current ===
react hook实现todoList和更复杂的的递归编辑树操作
今天鸭鸭不想出去玩
06-14 327
之前有个兄弟问图上效果怎么实现出来，点击+号可以无限增加页面，新增的时候就是编辑状态，鼠标移开就是菜单列表，双击又变成可编辑的状态。好了现在开始上强度，如果是下图效果那么该怎么做呢？感兴趣的可以自己想一下哟！
ReactHook RefHook
weixin_43294560的博客
06-23 4348
除了可以进行ref操作以外,还能进行数据存储的操作 1、引入 import React, { Component,useRef } from 'react'; 2、使用ref const xx=useRef(任意内容); 在标签上: ref={inputEL} 3、操作ref xx.current.dom操作 4、若使用ref容器存储数据,即当作this来使用 const xx=useRef(初始数据); 改变数据:xx.current=数据; 获取数据:xx.cu
react学习—ref Hook
xun__xing的博客
05-23 904
ref Hook一、ref Hook 一、ref Hook useRef函数： 一个参数：默认值 返回一个固定的对象，{current: 值} import React, { createRef, useState } from 'react' export default function App() { const inpRef = createRef; const [n, setN] = useState(0); return ( <div> <input re
react扩展5_RefHook
lxk116688的博客
07-29 202
第三个我们经常用到的Hook就是RefHook。都是用来保存标签对象的。
Hooks
Azbtt的博客
05-06 629
useState会定义一个与class里this.state功能完全相同的state变量，从而实现在函数式组件中应用stateuseEffect会在函数式组件中实现类似class生命周期的功能，通过useEffect的Hook可以告诉React需要在渲染后执行某些操作useReducer并非是Redux的替代品，而是类似useState的替代方案在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分。
Hook 学习系列（二） —— Effect Hook
且听风吟的博客
08-25 651
Effect Hook
React Hooks使用 Ref Hooks
memedadexixaofeifei的博客
02-13 8095
useRef 获取子组件或者DOM节点的句柄 渲染周期之间共享数据的存储 import React, { useState, PureComponent, useEffect, useMemo, memo, useCallback, useRef } from "react"; // useMemo的写法与useState相同,但是调用时机不同,useState执行的是副作用，在组件渲染完...
React函数组件使用Effect Hook（副作用钩子）
最新发布
weixin_50367873的博客
12-27 1736
如果你熟悉 React class 的生命周期函数，你可以把useEffectHook 看做(挂载完成)，(更新完成) 和（即将销毁前） 这三个函数的组合。Did : 做了… Will: 将要…。不管你知不知道这些操作，或是“副作用”这个名字，应该都在组件中使用过它们。在 React 组件中有两种常见副作用操作：**需要清除的 **和。我们来更仔细地看一下他们之间的区别。
react native和reacthooks
08-28
React Native是一个用于构建移动应用程序的框架，它允许开发者使用JavaScript和React编写原生应用程序。React Hooks是React的一个新特性，它允许在功能组件中访问异步API，以及使用state和其他React特性，而无需编写类组件。React Native 0.59版本开始支持React Hooks。使用React Hooks，开发者可以更简洁地编写React Native应用程序，并且可以更好地优化性能。通过减少不必要的render，React Hooks可以提供更高效的应用程序。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [React Native API变成了React Hooks，用于功能性React组件-React开发](https://download.csdn.net/download/weixin_42155721/19125861)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [ReactNative中Hooks封装与使用](https://blog.csdn.net/hxl517116279/article/details/122849593)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值