1
azcvcza 2020-09-28 18:13:30 +08:00
我个人的看法是,hooks 是提供给虚拟机执行的闭包,而函数式组件就是给虚拟机多次执行的含有不同参数的函数,当打印了 1 之后,setFormData 触发重新渲染,再运行含有新参数的函数,然后发现 effect 中的函数已经执行过了,直接跳到 0,最后打印闭包中剩下没执行的 2 ?
|
2
onfuns 2020-09-28 18:17:41 +08:00
useState 里的 callback 调用其实是异步的,所以不能在调用 callback 后立马获取 console.log(2, 'formData', formData),这种写法是错误的。
|
3
JimmyChange 2020-09-28 19:14:52 +08:00
console.log(1, 'formData', formData)
setFormData(res) console.log(2, 'formData', formData) 调用 setFormData 会再次触发 render,输出 0 formData,但是 setFormData 结束后,后边的 console.log 还是会执行,输出 2 "formData" |
4
baxtergu 2020-09-29 09:23:49 +08:00
按照你的写法:
1 、useEffect 中的代码只会在组件 mount 以后执行一次,不管以后组件状态或者 props 怎么变 useEffect 中的代码只会执行 1 次。(也就是为什么 1 和 2 只会输出一次,而 0 会输出多次) 2 、useState 生成的 setState 的执行是**创建一个新的 state 为下一次 render 使用**。但是 useEffect 这次函数闭包里的 formData 是上一次的 state 也就是{},这一点跟类组件的 this.state 是完全不一样的。类组件的 this.state 保存的是状态对象的一个引用,但是用 useState 生成的 state 是通过闭包保存了执行 useEffect 时 state 的在函数执行上下文中的,也就是旧的 state 引用。每次重新 render 以后都会生成一个新的 state,而不是改变旧 state 的引用里的值。 |
5
cw2k13as 2020-10-12 11:09:33 +08:00
useEffect( () => {
}, [])只会执行一次,hook 保留的都是旧值,新建一个 useEffect( () => { console.log( 'formData', formData) }, [formData])才是获取新的值 |