React的Hooks

最新推荐文章于 2024-05-29 11:02:41 发布
最新推荐文章于 2024-05-29 11:02:41 发布
阅读量910 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sitaigu/article/details/119619926
版权

React Hook

Hook 是 React 16.8 的新增一系列封装函数，它可以让函数组件中可以使用state，跨组件通信，生命周期等React的特性

Hook的意义在于：将函数组件中的业务逻辑抽离出来，保证组件UI的纯净化

内置Hook (10个)

1.useState

定义和修改state [修改state的方法得到的一定是新值]

基本语法：
//定义state和修改state的方法
const [name,setName]=useState<数据类型>(数据默认值)
//定义事件处理程序来修改state
const change=()=>{
    // setName()
    // setName((旧值)=>{return 修改后的值})
}
案例一：定义修改字符串
import Reac, { FC,useState} from "react";
interface IAppProps{}
const App:FC<Partial<IAppProps>>=()=>{
  // todo 定义state和义修改state的方法
  const [name,setName]=useState<string>('篮网')
  // todo  定义事件处理程序
  const set=()=>{setName('掘金')}
  return <div>
    <button onClick={set}>点击</button>
    <p>{name}</p>
  </div>
}
export default App;
案例二：定义修改数值(计数案例)
import Reac, { FC,useState} from "react";
interface IAppProps{}
const App:FC<Partial<IAppProps>>=()=>{
  // todo 定义state和义修改state的方法
  const [count,addCount]=useState<number>(1);
  // todo 定义事件处理程序
 const add=()=>{addCount((n)=>n+1)}
  return <div>
   	 <button onClick={add}> + {count} </button>
  </div>
}
export default App;
案例三：定义修改数值(计数案例)
import Reac, { FC,useState} from "react";
interface IAppProps{}
const App:FC<Partial<IAppProps>>=()=>{
  // todo 定义state和义修改state的方法
  const [count,addCount]=useState<number>(1);
  // todo 定义事件处理程序
 const add=()=>{addCount((n)=>n+1)}
  return <div>
   	 <button onClick={add}> + {count} </button>
  </div>
}
export default App;
案例四：定义修改对象
import Reac, { FC,useState} from "react";
interface IAppProps{}
interface IObj{name:string}
const App:FC<Partial<IAppProps>>=()=>{
  const [obj,setObj]=useState<Partial<IObj>>({})
  const giveObjName=()=>{
      
    // !! 下面的代码不能写 
    // obj.name = 'lakers';
    // setObj(obj);
      
    //  todo1 写法1
    // setObj({name:'篮网'})
    // todo1 写法2
    obj.name='篮网'
    setObj({...obj})
  }

  return <div>
    <button onClick={giveObjName}>给对象值</button>
    <p>{obj.name}</p>
  </div>
}
案例五：定义修改数组
import React, { FC, useState } from "react";
interface IAppProps {}
interface IList {
  id: number;
  task: string;
  flag: boolean;
}
const App: FC<Partial<IAppProps>> = () => {
  // todo 定义state和义修改state的方法
  const [list, setList] = useState<Partial<IList>[]>([]);
  // todo 定义事件处理程序
  const add = (e: any) => {
    if (e.keyCode === 13) {
      const obj = {
        id: list.length + 1,
        task: e.target.value,
        flag: false,
      };
      setList([obj, ...list]);
      e.target.value=''
    }
  };

  return (
    <div>
      <input type="text" onKeyDown={ add } />
      <ul>{list.map((item) => (<li key={item.id}>{item.task}</li>))}</ul>
    </div>
  );
};
export default App;

2.useReducer 定义和修改state

类似于类似 Redux 的功能

  1. 定义state以及修改state

  2. 可以理解为做出来类似vuex的效果

  3. 可以理解它是一个简易版本的状态管理工具

它接收一个如 (state, action) => newState 的 reducer和一个初始化的state，并返回当前的 state 以及与其配套的 dispatch 方法

作者：zidea
链接：https://www.jianshu.com/p/14e429e29798
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

写法一：

  const [state,dispatch]=useReducer(reducer,initialState)

写法二：

  const [state,dispatch]=useReducer((state,action)=>{},初始化的state)

案例：计数案例

流程 button --> add – dispatch发布 —> reducer的action接收 ----> state

import React, { FC, useReducer } from "react";

interface IInitialState{
  count:number
}
const initialState:IInitialState={
  count:0
}
const reducer=(state:any,action:any) => {
  switch (action.type){
    case 'add':
      return {count:state.count+1}
    case 'jian': 
      return {count: state.count - 1 }
    default:
      return initialState
  }
}

const App:FC=() => {
  const [state,dispatch]=useReducer(reducer,initialState)
  const add=()=>{
    dispatch({type:'add'})
  }
  const jian=()=>{
    dispatch({type:'jian'})
  }

  return (
    <div>
      <button onClick={add}>+</button>
      <button onClick={jian}>-</button>
      <p>{state.count}</p>
    </div>
  )
}
export default App

3.useEffect

useEffect是用于实现生命周期功能的，他有3三种用法

语法：

语法： useEffect(callback,[数据])

数据：数据可以多个，可为props,state

**用法1：componentDidMount **

useEffect(() => {}, [])

类似componentDidMount 钩子函数功能 ：组件挂载结束

自动执行一次，可以进行真实DOM操作，数据请求发送

用法2：componentDidUpdate

useEffect(() => {}, [数据])

类似componentDidUpdate钩子函数功能 ：组件更新结束 表示对这个数据做监听

数据改变，就会触发，执行多次

**用法3：componentWillUnmount **

//callback的返回值为一个函数
useEffect(() => {
    return () => {}
}) 
// 第二个参数随意

类似componentWillUnmount 的功能 ：组件销毁时触发

4.useLayoutEffect 类似useEffect

 useLayoutEffect
    1. 用法和useEffect一致
    2. useLayoutEffect 解决了什么问题是useEffect解决不了的？
      - 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新 
    3. 理解
      - 范围不一致，useLayoutEffect的更大
    4. 什么时候用它？
      - 如果你正在将代码从 class 组件迁移到使用 Hook 的函数组件
      - 我们推荐你一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect。

5.useRef ref绑定

通过ref绑定可以拿到类子组件的数据或方法

ref无法绑定函数子组件，但子组件使用forwardRef高阶组件可以解决

绑定类组件

// 父组件

const 绑定名: any = useRef(null) //拿到子组件实例

绑定名.current.数据/方法   //使用子组件的数据或方法

<子组件  ref={绑定名}> //绑定子组件

绑定函数组件

ref无法绑定函数子组件，可以通过forwardRef高阶组件解决

  • forwardRef

forwardRef 我们称之为 高阶组件[HOC] High Order Component

它是一个函数，接收一个组件作为参数，并返回一个新组件

高阶组件的原理是闭包

// 父组件绑定和使用如绑定类组件

// 子组件导出时，导出新组件
export default React.forwardRef(Hello)

手动封装forwardRe

// 闭包
const HocComp = ( Comp: any ) => {
	return class _ extends React.Component{
 		 render () {
     		return <Comp/>
  		 }
  	}
}

6.usemperativeHandle

和ref绑定搭配，我们将子组件的内容绑定到父组件的ref中

  1. 搭配ref绑定来使用的

  2. 专用于函数组件

  3. 他有两个参数：第一个为ref,第二个为回调函数

  4. 它的返回值就是父组件ref绑定获得的结果

  5. 注意第一个参数ref的类型约定

// ref的类型约定
// ref: React.Ref<unknown>
useImperativeHandle(ref,() => {
    return {可以返回数据或方法}
})

7.useContext 跨组件通信

创建上下文context对象

// src/context/index.ts
import React from 'react'

const ctx = React.creatContext(0)

export default ctx

数据源组件

import ctx from './context'

....
return (
	<ctx.Provide value={money}>
        <接收组件>
    </ctx.Provid>
)

接收组件(类组件)

//引入上下文组件
import {useContext}
import ctx from './context'

//从ctx拿到数据实例
static contextType=ctx;

//使用数据
return(
	<div>{this.context}<div>
)

接收组件(函数组件)

//引入上下问组件
import {useContext}
import ctx from './context'

//从ctx拿到数据实例
const money=useContext(ctx)

//使用数据
return(
	<div>{money}<div>
)

8.useMeno 组件性能优化

问题一： 类组件中通过 shouldComponentUpdate 达到性能优化目的，那么函数组件呢？
解决： Hook ( useCallback useMemo )
问题二： 函数组件 - 重复渲染问题
因为函数组件本身是函数，所以只要数据改变，它就要重新执行自身

总结
state的改变，会引起组件的重复调用，那么渲染就会重复执行，这样会带来性能损耗
解决： useMemo/useCallback

语法：

const memoValue =useMemo(()=>{当监听数据改变时，才执行这里的渲染代码},监听数据)
//该函数会得一个返回值，通常被称为记忆值

案例：优化函数组件的渲染

import React, { FC, useState,useMemo} from "react";

const App:FC=()=>{
  const [n,setN]=useState<number>(0)
  const [list,setList]=useState<Array<number>>([1,2,3,4])
  const add=()=>{
    setN((n)=>n+1)
  }

  const renderList=()=>{
    console.log('render');
    return list.map((item,index)=>( <li key={index}>{item}</li> ))
  }
  // memoValue为记忆值
  const memoValue= useMemo(() => renderList(), [list])
  const addList=()=>{
    setList(
      [Math.max(...list)+1,...list]
    )}

  return (
    <div>
      <button onClick={add}>+ {n}</button>
      <hr />
      <button onClick={addList}>加一条数据</button>
      <ul>
          {memoValue}
      </ul>
    </div>
  )
}
export default App

9.useCallback 组件性能优化

父组件将渲染函数传递给子组件，但当父组件数据更新时，会引起子组件不必要的更新，所以可以使用useCallback得到一个返回值为渲染函数的记忆值，使用记忆值来代替传递的渲染函数

useCallback + memo【高阶组件】

// 父组件
import React, { FC, useState, useCallback } from "react";
import Hello from "./Hello";

const App: FC = () => {
  const [count, setCount] = useState<number>(0);
  const [list, setList] = useState<Array<number>>([1, 2, 3, 4]);

  const add = () => {
    setCount((n) => n + 1);
  };

  const renderList = () => {
    console.log('render')
    return list.map((item,index) => <li key={index}> { item } </li>)
  } 
  // todo 得到一个记忆函数
  const memoFunc = useCallback(() => {
    return renderList()
  }, [list])

  return (
    <div>
      <button onClick={add}> + {count} </button> 
      <hr/>
      <Hello memoFunc = { memoFunc } />
    </div>
  );
};

export default App;



// 子组件
import React, { ReactElement,memo } from 'react'

interface Props {
  memoFunc: () => ReactElement[]
}

function Hello({memoFunc}: Props): ReactElement {
  return (
    <div>
      <ul>
        { memoFunc() }
      </ul>
    </div>
  )
}


export default memo(Hello)

10.useDebugValue 自定义Hook起名

给自定义Hook起名[ 谷歌调试插件显示 ]

自定义Hook就是一个封装函数

名字前缀 useXxx

注意： hook不可以嵌套使用

// 自定义Hook   src/hooks/index.ts
import { useDebugValue, useEffect, useState } from "react";
const useDemo=(Flag:boolean)=>{
    const [txt,setText]=useState<string>('');
    useEffect(()=>{
        Flag? setText('进入我心里') :setText('QNMD')
    },[])
    useDebugValue('Flag')
    return txt
}

export {useDemo}

自定义Hook库：

  1. https://ahooks.js.org/zh-CN/
  2. https://github.com/Junscuzzy/useHooks.ts
梦境半小时
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react hooks
weixin_41269811的博客
10-10 511
一、react hooks的作用 react hooks 是react 16.8的功能，对函数型组件进行增强，让函数组件可以存储状态，可以拥有处理副作用的能力。让开发者在不使用类组件的情况下，实现相同的功能。 二、react hook要解决的问题 react hooks的产生是为了解决react 类组件的不足，react 类组件的不足主要表现在以下方面： 缺少逻辑复用机制：react 类组件中，为了实现逻辑复用机制，通常使用的是高阶组件和渲染属性，为了实现逻辑复用，增加了无实际渲染效果的组件，增加了
React Hooks
Promise_debug的博客
12-31 712
个人近期class组件用的比较多，看了一些文章结合着复习一下hooks React的组件创建方式，一种是类组件，一种是纯函数组件 纯函数组件有着类组件不具备的多种特点： 例如： 纯函数组件没有状态 纯函数组件没有生命周期 纯函数组件没有this 只能是纯函数 这就注定，我们所推崇的函数组件，只能做UI展示的功能，涉及到状态的管理与切换，我们不得不用类组件或者redux，但我们知道类组件的也是有缺点的，比如，遇到简单的页面，你的代码会显得很重，并且每创建一个类组件，都要去继承一个React实例，
React Hooks 全解: 常用 Hooks 及使用场景详解
笔记、经验、日常分享
04-13 1897
React 中常用的 10 个 Hooks,包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useLayoutEffect、useImperativeHandle 和 useDebugValue。这些 Hooks 涵盖了状态管理、副作用处理、性能优化、DOM 操作等各个方面,为开发者提供了强大的工具,大幅提高了开发效率和代码质量。让我们一起探索 React Hooks 的强大功能,提升您的 React 开发水平。
React Hooks 实战案例
程序边界
10-29 5791
在 React 之前的版本中，组件要么是函数组件，要么是类组件。函数组件可以使用纯函数的方式编写，但是没有状态（state）和其他 React 特性；类组件则可以拥有状态和其他 React 特性，但是需要使用 class 语法来定义。React Hooks 就是在函数组件中引入了状态和其他 React 特性的工具。useState：在函数组件中添加状态，相当于在类组件中使用 this.state。
【React】react函数式编程常用hooks讲解
工作的日常记录和平凡的生活分享
05-29 2211
React Hooks 是 React 16.8 版本引入的一项重要特性,它极大地简化和优化了函数组件的开发过程。React 中常用的 Hooks,包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useLayoutEffect等。这些 Hooks 涵盖了状态管理、副作用处理、性能优化、DOM 操作等各个方面,为开发者提供了强大的工具。
React Hooks详解
YuLong的博客
11-02 2万+
文章目录React HooksHooks简介Hook函数（9种）自定义Hooks React Hooks Hooks简介 介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。 但是，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点： 纯函数组件没有状态 纯函数组件没有生命周期 纯函数组件没
React hooks
subsistent的博客
01-11 172
Hooks 是React在16.8版本中出的一个新功能，本质是一种函数，可以实现组件逻辑复用，让我们在函数式组件中使用类组件中的状态、生命周期等功能，hooks的名字都是以use开头。
浅析React Hooks原理
weixin_50964668的博客
08-22 2553
React Hooks 简介 React Hooks 是 React 16.8 以及之后版本的产物，React Hooks 就是一堆钩子函数，不同的钩子函数提供了不同的功能，React 通过这些钩子函数对函数型组件进行增强。Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 React 特性。 你还可以构建自己的 Hooks, 跨组件共享可重用的有状态逻辑。 践行代数效应 React 核心成员 Sebastian Markbåge (Hooks 的发明者)曾说：我们在 React
React Hooks的使用
Han_Zhou_Z的博客
03-28 979
一、React Hooks的使用 1、React的组件 React的组件创建方式，一种是类组件，一种是纯函数组件 （1）类组件：class 类名 extends React.Component{} （2）函数组件：function 函数名([参数]){} 2、函数组件和类组件的区别 （1）函数组件没有状态(state)，类组件有 （2）函数组件没有生命周期,类组件有(挂载、更新、销毁) （3）函数组件没有this，类组件有 注意：函数组件更适合做UI展示，类组件更适合做复杂的业务逻辑组件
【一天时间|React Hooks】在 React 项目中全量使用 Hooks
热门推荐
江拥羡橙的博客
10-10 8万+
此篇文章整理了在 React 项目开发中常用的一些 Hooks使用Hooks能为开发提升不少效率，但并不代表就要抛弃，依旧还有很多场景我们还得用到它，比如需要封装一个公共的可继承的组件，当然通过自定义 hooks 也能将一些共用的逻辑进行封装，以便再多个组件内共用。下期更新在React 中自定义 Hooks 的应用场景，主要讲一些 Hooks 的高阶应用。
React Hooks 使用一次调用的函数侦听鼠标按下或抬起并单击事件
06-08
使用-mouse-action React Hooks 使用一次调用的函数来侦听鼠标按下或抬起以及单击事件。 示例 此钩子可用于创建快速可用的下拉按钮。 安装 npm install use-mouse-action Usage import useMouseAction from 'use-...
react-hooks-axios:自定义React Hooks for Axios.js
04-28
react-hooks-axios 自定义React Hooks for Axios.js安装注意：确保已安装正确版本的react(>= v16.8.0)和react-dom(>= v16.8.0) 。npm npm install --save @use-hooks/axios纱yarn add @use-hooks/axios原料药参量/**...
React Redux 绑定与 React Hooks 和代理
06-08
有几个与此 repo 相关的项目。 这是它们的索引。 react-react-redux v5-alpha (this repo)：它有一个实验性的 react...react-react-redux 使用 React Hooks 和 Proxy 绑定 React Redux 如果您正在寻找非 Redux 库，请访
react hooks ppt
10-08
react hooks
React Hooks with Immer 中的简单不变性。
06-08
React Immer Hooks 在带有 Immer 的 React Hooks 中轻松实现不变性。注意：React Hooks 目前是一个 RFC 提案，可能会发生变化。您至少需要 [email protected] 才能使用此功能。安装 yarn add react-immer-hooks 用法...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值