react中useState、useRef、变量之间的区别
数组件有函数作用域,每次render时,声明的方法会生成新的引用,声明的普通变量会重新声明并赋值初始值,而useRef和useState会保留状态。
1.useState 组件更新不会改变之前的状态,可以保存状态。值变化,会render,视图会更新,setState是异步的,同一个函数内设置的,不能实时获取到最新的值。
使用场景: 当我们需要在状态改变的时候重新渲染视图,那么我们就使用 useState 来保存我们的状态
2.useRef保存的值 组件更新不会改变之前的状态,可以保存状态。值变化,不会render,视图不会更新。设置的值是同步的,同一个函数内设置的,能实时获取到最新的值。
使用场景: 如果我们只是想保存状态不影响视图更新,而且可以同步更新&获取我们的状态,那么就使用 useRef。
注意事项:ref.current 不可以作为其他 hooks(useMemo, useCallback, useEffect)依赖项;。
ref.current 的值发生变更并不会造成render, Reactjs 并不会跟踪 ref.current 的变化。
3.变量(组件内) 变量在每次组件重新渲染的时候都会被重新进行赋值为初始值,所以如果你想要保留之前操作的状态的话就不要使用变量。
import styles from './index.less'; import { Button } from 'antd'; import { useRef, useState } from 'react'; const HomePage = () => { const [state, setState] = useState(0) const num = useRef(0) const fn1 = () => { setState(state => ++state) console.log(state) //输出更新前的值 } const fn2 = () => { num.current += 1 console.log(num.current) //输出1 } console.log('渲染组件渲染组件渲染组件渲染组件渲染组件渲染组件') return <div> <h2>react中useState、useRef、变量之间的区别</h2> <h3>函数组件有函数作用域,每次render时,声明的方法会生成新的引用,声明的普通变量会重新声明并赋值初始值,而useRef和useState会保留状态。</h3> <div>1.useState 组件更新不会改变之前的状态,可以保存状态。值变化,会render,视图会更新,setState是异步的,同一个函数内设置的,不能实时获取到最新的值。</div> <Button onClick={fn1} type="primary" size="small">useState</Button> <div>使用场景: 当我们需要在状态改变的时候重新渲染视图,那么我们就使用 useState 来保存我们的状态</div> <div>2.useRef保存的值 组件更新不会改变之前的状态,可以保存状态。值变化,不会render,视图不会更新。设置的值是同步的,同一个函数内设置的,能实时获取到最新的值。</div> <Button onClick={fn2} type="primary" size="small">useRef</Button> <div>使用场景: 如果我们只是想保存状态不影响视图更新,而且可以同步更新&获取我们的状态,那么就使用 useRef。</div> <div>注意事项:ref.current 不可以作为其他 hooks(useMemo, useCallback, useEffect)依赖项;。</div> <div> ref.current 的值发生变更并不会造成render, Reactjs 并不会跟踪 ref.current 的变化。</div> <div>3.变量(组件内) 变量在每次组件重新渲染的时候都会被重新进行赋值为初始值,所以如果你想要保留之前操作的状态的话就不要使用变量。 </div> </div> ; }; export default HomePage;