新上課程推薦:《React Hooks 案例詳解(React 進階必備)》
講師簡介
曾任職中軟軍隊事業部,參與軍需軟體的研發。後自行創業,開發的《電商分銷系統》獲得淘寶Top100使用,創日銷千單記錄。曾任職《某某網》白金講師,口碑良好,完成眾多學員的高薪就業。2014年在北京主持網際網路金融專案獲得2千萬融資,任CEO。產品和研發均有多年實踐經驗。當前在一個遊戲類創業公司,任股東和技術總監。
講師在思否講堂已釋出課程
《Git程式碼管理與團隊協作最佳實踐》 《Git版本控制常用操作案例教程》系列 《GitHub 快速入門 - 核心使用流程掌握》系列 《React Hooks 案例詳解(React 進階必備)》系列
前言
講師最新發布的系列課程 《 React Hooks 案例詳解(React 進階必備) 》 詳細講解了 React Hooks 這個新特性。
全網範圍資料很少。視訊幾乎沒有。課程製作和案例製作都經過精心編排。對於 React 開發者意義重大,希望對有需要的開發者有所幫助。
如釋重負,好用的技術就應該越來越簡單。
React Hooks 是 React 16.8 從提案轉為正式加入的新特性。這個新特性是個非常棒的設計。 可以說對於React 技術棧的發展具分割線一樣的意義。講師在課程中提到:之前使用 React 作為主要的前端技術,開發一款網頁遊戲。在整個遊戲的各個模組中,Redux ,mobx,以及螞蟻金服的 ant-design,dva, umi 這些框架或者第三方庫都有涉及使用。但是自從瞭解了Facebook官方提案的 Hooks 特性後,才真正覺得獲得了前所未有的解脫。如果你有React開發經驗,學習瞭解 Hooks 後,一定有一種如釋重負的輕鬆感。
React 帶來了方便也帶來了迷茫。
相信關心 React Hooks 這項新特性的童鞋,很多已經有了一定的 React 開發經驗。那麼你一定有所體驗,React 給我們帶來方便的同時,也的確和長久以來的前端開發模式有極大的不同。React 並不需要用繼承,而是推薦用巢狀。React 有獨特的 jsx 語法。大多數情況 jsx 都使得我們的程式碼更加簡潔了。然而有些時候也給我們帶來了一些困擾。 比如資料的傳遞,邏輯的複用。 react 是一種 mvvm 的設計模式,作為開發者一定要清楚,那些資料是業務資料,那些資料是UI資料。否則你的程式碼很有可能會陷入混亂局面。
大型專案中模組化與功能解耦困難。
在公司專案中 App 稍大的時候,我們發現狀態提升和只通過 props 進行資料傳遞。很多時候都很難實現我們的需求。這時無論我們是否清楚的瞭解,但是狀態管理也就是 redux mobx 等,輕易地進入到了公司的專案中。我們經過初期的嘗試發現狀態管理,確實比用純粹的 React 帶來了資料傳遞上的方便,以及程式碼組織上的清晰。但前提是你看懂且理解了 redux 大神晦澀的官網文件。 本來 React 被設計用來元件化前端開發。但當我們初期使用狀態管理,我們常常會過度的使用狀態資料,業務邏輯和ui邏輯沒有清楚的分離,最終你的應用程式碼結果可能是:除了少數幾個元件是獨立的解耦的,大多陣列件都因為狀態資料的共享而耦合在了一起,且他們也完全依賴狀態管理框架。無法再輕鬆的轉移複用。使用高階元件,屬性渲染,渲染回撥等高階特性,確實可以幫我們解決模組或功能的解耦問題。但是這些方法,確實有點超出普通“猿類”的技能。且降低了程式碼的可讀性,對於團隊協作,這是很致命的問題。
React Hooks 真正開啟前端模組化的金鑰匙。
對於以上問題,React Hooks 都有很好的解決方案,官方的設計動機就是解決這些曾經的繁瑣,化繁為簡。React Hooks 讓我們在純函式中就可以使用 React 的眾多特性。而不必使用類。程式碼扁平,易讀。解耦狀態相關邏輯,UI邏輯和業務邏輯更好的分離。這些邏輯往往是純函式,而以前很容易混合在類元件中。通過自定義 Hooks 我們可以把應用中“狀態相關”邏輯解耦出來,獨立編寫到我們自己的hooks 中。從而更加易於複用和獨立測試。
誰適合學習
剛開始學習React,還沒用過狀態管理。儘早掌握 Hooks 特性,他非常簡單和好用,循序漸進的進行狀態管理,避免所有專案都直接引入狀態管理框架。
掌握 Hooks 會讓你少走很多彎路。從一開始就把程式碼寫的簡單易讀,講師個人的觀點,使用狀態管理相關的框架,
初期通常會讓你的程式碼陷入混亂。但使用 hooks 會減少這種機率。
對前端開發有較多經驗,想拓展下思路,瞭解下 React 的新特性相信這節課程將會對你產生最大的共鳴。因為 Hooks 的確解決了之前開發中很多困擾。
課程大綱
這個課程包括:最常用的 Hook 以及 React 16.8.3 包含的所有 hooks Api的使用。
每個 Api 都會有一個或多個程式碼案例,講師儘量通過案例讓大家都能理解這些新概念。
Basic Hooks
- useState
- useEffect
- useContext
Additional Hooks
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
- 自定義 Hooks