
React Hooks培訓(xùn)
課程對(duì) React Hooks 的鉤子函數(shù)做了全方位的分析,并且對(duì)舊的 Class 寫法和新的 Hooks 寫法在生命周期上進(jìn)行對(duì)比。
課程除了介紹 Hooks 之外,還會(huì)通過純 Hooks 函數(shù)組件的方式對(duì) CNode 門戶網(wǎng)站進(jìn)行移動(dòng)端頁面的重構(gòu),
實(shí)戰(zhàn)過程中會(huì)介紹一些真實(shí)開發(fā)用到的一些技術(shù)棧。
1 React 簡(jiǎn)介
2 useState
3 useContext
4 useMemo
5 自定義 Hooks
6 移動(dòng)端適配
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兩種寫法對(duì)比 3.搭建開發(fā)環(huán)境
2
useState 方法介紹及使用實(shí)例
1.如何聲明、讀取和修改變量
2.為什么通過ES6解構(gòu)的形式獲取useState的返回值
3.useState在使用上的一些坑
4.手寫簡(jiǎn)單的useState方法
3
useEffect 代替了哪些生命周期
1.DidMount、DidUpdate的Hook寫法
2.WillReceiveProps的Hook寫法
3.聲明多個(gè)useEffect
4.useEffect書寫小技巧
5.useEffect性能優(yōu)勢(shì)
4
useContext 組件間的傳值
1.useContext使用時(shí)機(jī)
2.useContext寫法優(yōu)勢(shì)
3.useContext性能分析
5
useReducer 代替 Redux
1.useReducer基礎(chǔ)概念
2.useReducer使用
3.useReducer的優(yōu)勢(shì)
4.實(shí)現(xiàn)類Redux小實(shí)戰(zhàn)
6
使用 useMemo 提高代碼性能
1.什么時(shí)候會(huì)寫出有性能問題的代碼
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.簡(jiǎn)化input輸入框鉤子函數(shù)
9
實(shí)戰(zhàn)開發(fā)環(huán)境搭建
1.createreactapp初始化項(xiàng)目
2.引入AntdMobile樣式庫
3.vw實(shí)現(xiàn)移動(dòng)端的適配
4.axios請(qǐng)求庫二次封裝
5.引入路由機(jī)制
10
CNode 移動(dòng)端網(wǎng)站開發(fā)
1.整理cnode項(xiàng)目的接口文檔
2.公用頭部
3.首頁
4.詳情頁