React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react使用usestate踩坑

react中使用usestate踩坑及解决

作者:可缺不可滥

这篇文章主要介绍了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]
}

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

您可能感兴趣的文章:
阅读全文