建立网站站点,霞浦建设局总规网站,沃尔玛网上商城中国,网站系统优点文章目录 0. 取消批处理合并更新, render 2次1. 合并更新,setCount(异步更新) 3次相当于1次, count值为12. 如何取消批处理合并,让值累加?,改为回调函数写法,内部会依次执行函数, 执行3次 count值为33. 异步更新,获取异步更新的值?useEffect4.利用扩展运算符的形式来解决对象… 文章目录 0. 取消批处理合并更新, render 2次1. 合并更新,setCount(异步更新) 3次相当于1次, count值为12. 如何取消批处理合并,让值累加?,改为回调函数写法,内部会依次执行函数, 执行3次 count值为33. 异步更新,获取异步更新的值?useEffect4.利用扩展运算符的形式来解决对象修改的问题5. 初始值大量计算,优化小结 用于为函数组件引入状态 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/stylescript src../react.development.js/scriptscript src../react-dom.development.js/scriptscript src../babel.min.js/scriptscript src../lodash.min.js/script
/headbodydiv idapp/divscript typetext/babellet app document.querySelector(#app);let root ReactDOM.createRoot(app);let { flushSync } ReactDOM;let { useState, useEffect } React;let Welcome (props){const initCount () {console.log(initCount);return 2*2*2;}// 5. 初始需要大量计算的情况可以写一个回调函数这样可以惰性加载函数只让函数调用一次const [count, setCount] useState((){return initCount();});const [msg, setMsg] useState(hello);// 4.利用扩展运算符的形式来解决对象修改的问题// const [info, setInfo] useState({// username: xiaoming,// age: 20// })// setInfo({// ...info,// username: xiaoqiang// })const handleClick () {//0. 取消批处理合并更新, render 2次// flushSync((){// setCount(count 1)// })// flushSync((){// setMsg(hi)// })// 1. 合并更新,setCount(异步更新) 3次相当于1次, count值为1// setCount(count 1)// setCount(count 1)// setCount(count 1)// 2. 如何取消批处理合并,让值累加?,改为回调函数写法,内部会依次执行函数, 执行3次 count值为3// setCount((count) count1)// setCount((count) count1)// setCount((count) count1)// 3. 异步更新,获取异步更新的值?// 在setCount执行后,直接获取值,发现是更新前的值.如何修复?// 在类组件中,是通过setState,的第二个参数,在回调函数中获取同步数据// 函数组件中useState,没有第二个参数获取这个同步更新的值, 需要使用useEffect,监听,获取同步更新的值// 既然要进行自动批处理操作所以函数是异步的// useState()对应响应式数据的修改函数是没有第二个参数的所以要监听数据改变后的时机在函数组件中是通过 useEffect() 来实现的// setCount(count 1, (){ // ✖// console.log(count)// })}console.log(123);return (divbutton onClick{handleClick}点击/buttondivhello world, { count }, { msg }/div/div);}let element (Welcome /);root.render(element)/script
/body/html0. 取消批处理合并更新, render 2次 // flushSync((){// setCount(count 1)// })// flushSync((){// setMsg(hi)// })1. 合并更新,setCount(异步更新) 3次相当于1次, count值为1 // setCount(count 1)// setCount(count 1)// setCount(count 1)2. 如何取消批处理合并,让值累加?,改为回调函数写法,内部会依次执行函数, 执行3次 count值为3 // setCount((count) count1)// setCount((count) count1)// setCount((count) count1)3. 异步更新,获取异步更新的值?useEffect 用useEffect监听同步 // 在setCount执行后,直接获取值,发现是更新前的值.如何修复? // 在类组件中,是通过setState,的第二个参数,在回调函数中获取同步数据// 函数组件中useState,没有第二个参数获取这个同步更新的值, 需要使用useEffect,监听,获取同步更新的值// 既然要进行自动批处理操作所以函数是异步的// useState()对应响应式数据的修改函数是没有第二个参数的所以要监听数据改变后的时机在函数组件中是通过 useEffect() 来实现的// setCount(count 1, (){ // ✖// console.log(count)// })4.利用扩展运算符的形式来解决对象修改的问题 // const [info, setInfo] useState({// username: xiaoming,// age: 20// })// setInfo({// ...info,// username: xiaoqiang// })5. 初始值大量计算,优化 初始需要大量计算的情况可以写一个回调函数这样可以惰性加载函数只让函数调用一次 const [count, setCount] useState((){return initCount();});const [msg, setMsg] useState(hello);小结
讨论了下useState会遇到的一些问题,与优化技巧
