React學習（五）——React Hooks（一）

一、React Hooks簡介

React Hooks就是用函數的形式代替原來的繼承類的形式，并且使用預函數的形式管理state，有Hooks可以不再使用類的形式定義元件了。
           

與原始寫法對比：

二、useState

useState是react自帶的一個hook函數，它的作用是用來聲明狀态變量。

1、useState的聲明

useState這個函數接收的參數是狀态的初始值，它傳回一個數組。

const [ count , setCount ] = useState(0);
// 聲明一個count,初始值為0；
// 提供一個可修改count的狀态值的方法函數setCount
           

2、useState的讀取

在jsx文法中，直接使用{count}

3、useState的值的修改

直接調用setCount函數，這個函數接收的參數是修改過的新狀态值

補充：多狀态聲明

// 聲明多個的方法
const [ age , setAge ] = useState(18)
const [ sex , setSex ] = useState('男')
const [ work , setWork ] = useState('前端程式員')
           

React是怎麼保證這三個useState找到它自己對應的state呢

答：React是根據useState出現的順序來确定的

useState不能在if…else…這樣的條件語句中進行調用，必須要按照相同的順序進行渲染。

React Hooks不能出現在條件判斷語句中，因為它必須有完全一樣的渲染順序。

二、useEffct

1、代替常用聲明周期函數