import React, { useEffect, useState } from 'react'; hook 是react 16.8的新增特性 ，他可以讓你不在編寫class的情況下shiystate以及react的特性 Hooks的出現，首先解決了以下問題： 告別了令人疑惑的生命周期 告別類組 ...
import React, { useEffect, useState } from 'react';
hook 是react 16.8的新增特性 ，他可以讓你不在編寫class的情況下shiystate以及react的特性 Hooks的出現，首先解決了以下問題：- 告別了令人疑惑的生命周期
- 告別類組件中煩人的this
- 告別繁重的類組件，回歸到了熟悉的函數組件
useState
1.基礎使用
import { useState } from 'react'
function App() {
// 參數：狀態初始值比如,傳入 0 表示該狀態的初始值為 0
// 返回值：數組,包含兩個值：1 狀態值（state） 2 修改該狀態的函數（setState）
const [count, setCount] = useState(0);
// 修改count內容
const modifyEvent = () => {
setCount(count + 1)
}
return (
<button onClick={() => modifyEvent()}>{count}</button>
)
}
export default App
2.狀態的讀取和修改執行流程與邏輯
讀取狀態：該方式提供的狀態，是函數內部的局部變數，可以在函數內的任意位置使用 修改狀態：1.setCount是一個函數，參數表示最新的狀態值
2.調用該函數後，將使用新值替換舊值
3.修改狀態後，由於狀態發生變化，會引起試圖變化 註意
事項：修改狀態的時候，一定要使用新的狀態替換舊的狀態，不能直接修改舊的狀態，尤其是引用類型
3. 組件的更新過程
函數組件使用 useState hook 後的執行過程，以及狀態值的變化1.組件第一次渲染
- 從頭開始執行該組件中的代碼邏輯
- 調用 useState(0) 將傳入的參數作為狀態初始值，即：0
- 渲染組件，此時，獲取到的狀態 count 值為： 0
2.組件第二次渲染
- 點擊按鈕，調用 setCount(count + 1) 修改狀態，因為狀態發生改變，所以，該組件會重新渲染
- 組件重新渲染時，會再次執行該組件中的代碼邏輯
- 再次調用 useState(0) ，此時 React 內部會拿到最新的狀態值而非初始值，比如，該案例中最新的狀態值為 1
- 再次渲染組件，此時，獲取到的狀態 count 值為：1
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0)
// 在這裡可以進行列印
console.log(count,'渲染了')
return (
<button onClick={() => { setCount(count + 1) }}>{count}</button>
)
}
export default App
4.使用規則
1.useState 函數可以執行多次，每次執行互相獨立，每調用一次為函數組件提供一個狀態function List(){ // 以字元串為初始值 const [name, setName] = useState('cp') // 以數組為初始值 const [list,setList] = useState([]) }
2.useState 註意事項
- 只能出現在函數組件或者其他hook函數中
- 能嵌套在if/for/其它函數中（react按照hooks的調用順序識別每一個hook）
