react中useState、useRef之间的区别

今天写代码用useState,数据总是差一步,同学提醒我他是异步,我恍然大悟,用useRef就好了

记录一下他俩的区别

1. useState

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

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

2. useRef保存的值

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

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

你可能感兴趣的:(react.js,javascript,前端)