react使用usestate踩坑

usestate的常规用法
在react框架中，不适用类组件，使用函数式组件又想自定义数据维护业务开发的时候，就需要使用react提供的hook来完成。usestate就是最常见的一种hook。

const [name,setName] = useState('dx');
setName（'dx1'）

中括号实际是一个解构运算，第一个name是设置的值，第二个setName是只能用来改变name的方法。

useState遇到的坑
1、useState不适合复杂对象的更改。
因为useState不能像setState那样进行合并更新，当使用useState第二个参数进行数据更新的时候，必须传入一个完整的结构，而不仅仅只是改变的那一部分。

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 ：不能在循环，条件，嵌套函数等中调用useState()。
在多个useState()调用中，渲染之间的调用顺序必须相同。
仅从React 函数调用 Hook:必须仅在函数组件或自定义钩子内部调用useState()。