react中使用usestate踩坑及解决 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异步回调的问题
【react中使用usestate踩坑及解决】当使用usestate对数据进行更新，并不能立刻获取到最新的数据。

const [name, setName] = useState('dx'); const handleTest = () => {console.log(name) // dxsetName('dx1')console.log(name) // dx}

解决的办法。
一、配合useEffect使用

const [name, setName] = useState('dx'); const handleTest = () => {console.log(name) //dxsetName('dx1')console.log(name)//dx}useEffect(() => {console.log(name) //dx1},[name])

二、创建一个新的变量保存最新的数据

const [name, setName] = useState('dx'); const handleTest = () => {console.log(name) //dxconst newName = "dx1"setName(newName)console.log(newName) //dx1}

三、用一个函数包裹，不推荐使用，因为函数里面所有的东西都会全部重新定义

const [name, setName] = useState('dx'); function text () {const handleTest = () => {console.log(name) //dxconst newName = "dx1"setName(newName)console.log(name) //dxconsole.log(newName) //dx1}useEffect(() => {console.log(name) //dx1},[name])return ({name} //点击之前dx，点击按钮之后dx1) }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 = 18return {...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 = 18return {...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 = 18return oldUseState1useEffect(() => { 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]}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。