React中如何避免useState使用陷阱并有效解决？

本文共计1655个文字，预计阅读时间需要7分钟。

目录+ useState 常规用法+ useState 遇到的坑 1. useState 不适合复杂对象的修改 2. useState 异步回调的问题 3. 根据hook规则的 useState 使用限制 4. 使用 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的方法。