在本地用create-react-app創(chuàng)建了個項目，通過一個有狀態(tài)組件（計數(shù)器）的實例來學(xué)習(xí)

useState

一.

介紹：react自帶的hook函數(shù)，功能類似于之前的setstate函數(shù)
語法：

const [ 狀態(tài)變量,狀態(tài)函數(shù) ] = useState(狀態(tài)初始值) 

優(yōu)勢：代碼簡潔，提高效率

二.看一下實例代碼

類組件寫法：

image.png

方法組件寫法：

image.png

三.總結(jié)

怎么理解useState，寫法上是個數(shù)組解構(gòu)，功能上就是之前的setState

  const [ count , setCount ] = useState(0);

  //  其實就是對數(shù)組的結(jié)構(gòu)，可拆分為如下：
  let _useState = userState(0)
  let count = _useState[0]
  let setCount = _useState[1]

深入(暫存）

setState有哪些特性，useState是否有這些特性？

使用useState的時候只賦了初始值，并沒有綁定任何的key,那React是怎么保證這三個useState找到它自己對應(yīng)的state呢

useEffect

useEffect是異步執(zhí)行，原來的是同步執(zhí)行
useEffect和各個生命周期的對比：

基本使用
useEffect的解綁
useEffect的第二個參數(shù)

深入：
在函數(shù)組件中，也不再區(qū)分mount和update兩個狀態(tài)
使用function的形式來聲明組件，失去了shouldCompnentUpdate（在組件更新之前）這個生命周期，也就是說我們沒有辦法通過組件更新前條件來決定組件是否更新
而且在函數(shù)組件中，也不再區(qū)分mount和update兩個狀態(tài)，這意味著函數(shù)組件的每一次調(diào)用都會執(zhí)行內(nèi)部的所有邏輯，就帶來了非常大的性能損耗

useEffect 會在每次渲染后都執(zhí)行嗎？ 是的，默認情況下，它在第一次渲染之后和每次更新之后都會執(zhí)行

image.png

useContext的使用

易錯點

1.useContext是新增的Hook函數(shù)，目前版本（16.8）里只能在function函數(shù)體內(nèi)使用，不要在class組件內(nèi)使用，也不要在條件語句內(nèi)使用
2.Context需要在多個文件中傳遞數(shù)據(jù)，所以要在定義Context的地方加入export，在需要使用數(shù)據(jù)地方import進來，注意import的時候一定要加上花括號{CountContext}

3.不要在一個文件中provider提供完數(shù)據(jù)后，馬上useContext消費數(shù)據(jù)，可能會取不到值。(為什么？)

useReducer的使用

（看demo中的Example.js）

學(xué)完useContext和useReducer之后我們會思考，是否可以用這兩個實現(xiàn)redux呢？

useContext負責(zé)傳值，useReducer負責(zé)處理數(shù)據(jù)

context的值變化會不會渲染？

最后準(zhǔn)備一個實例，給大家輪著敲，先定好要做的各個小功能