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()。