长文慎入，一文总结归纳 React Hooks 常用场景

最新推荐文章于 2024-05-30 15:14:59 发布
最新推荐文章于 2024-05-30 15:14:59 发布
阅读量967 收藏 27
点赞数 11
文章标签： react.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84435909/article/details/138250765
版权

npm i eslint-plugin-react-hooks --save-dev

// 2、eslint 配置

{

“plugins”: [

// …

“react-hooks”

],

“rules”: {

// …

“react-hooks/rules-of-hooks”: “error”,

“react-hooks/exhaustive-deps”: “warn”

}

}

7、一些重点

  • （1）可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate和 componentWillUnmount这三个函数的组合；

  • （2）在 React 的 class 组件中，render 函数是不应该有任何副作用的；一般来说，在这里执行操作太早了，我们基本上都希望在 React 更新 DOM 之后才执行我们的操作。

三、useContext

用来处理多层级传递数据的方式，在以前组件树中，跨层级祖先组件想要给孙子组件传递数据的时候，除了一层层 props 往下透传之外，我们还可以使用 React Context API 来帮我们做这件事。使用例子如下所示 （1）使用 React Context API，在组件外部建立一个 Context

import React from ‘react’;

const ThemeContext = React.createContext(0);

export default ThemeContext;

（2）使用 Context.Provider提供了一个 Context 对象，这个对象可以被子组件共享

import React, { useState } from ‘react’;

import ThemeContext from ‘./ThemeContext’;

import ContextComponent1 from ‘./ContextComponent1’;

function ContextPage () {

const [count, setCount] = useState(1);

return (

<ThemeContext.Provider value={count}>

</ThemeContext.Provider>

<button onClick={() => setCount(count + 1)}>

Click me

);

}

export default ContextPage;

（3）useContext()钩子函数用来引入 Context 对象，并且获取到它的值 // 子组件，在子组件中使用孙组件

import React from ‘react’;

import ContextComponent2 from ‘./ContextComponent2’;

function ContextComponent () {

return (

);

}

export default ContextComponent;

// 孙组件，在孙组件中使用 Context 对象值

import React, { useContext } from ‘react’;

import ThemeContext from ‘./ThemeContext’;

function ContextComponent () {

const value = useContext(ThemeContext);

return (

useContext:{value}

);

}

export default ContextComponent;

四、useReducer

1、基础用法

比 useState 更适用的场景：例如 state 逻辑处理较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等；例子如下所示

import React, { useReducer } from ‘react’;

interface stateType {

count: number

}

interface actionType {

type: string

}

const initialState = { count: 0 };

const reducer = (state:stateType, action:actionType) => {

switch (action.type) {

case ‘increment’:

return { count: state.count + 1 };

case ‘decrement’:

return { count: state.count - 1 };

default:

throw new Error();

}

};

const UseReducer = () => {

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

return (

useReducer Count:{state.count}

<button onClick={() => { dispatch({ type: ‘decrement’ }); }}>useReducer 减少

<button onClick={() => { dispatch({ type: ‘increment’ }); }}>useReducer 增加

);

};

export default UseReducer;

2、惰性初始化 state

interface stateType {

count: number

}

interface actionType {

type: string,

paylod?: number

}

const initCount =0

const init = (initCount:number)=>{

return {count:initCount}

}

const reducer = (state:stateType, action:actionType)=>{

switch(action.type){

case ‘increment’:

return {count: state.count + 1}

case ‘decrement’:

return {count: state.count - 1}

case ‘reset’:

return init(action.paylod || 0)

default:

throw new Error();

}

}

const UseReducer = () => {

const [state, dispatch] = useReducer(reducer,initCount,init)

return (

useReducer Count:{state.count}

<button onClick={()=>{dispatch({type:‘decrement’})}}>useReducer 减少

<button onClick={()=>{dispatch({type:‘increment’})}}>useReducer 增加

<button onClick={()=>{dispatch({type:‘reset’,paylod:10 })}}>useReducer 增加

);

}

export default UseReducer;

五、Memo

如下所示，当父组件重新渲染时，子组件也会重新渲染，即使子组件的 props 和 state 都没有改变

import React, { memo, useState } from ‘react’;

// 子组件

const ChildComp = () => {

console.log(‘ChildComp…’);

return (

ChildComp…
);

};

// 父组件

const Parent = () => {

const [count, setCount] = useState(0);

return (

hello world {count}

);

};

export default Parent;

改进：我们可以使用 memo 包一层，就能解决上面的问题；但是仅仅解决父组件没有传参给子组件的情况以及父组件传简单类型的参数给子组件的情况（例如 string、number、boolean等）；如果有传复杂属性应该使用 useCallback（回调事件）或者 useMemo（复杂属性）

// 子组件

const ChildComp = () => {

console.log(‘ChildComp…’);

return (

ChildComp…
);

};

const MemoChildComp = memo(ChildComp);

六、useMemo

假设以下场景，父组件在调用子组件时传递 info 对象属性，点击父组件按钮时，发现控制台会打印出子组件被渲染的信息。

import React, { memo, useState } from ‘react’;

// 子组件

const ChildComp = (info:{info:{name: string, age: number}}) => {

console.log(‘ChildComp…’);

return (

ChildComp…
);

};

const MemoChildComp = memo(ChildComp);

// 父组件

const Parent = () => {

const [count, setCount] = useState(0);

const [name] = useState(‘jack’);

const [age] = useState(11);

const info = { name, age };

return (

hello world {count}

);

};

export default Parent;

分析原因：

点击父组件按钮，触发父组件重新渲染；父组件渲染，const info = { name, age } 一行会重新生成一个新对象，导致传递给子组件的 info 属性值变化，进而导致子组件重新渲染。

解决：

使用 useMemo 将对象属性包一层，useMemo 有两个参数：

  • 第一个参数是个函数，返回的对象指向同一个引用，不会创建新对象；

  • 第二个参数是个数组，只有数组中的变量改变时，第一个参数的函数才会返回一个新的对象。

import React, { memo, useMemo, useState } from ‘react’;

// 子组件

const ChildComp = (info:{info:{name: string, age: number}}) => {

console.log(‘ChildComp…’);

return (

ChildComp…
);

};

const MemoChildComp = memo(ChildComp);

// 父组件

const Parent = () => {

const [count, setCount] = useState(0);

const [name] = useState(‘jack’);

const [age] = useState(11);

// 使用 useMemo 将对象属性包一层

const info = useMemo(() => ({ name, age }), [name, age]);

return (

hello world {count}

);

};

export default Parent;

七 、useCallback

接着第六章节的例子，假设需要将事件传给子组件，如下所示，当点击父组件按钮时，发现控制台会打印出子组件被渲染的信息，说明子组件又被重新渲染了。

import React, { memo, useMemo, useState } from ‘react’;

// 子组件

const ChildComp = (props:any) => {

console.log(‘ChildComp…’);

return (

ChildComp…
);

};

const MemoChildComp = memo(ChildComp);

// 父组件

const Parent = () => {

const [count, setCount] = useState(0);

const [name] = useState(‘jack’);

const [age] = useState(11);

const info = useMemo(() => ({ name, age }), [name, age]);

const changeName = () => {

console.log(‘输出名称…’);

};

return (

hello world {count}

);

};

export default Parent;

分析下原因：

点击父组件按钮，改变了父组件中 count 变量值（父组件的 state 值），进而导致父组件重新渲染；父组件重新渲染时，会重新创建 changeName 函数，即传给子组件的 changeName 属性发生了变化，导致子组件渲染；

解决：

修改父组件的 changeName 方法，用 useCallback 钩子函数包裹一层， useCallback 参数与 useMemo 类似

import React, { memo, useCallback, useMemo, useState } from ‘react’;

// 子组件

const ChildComp = (props:any) => {

console.log(‘ChildComp…’);

return (

ChildComp…
);

};

const MemoChildComp = memo(ChildComp);

// 父组件

const Parent = () => {

const [count, setCount] = useState(0);

const [name] = useState(‘jack’);

const [age] = useState(11);

const info = useMemo(() => ({ name, age }), [name, age]);

const changeName = useCallback(() => {

console.log(‘输出名称…’);

}, []);

return (

hello world {count}

);

};

export default Parent;

八、useRef

以下分别介绍 useRef 的两个使用场景：

1、指向 dom 元素

如下所示，使用 useRef 创建的变量指向一个 input 元素，并在页面渲染后使 input 聚焦

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

tate(‘jack’);

const [age] = useState(11);

const info = useMemo(() => ({ name, age }), [name, age]);

const changeName = useCallback(() => {

console.log(‘输出名称…’);

}, []);

return (

hello world {count}

);

};

export default Parent;

八、useRef

以下分别介绍 useRef 的两个使用场景：

1、指向 dom 元素

如下所示，使用 useRef 创建的变量指向一个 input 元素，并在页面渲染后使 input 聚焦

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-iecsHhr1-1714203096765)]

2401_84435909
关注
  • 11
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react点滴yan
weixin_42201346的博客
06-07 686
掘金搜react https://juejin.im/search?query=React%20Developer%20Tools&type=all
web前端进阶架构师之路
m0_67537062的博客
03-26 4645
web前端架构师必学知识点，包含Vue、React、Electron、服务端渲染、微前端、前端性能优化、前端工程化、前端面试等方面的知识。
长文慎入，一文总结归纳 React Hooks 常用场景(2)
2301_82244509的博客
05-04 882
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[长文预警] 一文掌握React 渲染原理及性能优化
程序员成长指北
10-11 355
点击上方蓝字关注程序员成长指北，还可加入「技术交流群」共同进步如今的前端，框架横行，不掌握点框架的知识，出去面试都虚。我比较常用React， 这里就写了一篇 React...
你不知道的 React v18 的任务调度机制
React_Community的博客
04-18 549
React的任务调度机制是我早就想要探究但直到现在才基本捋清楚的一个议题。因为想要弄清楚React中任务的调度，需要的前置知识还是蛮多的，首先你要对jsx->vNode->fiber树和hooks的实现有源码级的了解，其次要对scheduler这个独立的包有源码级的了解，然后你才有可能探究React的任务调度。所以从我想了解到基本了解，已经有大概两年多的时间了...
从业务讲React Hook
前端开发博客
03-22 243
关注公众号前端开发博客，回复“加群”加入我们一起学习，天天进步原文地址：zhuanlan.zhihu.com/p/337846156作者：张立理背景在业务中，会有一个挺常见的场景，就是要...
拼多多和酷家乐面试总结(已拿offer)
LuckyWinty的博客
06-02 2369
前言离职原因看我这篇文章吧：离开蘑菇街后，我最近的一些想法，然后不得不去找工作恰饭呀。我目前面了五家公司：滴滴、蚂蚁、拼多多、酷家乐、字节跳动，拼多多和酷家乐基本已拿到 offer，蚂蚁...
web前端如何才能成为架构师
henhenha的博客
03-28 4718
前端学习资料，包含了Vue、React、Electron、服务端渲染、微前端、前端性能优化、前端工程化、前端面试等方面的知识
web前端如何提升自我
the_cleaner的博客
03-26 3991
web前端工程师自我提升学习资料，包含Vue、React、Electron、服务端渲染、微前端、前端性能优化、前端工程化、前端面试等方面的知识。
怎么样成为一个优秀的互联网BD（长文慎入）
02-26
简单点归纳，就是时间，切入点，体现形式。这几点就是区分一个BD好坏的关键。很多人抱怨说，我的机遇没有别人的好，你看某某某，业绩又好，提升又快，而我总是那么点背。如果这句话是出自一个BD之口，绝对会被人鄙视...
QML初学者文档 万字长文 一文读懂QML
05-04
QML初学者文档 万字长文 一文读懂QML
万字长文：一文看懂GPT风口，有哪些创业机会？
04-08
万字长文：一文看懂GPT风口，有哪些创业机会？
万字长文解密苹果A12芯片
01-19
在过去的几年里，苹果的芯片设计团队一直处于架构设计和制造工艺的前沿。苹果A12是该公司又跨越代际的飞跃，因为它号称是首款商用7nm芯片。 　在谈论工艺节点时，一般而言，数字越小，晶体管就越小。...
基于 React + Nest 全栈开发的后台系统
白雾茫茫丶
05-27 835
这篇文章介绍了一个基于React+Nest全栈开发的后台系统XmwAdmin。项目包括前端和后端技术栈，线上预览地址和登录信息。作者推荐使用pnpm包管理工具和特定的环境依赖。文章提供了项目的运行和编译代码，以及各个功能模块的介绍。还包括演示图和项目活动以及总结部分。数据库下载链接也提供了，该项目已完成后台的核心功能。
React UseMemo源码分析
hawk2014bj的博客
05-30 233
Memo 的原理是根据依赖项变化判断是否更新，数据存在 FiberNode 上进行集中控制，更新时从组件的 FiberNode 上获取上次记录的状态并与本次的状态进行比较，并根据比较结果进行相应的处理。
WEB三大主流框架之React
wangbo_angel的博客
05-30 682
React 是一个用于构建用户界面的开源JavaScript库，由Facebook开发并维护。它专注于构建单页应用程序（SPA）和移动应用程序的用户界面。React 以其组件化架构、虚拟DOM和声明式编程范式而闻名，这些特点使得它在开发大型和复杂的前端应用时非常高效。
react ant 表格实现 拖拽排序和多选
hyy的博客
05-28 310
3 多选功能ant官网也只提供了rowSelection方法 , 而rowSelection的位置总是在表格最左边 , 我需要让拖拽icon在最左边 , 多选功能在icon右边 , 目前问题如下 代码分为俩部分 , 一部分是父页面 , ( 父页面代码太多只显示了功能代码 ) 另一部分是封装的表格组件 ( 全部代码如下 )
React-表单受控绑定
最新发布
weixin_46479909的博客
05-30 213
2.通过value属性绑定状态，通过onChange属性绑定状态同步的函数。概念：使用React组件的状态（useState）控制表单的状态。1.准备一个React状态值。
android studio怎么放入长文
08-30
你可以将长文放入Android Studio中的多种方式，以下是其中几种常见的方法： 1. 创建一个文本文件：在项目结构中，右键点击你想要放置长文的目录，选择 "New" -> "File"。然后给文件命名，并将长文的内容粘贴到新...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值