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] }

“react中使用usestate踩坑如何解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！