react中使用usestate踩坑及解决
更新时间：2022年08月05日 08:51:27 作者：可缺不可滥
这篇文章主要介绍了react中使用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]
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
React将组件（component）看成一个状态机（State Machines），通过其内部自定义的状态（State）和生命周期（Lifecycle）实现并与用户交互，维持组件的不同状态2022-09-09
zustand是一个用于状态管理的小巧而强大的库,本文主要介绍了React项目中使用zustand状态管理的实现,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
解决React报错Expected an assignment or funct
这篇文章主要为大家介绍了React报错Expected an assignment or function call and instead saw an expression解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家详细介绍了React拖拽调整大小的组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
由于在项目开发过程中，我们往往时需要调用子组件中的方法，这篇文章主要介绍了React中使用TS完成父组件调用子组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
React Native按钮Touchable系列组件使用教程示例
这篇文章主要为大家介绍了React Native按钮Touchable系列组件使用教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
本文主要介绍了React的相关知识，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-07-07
在React应用中，为了让数据在组件间共享，常见的方式是让它们以props的形式自顶向下传递，如果数据要在组件树不同层级共享，那么这些数据必须逐层传递直到目的地，Context如同管道，它将数据从入口直接传递到出口，使用Context能避免“prop-drilling”2023-06-06
评分插件在购物的应用中经常可以看得到，但是用着别人的总是没有自己写的顺手，本文就使用React实现星星评分组件，感兴趣的可以了解一下2021-06-06
最新评论