react中使用usestate踩坑及解决
目录
- usestate的常规用法
- useState遇到的坑
- 1、useState不适合复杂对象的更改
- 2、useState异步回调的问题
- 3、根据hook的规则,使用useState的位置有限制
- 4、使用useState,回调函数形式更改数据
- 5、useState存入的值只是该值的引用(引用类型)
- 6、useState,如果保存引用数据,useEffect检测不到变化?
- 7、useState无法保存一个函数
- useState实现原理
usestate的常规用法
在react框架中,不适用类组件,使用函数式组件又想自定义数据维护业务开发的时候,就需要使用react提供的hook来完成。usestate就是最常见的一种hook。
const [name,setName] = useState('dx'); setName('dx1')
中括号实际是一个解构运算,第一个name是设置的值,第二个setName是只能用来改变name的方法。
useState遇到的坑
1、useState不适合复杂对象的更改
因为useState不能像setState那样进行合并更新,当使用useState第二个参数进行数据更新的时候,必须传入一个完整的结构,而不仅仅只是改变的那一部分。
如果你想让一个复杂的对象都能实现响应,可以分两种情况。
第一种情况,这个复杂的对象每次都是整体发生改变,那么也可以直接使用useState。
第二种情况,你只是想让许多的简单数据都放到一个对象里面,这样便于统一管理,那我建议,如果这些简单数据之间都没什么必然联系的话,还是分开创建多个state更好。
在编码的过程中,我们宁愿以空间复杂度换取时间复杂度,多创建几个变量和创建一个变量,在用户体验上并不会有太多的差别。
但如果数据过于复杂,diff算法找到对应的变化及发生响应,大规模的重新渲染,这一过程,将会导致用户体验下降。
2、useState异步回调的问题
当使用usestate对数据进行更新,并不能立刻获取到最新的数据。
const [name, setName] = useState('dx'); const handleTest = () => { console.log(name) // dx setName('dx1') console.log(name) // dx }
解决的办法。
一、配合useEffect使用
const [name, setName] = useState('dx'); const handleTest = () => { console.log(name) //dx setName('dx1') console.log(name)//dx } useEffect(() => { console.log(name) //dx1 },[name])
二、创建一个新的变量保存最新的数据
const [name, setName] = useState('dx'); const handleTest = () => { console.log(name) //dx const newName = "dx1" setName(newName) console.log(newName) //dx1 }
三、用一个函数包裹,不推荐使用,因为函数里面所有的东西都会全部重新定义
const [name, setName] = useState('dx'); function text () { const handleTest = () => { console.log(name) //dx const newName = "dx1" setName(newName) console.log(name) //dx console.log(newName) //dx1 } useEffect(() => { console.log(name) //dx1 },[name]) return ( <div> {name} //点击之前dx,点击按钮之后dx1 <button type="button" onClick={handleTest }>改变名字</button> </div> ) } console.log(name) //点击按钮之前dx,点击按钮之后dx1
3、根据hook的规则,使用useState的位置有限制
强调,所有的hook和自定义hook都遵循此规则。
仅顶层调用 Hook :不能在循环,条件,嵌套函数等中调用useState()。
在多个useState()调用中,渲染之间的调用顺序必须相同。
仅从React 函数调用 Hook:必须仅在函数组件或自定义钩子内部调用useState()。
4、使用useState,回调函数形式更改数据
const [a, setA] = useState({c:1}) /** oldA为之前的a,return为设置的新值 */ setA((oldA) => { return {c: oldA.c + 1} })
5、useState存入的值只是该值的引用(引用类型)
const textObj = {name:'dx'} const [useState1, setUseState1] = useState(textObj ) const [useState2, setUseState2] = useState(textObj ) /** usestate的操作不要放在函数的最外层,这里只是简单的代码展示,你可以将set操作放在某个函数里面 */ setUseState1((oldUseState1) => { oldUseState1.age = 18 return {...oldUseState1} }) useEffect(() => { /** 改变一个会导致两个都改变,深浅拷贝的问题 */ console.log(useState1) // {name: "dx", age: 18} console.log(useState2) // {name: "dx", age: 18} },[ useState1 ])
解决的方案
const textObj = {name:'dx'} const [useState1, setUseState1] = useState(textObj ) const [useState2, setUseState2] = useState(JSON.parse(JSON.stringify(textObj))) /** usestate的操作不要放在函数的最外层,这里只是简单的代码展示,你可以将set操作放在某个函数里面 */ setUseState1((oldUseState1) => { oldUseState1.age = 18 return {...oldUseState1} }) useEffect(() => { /** 改变一个会导致两个都改变,深浅拷贝的问题 */ console.log(useState1) // {name: "dx", age: 18} console.log(useState2) // {name: "dx"} },[ useState1 ])
6、useState,如果保存引用数据,useEffect检测不到变化?
const textObj = {name:'dx'} const [useState1, setUseState1] = useState(textObj) /** usestate的操作不要放在函数的最外层,这里只是简单的代码展示,你可以将set操作放在某个函数里面 */ setUseState1((oldUseState1) => { oldUseState1.age = 18 return oldUseState1 useEffect(() => { console.log(useState1) },[ useState1 ]) //结果是没有任何反应
解决方法
const textObj = {name:'dx'} const [useState1, setUseState1] = useState(textObj) /** usestate的操作不要放在函数的最外层,这里只是简单的代码展示,你可以将set操作放在某个函数里面 */ setUseState1((oldUseState1) => { oldUseState1.age = 18 /** 返回一个新的对象,useEffectc才能检测得到 */ return {...oldUseState1} useEffect(() => { console.log(useState1) // {name: "dx", age: 18} },[ useState1 ])
7、useState无法保存一个函数
你是否尝试着将函数的引用作为一个变量保存到useState中去呢?
比如:
const testFunciton1 = () => { console.log({name: 'dx',age: '18'}) } /** usestate保存函数测试 */ const [stateFunction, setstateFunction] = useState<() => void>(testFunciton1); useEffect(() => { console.log(stateFunction) }, [stateFunction])
打印结果
代码中从未调用过testFunciton1 ,结果testFunciton1却被执行了
useEffect打印出来的却是一个undefined。
稍微改动一下代码,再测试
const testFunciton1 = () => { console.log({name: 'dx',age: '18'}) return { name: 'yx', age: '17' } } /** usestate保存函数测试 */ const [stateFunction, setstateFunction] = useState<() => void>(testFunciton1); useEffect(() => { console.log(stateFunction) }, [stateFunction])
结果
很明显,在useState中,函数会自动调用,并且保存函数返回的值,而不能保存函数本身。
解决的方案
使用useState不能保存函数,那么可以使用useCallback这个hook。
/** useCallback,使用参数与useEffect一致 */ const testFunction = useCallback(() => { // useCallback返回的函数在useCallbak中构建 const testFunciton1 = () => { console.log({ name: 'dx', age: '18' }); return { name: 'yx', age: '17', }; }; return testFunciton1; }, []); useEffect(() => { console.log(testFunction()); }, [testFunction]);
结果
useState实现原理
前一段时间面试某大厂的时候,讲到了useState这个hook,要求简单写一下useState的实现原理,以下代码只是一个粗浅的原理。
function useState(init) { let state; // useState无法保存函数 if(typeof init === 'function') { state = init() } else { state = init } const setState = (change) => { // 判断一下是否传递过来的是函数 if(typeof change === 'function') { // 如果是函数,调用,并将之前的state传过去,接收到的返回值作为新的state并赋值 state = change(state) } else { // 如果不是函数,直接赋值 state = change; } } return [state, setState] }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。