react中useState、useRef、变量之间的区别

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

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

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

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

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

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

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

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

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