1.react useState使用与常见问题
文章目录
- 0. 取消批处理合并更新, render 2次
- 1. 合并更新,setCount(异步更新) 3次相当于1次, count值为1
- 2. 如何取消批处理合并,让值累加?,改为回调函数写法,内部会依次执行函数, 执行3次 count值为3
- 3. 异步更新,获取异步更新的值?useEffect
- 4.利用扩展运算符的形式来解决对象修改的问题
- 5. 初始值大量计算,优化
- 小结
用于为函数组件引入状态
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style><script src="../react.development.js"></script><script src="../react-dom.development.js"></script><script src="../babel.min.js"></script><script src="../lodash.min.js"></script>
</head><body><div id="app"></div><script type="text/babel">let 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)=> count+1)// setCount((count)=> count+1)// setCount((count)=> count+1)// 3. 异步更新,获取异步更新的值?// 在setCount执行后,直接获取值,发现是更新前的值.如何修复?// 在类组件中,是通过setState,的第二个参数,在回调函数中获取同步数据// 函数组件中useState,没有第二个参数获取这个同步更新的值, 需要使用useEffect,监听,获取同步更新的值// 既然要进行自动批处理操作，所以函数是异步的// useState()：对应响应式数据的修改函数是没有第二个参数的，所以要监听数据改变后的时机，在函数组件中是通过 useEffect() 来实现的// setCount(count + 1, ()=>{ // ✖// console.log(count)// })}console.log(123);return (<div><button onClick={handleClick}>点击</button><div>hello world, { count }, { msg }</div></div>);}let element = (<Welcome />);root.render(element)</script>
</body></html>
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)=> count+1)// setCount((count)=> count+1)// setCount((count)=> count+1)
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会遇到的一些问题,与优化技巧