在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
const [watchValue, setWatchValue] = useState(''); const [otherValue1, setOtherValue1] = useState(''); const [otherValue2, setOtherValue2] = useState(''); useEffect(() => { doSomething(otherValue1, otherValue2); }, [watchValue, otherValue1, otherValue2]); 我们想要 这时有个让人烦恼的问题:
把 const [watchValue, setWatchValue] = useState(''); const other1 = useRef(''); const other2 = useRef(''); // ref可以不加入依赖数组,因为引用不变 useEffect(() => { doSomething(other1.current, other2.current); }, [watchValue]); 这样 这就是 可以将 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]); 这样, 以上就是React 小技巧教你如何摆脱hooks依赖烦恼的详细内容,更多关于React hooks依赖的资料请关注极客世界其它相关文章! |
请发表评论