网站建设文案怎么设计,国外html5网站模板,网站制作公司起名,关于网站开发的请示文章目录 1. 副作用2.其他内置hooks2.1 useEffect2.2 useRef2.3useMemo2.4 useCallback 3.自定义hooks4. 第三方hooks5. hooks使用原则6. hooks闭包陷阱7. 总结结语 1. 副作用
当组件渲染完成时#xff0c;加载一个Ajax网络请求当某个state更新时#xff0c;加载一个Ajax网络… 文章目录 1. 副作用2.其他内置hooks2.1 useEffect2.2 useRef2.3useMemo2.4 useCallback 3.自定义hooks4. 第三方hooks5. hooks使用原则6. hooks闭包陷阱7. 总结结语 1. 副作用
当组件渲染完成时加载一个Ajax网络请求当某个state更新时加载一个Ajax网络请求
示例
const List2: FC () {console.log(加载Ajax网络请求。。。);... 控制台如下图所示
分析函数式组件任何state更新都会重新执行函数组件初次渲染也会执行函数。
解决这种情况通过如下其他hooks完成。
2.其他内置hooks
2.1 useEffect
useEffect用法
解决“当组件渲染完成时加载一个Ajax网络请求”问题如下所示: useEffect(() {console.log(渲染完成);}, []);
// 格式
useEffect(setup, dependencies?)
useEffect(func, [])组件渲染完成执行一次。 参数分析 func函数 []依赖于…触发默认”空“当前组件。 useEffect执行只依赖于[]中指定的变量,可以是多个任一一个变量更新都触发函数执行。示例如下 useEffect(() {console.log(渲染完成);}, []);useEffect(() {console.log(questionList change);}, [questionList]);执行组件增、改、删打印questionList change 组件销毁时触发useEffect,QuestionCard.tsx如下 useEffect(() {console.log(QuestionCard mounted);return () {console.log(QuestionCard unmounted id);};}, []);控制台打印如下所示 useEffect监听react组件的声明周期创建、更新、销毁等。 useEffect组件执行创建-销毁-在创建原因从v18版本开始在开发环境下会执行该过程在生成环境中只执行一次。 yarn build
把打包好的文件放置在nginx配置的web路径下如下图所示
2.2 useRef
在 React 开发中开发者常常需要直接操作 DOM 元素或存储临时数据但 React 的状态管理机制如 useState有时无法满足这些需求。这时一个名为 useRef 的 Hook 就像一位灵活的“中间人”在虚拟 DOM 与真实 DOM 之间架起了一座桥梁。本文将深入探讨 useRef 的核心原理、使用场景及进阶技巧帮助开发者高效利用这一工具解决实际问题。
什么是 useRef
useRef 是 React 提供的一个 Hook用于创建可变的引用reference其核心特性是
不会触发组件重渲染修改 useRef 的值不会导致组件重新渲染直接访问 DOM 元素通过 ref 属性绑定到 DOM 元素获取其真实引用存储临时数据适合保存不需要触发 UI 更新的临时变量。
示例
import { FC, useRef } from react;const Demo: FC () {const inputRef useRefHTMLInputElement(null);function selectInput() {const inputEle inputRef.current;inputEle inputEle.select();}return (divinput ref{inputRef} defaultValuehello world /button onClick{selectInput} 点击选中/button/div);
};export default Demo;一般用于操作DOM也可传入普通JS变量单更新不会触发rerender
2.3useMemo
函数组件每次state更新都会重新执行函数useMemo可以缓存数据不用每次执行函数都重新生成可用于计算量较大的场景缓存提高性能
import { FC, useState, useMemo } from react;
const Demo: FC () {console.log(demo...);const [num1, setNum1] useState(10);const [num2, setNum2] useState(20);const [text, setText] useState(hello);const sum useMemo(() {console.log(sum use memo );return num1 num2;}, [num1, num2]);return (p{sum} /pp{num1}buttononClick{() {setNum1(num1 1);}}add num1/button/pp{num2}buttononClick{() {setNum2(num2 1);}}add num2/button/pdivinput onChange{(e) setText(e.target.value)} value{text} //div/);
};export default Demo;2.4 useCallback
和useMemo作用一样专门用于缓存函数
示例
import { FC, useState, useCallback } from react;const Demo: FC () {const [text, setText] useState(hello);const fn1 () console.log(fn1 text , text);const fn2 useCallback(() {console.log(fn2 text , text);}, [text]);return (divbutton onClick{fn1}fn1/buttonhr /button onClick{fn2}fn2/button/divdivinput onChange{(e) setText(e.target.value)} value{text} //div/);
};export default Demo;缓存性能优化提示时间效率。
3.自定义hooks
内置hooks保证基础的功能内置hooks灵活配合实现业务功能抽离公共部分自定义hooks或者第三方hooks-复用代码
代码演示1修改网页标题
UseTitle.ts
import { useEffect } from react;function useTitle(title: string) {useEffect(() {document.title title;}, []);
}export default useTitle;App.tsx
import useTitle from ./hooks/UseTitle;function App() {useTitle(自定义标题1);return (/);
}export default App;代码演示2获取鼠标位置
useMouse.ts
import { useState, useEffect } from react;// 获取鼠标位置自定义hooks
function useMouse() {const [x, setX] useState(0);const [y, setY] useState(0);// 鼠标事件处理const mouseEventHandler (e: MouseEvent) {setX(e.clientX);setY(e.clientY);};useEffect(() {// 监听鼠标事件window.addEventListener(mousemove, mouseEventHandler);//组件销毁时一定要解绑DOM事件不解绑可能出现内存泄露问题return () {// 解绑鼠标事件与绑定时参数相同window.removeEventListener(mousemove, mouseEventHandler);};}, []);return { x, y };
}export default useMouse;App.tsx
import useMouse from ./hooks/useMouse;function App() {const { x, y } useMouse();return (p鼠标位置{x} {y}/p/);
}export default App;效果如下图所示
代码演示3模拟异步获取数据
useGetInfo.ts
import { useState, useEffect } from react;// 异步获取信息
function getInfo(): Promisestring {return new Promise((resolve) {setTimeout(() {resolve(new Date().toString());}, 1500);});
}const useGetInfo () {const [loading, setLoading] useState(true);const [info, setInfo] useState();useEffect(() {getInfo().then((info) {setLoading(false);setInfo(info);});}, []);return { loading, info };
};export default useGetInfo;App.tsx
import useGetInfo from ./hooks/useGetInfo;function App() {const { loading, info } useGetInfo();return (div{loading ? 加载中 : info}/div/);
}export default App;效果如下图所示
4. 第三方hooks
常用第三方hooks文档地址参考下面链接2和链接3
ahooksreact-use
以ahooks为例演示修改网页标题
import { useTitle } from ahooks;function App() {useTitle(自定义标题2);return (/);
}export default App;演示获取鼠标位置
import { useMouse } from ahooks;function App() {const { clientX, clientY } useMouse();return (p鼠标位置{clientX} {clientY}/p/);
}export default App;5. hooks使用原则
使用useXxx格式命名只能在两个地方调用hook组件内其他hook内。必须保证每次的调用顺序一致不能放在if for内部
6. hooks闭包陷阱
当异步函数获取state时可能不是当前最新的state可以使用useRef解决
演示示例
Cloususe.tsx
import { FC, useState, useRef, useEffect } from react;const Demo: FC () {const [count, setCount] useState(0);// 累加function add() {setCount(count 1);}// 打印countfunction printCount() {setTimeout(() {console.log(count);}, 2000);}return (p闭包陷阱/pdivp{count}/pbutton onClick{add}累加/buttonbutton onClick{printCount}打印/button/div/);
};export default Demo;App.tsx
import ClosureTrap from ./ClosureTrap;function App() {return (ClosureTrap //);
}export default App;效果如下图所示
解决方案
Clousure.tsx
import { FC, useState, useRef, useEffect } from react;const Demo: FC () {const [count, setCount] useState(0);const countRef useRef(0);useEffect(() {countRef.current count;}, [count]);// 累加function add() {setCount(count 1);}// 打印countfunction printCount() {setTimeout(() {console.log(countRef.current);}, 2000);}return (p闭包陷阱/pdivp{count}/pbutton onClick{add}累加/buttonbutton onClick{printCount}打印/button/div/);
};export default Demo;效果如下图所示
7. 总结
目标
学会内置hooks学会自定义hooks学会使用第三方hooks
知识点 自定义hooks useState Immerstate的不可变数据 useEffect useRef useMemo useCallback 第三方hooks ahooks react-use 闭包陷阱
注意事项
hooks是React最重要的内容之一初学者很难通过概念理解hooks必须配合大量实践练习hooks有很多规则遇到错误时先看是否违反规则
结语 ❓QQ:806797785 ⭐️仓库地址https://gitee.com/gaogzhen ⭐️仓库地址https://github.com/gaogzhen [1]useEffect[CP/OL].
[2]ahook官网[CP/OL].
[3]github react-use[CP/OL].
