reacthooks基础使用(React 小技巧教你如何摆脱hooks依赖烦恼)
类别:编程学习 浏览量:2993
时间:2022-03-31 19:15:46 reacthooks基础使用
React 小技巧教你如何摆脱hooks依赖烦恼react
项目中,很常见的一个场景:
const [watchValue, setWatchValue] = useState(''); const [otherValue1, setOtherValue1] = useState(''); const [otherValue2, setOtherValue2] = useState(''); useEffect(() => { doSomething(otherValue1, otherValue2); }, [watchValue, otherValue1, otherValue2]);
我们想要watchValue
改变的时候执行doSomething
,里面会引用其他值otherValue1
, otherValue2
。
这时有个让人烦恼的问题:
- 如果不把
otherValue1
,otherValue2
加入依赖数组的话,doSomething
里面很可能会访问到otherValue1
,otherValue2
旧的变量引用,从而发生意想不到的错误(如果安装hooks
相关eslint
的话,会提示警告)。 - 反之,如果把
otherValue1
,otherValue2
加入依赖数组的话,这两个值改变的时候doSomething
也会执行,这并不是我们想要的(我们只想引用他们的值,但不想它们触发doSomething
)。
把otherValue1
, otherValue2
变成ref
可以解决这个问题:
const [watchValue, setWatchValue] = useState(''); const other1 = useRef(''); const other2 = useRef(''); // ref可以不加入依赖数组,因为引用不变 useEffect(() => { doSomething(other1.current, other2.current); }, [watchValue]);
这样other1
, other2
的变量引用不会变,解决了前面的问题,但是又引入了一个新的问题:other1
, other2
的值current
改变的时候,不会触发组件重新渲染(useRef的current
值改变不会触发组件渲染),从而值改变时候界面不会更新!
这就是hooks
里面的一个头疼的地方,useState
变量会触发重新渲染、保持界面更新,但作为useEffect
的依赖时,又总会触发不想要的函数执行。useRef
变量可以放心作为useEffect
依赖,但是又不会触发组件渲染,界面不更新。
如何解决?
可以将useRef
和useState
的特性结合起来,构造一个新的hooks
函数: useStateRef
。
import { useState, useRef } from "react"; // 使用 useRef 的引用特质, 同时保持 useState 的响应性 type StateRefObj<T> = { _state: T; value: T; }; export default function useStateRef<T>( initialState: T | (() => T) ): StateRefObj<T> { // 初始化值 const [init] = useState(() => { if (typeof initialState === "function") { return (initialState as () => T)(); } return initialState; }); // 设置一个 state,用来触发组件渲染 const [, setState] = useState(init); // 读取value时,取到的是最新的值 // 设置value时,会触发setState,组件渲染 const [ref] = useState<StateRefObj<T>>(() => { return { _state: init, set value(v: T) { this._state = v; setState(v); }, get value() { return this._state; }, }; }); // 返回的是一个引用变量,整个组件生命周期之间不变 return ref; }
这样,我们就能这样用:
const watch = useStateRef(''); const other1 = useStateRef(''); const other2 = useStateRef(''); // 这样改变值:watch.value = "new"; useEffect(() => { doSomething(other1.value, other2.value); // 其实现在这三个值都是引用变量,整个组件生命周期之间不变,完全可以不用加入依赖数组 // 但是react hooks的eslint插件只能识别useRef作为引用,不加人会警告,为了变量引用安全还是加入 }, [watch.value, other1, other2]);
这样,watch, other1
,other2
有useRef
的引用特性,不会触发doSomething
不必要的执行。又有了useState
的响应特性,改变.value
的时候会触发组件渲染和界面更新。
我们想要变量改变触发doSomething
的时候,就把watch.value
加入依赖数组。我们只想引用值而不想其触发doSomething
的时候,就把变量本身加入数组。
以上就是React 小技巧教你如何摆脱hooks依赖烦恼的详细内容,更多关于React hooks依赖的资料请关注开心学习网其它相关文章!
您可能感兴趣
- react新手指引页面编写(React+TypeScript进行项目构建案例讲解)
- react的setstate第二个参数(示例详解react中useState的用法)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- linux虚拟内存实现需要哪六种机制(解析Linux高性能网络IO和Reactor模型)
- react常用设计模式(提高React界面性能的十个技巧)
- react 分页列表优化(使用react-beautiful-dnd实现列表间拖拽踩坑)
- react基础知识入门(浅谈React 的引入)
- react教程简介(react入门级详细笔记)
- vscode react jsx语法 开发环境(React-vscode使用jsx语法的问题及解决方法)
- react组件分析(react-diagram 序列化Json解读案例分析)
- react子组件的动态参数(浅谈React Component生命周期函数)
- react的动画实现(React实现动效弹窗组件)
- react表单组件怎么写(react antd实现动态增减表单)
- react路由组件怎么用(无废话快速上手React路由开发)
- reacthooks用法(详解React Hooks是如何工作的)
- react基础知识详解(如何深入理解React的ref 属性)
- 苏志燮赵恩静结婚,韩国四大公共财产变三人,这么快就有替补了(苏志燮赵恩静结婚)
- 《内在美》后,一大波新韩剧来袭,李钟硕朴信惠宋慧乔玄彬回归(一大波新韩剧来袭)
- 给孩子选购保温杯,注意这4个步骤,比颜值更重要(给孩子选购保温杯)
- 保温好 容量大 颜值高 保温杯你给娃娃买对了吗(保温好容量大颜值高)
- 《道德经》 人生避开骄狂,才能免去祸患(道德经人生避开骄狂)
- 郭麒麟(郭麒麟)
热门推荐
- mysql使用步骤(聊一聊MySQL角色Role功能)
- html5 video 事件(HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题)
- centosdocker安装教程(centos下docker安装及springboot远程发布docker的方法)
- mysql日志使用(MySQL 日志相关知识总结)
- 哪些Web设计影响用户体验
- php实战小实例(php实现推荐功能的简单实例)
- 纯css实现多级菜单(纯CSS实现可折叠树状菜单)
- yii2对比springboot(Yii框架实现对数据库的CURD操作示例)
- mysql根据子节点查询父节点(mysql 递归查找菜单节点的所有子节点的方法)
- vmware使用教程win10(VMware Workstation安装并安装WIN10操作系统连接外网步骤指导超详细教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9