本文介绍: 函数组件函数作用域,每次render时,声明方法生成新的引用声明的普通变量会重新声明并赋值初始值,而useRef和useState会保留状态组件更新不会改变之前的状态可以保存状态。值变化,会render视图更新setState是异步的,同一个函数设置的,不能实时获取最新的值。组件更新不会改变之前的状态,可以保存状态。设置的值是同步的,同一个函数内设置的,能实时获取最新的值。使用场景: 如果我们只是想保存状态不影响视图更新,而且可以同步更新&获取我们的状态,那么就使用 useRef。

函数组件有函数作用域,每次render时,声明的方法生成新的引用,声明的普通变量会重新声明并赋值初始值,而useRef和useState会保留状态。

useState、useRef、变量区别
1. useState
组件更新不会改变之前的状态,可以保存状态。值变化,会render,视图更新setState是异步的,同一个函数内设置的,不能实时获取最新的值。

const [state, setState] = useState(0)
const fn = () => {
    setState(1)
    console.log(state) //输出0
}

使用场景: 当我们需要在状态改变的时候重新渲染视图,那么我们使用 useState 来保存我们的状态

2. useRef保存的值
组件更新不会改变之前的状态,可以保存状态。值变化,不会render,视图不会更新。设置的值是同步的,同一个函数内设置的,能实时获取到最新的值。

const num = useRef(0)
const fn = () => {
    num.current = 1
    console.log(num.current) //输出1
}

使用场景: 如果我们只是想保存状态不影响视图更新,而且可以同步更新&获取我们的状态,那么就使用 useRef。
注意事项

ref.current 不可以作为其他 hooks(useMemo, useCallback, useEffect依赖项;
ref.current 的值发生变更并不会造成 re-render, Reactjs 并不会跟踪 ref.current 的变化。
3. 变量组件内)
变量在每次组件重新渲染的时候都会被重新进行赋值初始值,所以如果你想要保留之前操作的状态的话就不要使用变量。
使用场景建议组件内不使用

3. 变量(组件外)
组件外定义global 变量,是属于全局的。如果代码中有多个相同的组件,那这个 global 变量在全局是同一个,他们会互相影响
 

参考react中useState、useRef、变量之间的区别_useref和usestate区别-CSDN博客

原文地址:https://blog.csdn.net/WJLcomeon/article/details/134721198

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_20056.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注