課程大綱：

React Hooks培訓(xùn)

課程對 React Hooks 的鉤子函數(shù)做了全方位的分析，并且對舊的 Class 寫法和新的 Hooks 寫法在生命周期上進(jìn)行對比。

課程除了介紹 Hooks 之外，還會通過純 Hooks 函數(shù)組件的方式對 CNode 門戶網(wǎng)站進(jìn)行移動端頁面的重構(gòu)，

實(shí)戰(zhàn)過程中會介紹一些真實(shí)開發(fā)用到的一些技術(shù)棧。

1 React 簡介
2 useState
3 useContext
4 useMemo
5 自定義 Hooks
6 移動端適配
7 函數(shù)組件
8 useEffect
9 useReducer
10 useRef
11 Antd-Mobile
12 Hooks CNode 實(shí)戰(zhàn)

1
課程介紹及開發(fā)環(huán)境搭建

1.ReactHooks的由來 2.Hooks和Class兩種寫法對比 3.搭建開發(fā)環(huán)境

2
useState 方法介紹及使用實(shí)例

1.如何聲明、讀取和修改變量

2.為什么通過ES6解構(gòu)的形式獲取useState的返回值

3.useState在使用上的一些坑

4.手寫簡單的useState方法

3
useEffect 代替了哪些生命周期

1.DidMount、DidUpdate的Hook寫法

2.WillReceiveProps的Hook寫法

3.聲明多個useEffect

4.useEffect書寫小技巧

5.useEffect性能優(yōu)勢

4
useContext 組件間的傳值

1.useContext使用時機(jī)

2.useContext寫法優(yōu)勢

3.useContext性能分析

5
useReducer 代替 Redux

1.useReducer基礎(chǔ)概念

2.useReducer使用

3.useReducer的優(yōu)勢

4.實(shí)現(xiàn)類Redux小實(shí)戰(zhàn)

6
使用 useMemo 提高代碼性能

1.什么時候會寫出有性能問題的代碼

2.memo如何解決性能問題

3.useMemo如何解決性能問題

4.useCallback如何解決性能問題

7
useRef 的使用

1.介紹useRef

2.useRef使用技巧

3.父子組件間的ref傳值

8
手寫屬于自己的 use 函數(shù)

1.修改title鉤子函數(shù)

2.監(jiān)聽頁面大變化小鉤子函數(shù)

3.簡化input輸入框鉤子函數(shù)

9
實(shí)戰(zhàn)開發(fā)環(huán)境搭建

1.createreactapp初始化項(xiàng)目

2.引入AntdMobile樣式庫

3.vw實(shí)現(xiàn)移動端的適配

4.axios請求庫二次封裝

5.引入路由機(jī)制

10
CNode 移動端網(wǎng)站開發(fā)

1.整理cnode項(xiàng)目的接口文檔

2.公用頭部

3.首頁

4.詳情頁