課程介紹
React 16 的發(fā)布除開源許可證和 Fiber 機制全面開啟之外，還為我們提供了部分非常強大的新特性，本視頻教程將通過實例帶你探索這些新特性，從 Error Boundary 到 Text Only Component，再到 Portal，共 6 小節(jié)，19 分鐘，每個小節(jié)實例講解一個新特性，在講解新特性基本用法的同時會介紹新特性的最佳實踐。學(xué)完本視頻教程，你將能熟練把諸如 Error Boundary，Portal 等特性運用到你的實際項目中來提高開發(fā)效率和代碼質(zhì)量，做到與時俱進(jìn)。
適用人群
- [必須]具備前端基礎(chǔ)知識，了解 ES6；
- [必須]具備 React 基礎(chǔ)知識，有開發(fā)經(jīng)驗更好；
- [可選]期望跟上社區(qū)發(fā)展動態(tài)，學(xué)習(xí)最新的開發(fā)技術(shù)，如果滿足這點，前兩點可忽略；
內(nèi)容目錄
4. 用 createPortal 把組件渲染到當(dāng)前組件樹之外
默認(rèn)情況下，React組件樹 是和 DOM樹 完全對應(yīng)的，但是這樣會給部分 UI 組件帶來限制，比如常見的蒙層、進(jìn)度條，React 16 為我們提供的 portal 特性能夠讓我們把組件樹的部分渲染到當(dāng)前組件樹之外，本節(jié)會基于 portal 機制從零開始構(gòu)建最小可用的 <Overlay/> 組件，讓大家理解怎么用，有什么最佳實踐。
3. 用 Text Only Component 減少 DOM 層級
React 16 之前的版本要求只渲染字符串的組件必須把字符串包在無意義的 <span> 或 <div> 中，而在 React 16 中這種限制已經(jīng)去掉，也就意味著你可以在組件的 render 方法中直接返回字符串，創(chuàng)建 Text Only Component，這樣會幫我們精簡 DOM 層級。
2. 在 render 中返回沒有容器元素的多個元素
在 React 16 之前，render 方法必須返回單個元素，而 React 16 中我們可以在 render 方法中返回多個節(jié)點，即節(jié)點數(shù)組，該特性能給開發(fā)打來很大的便利，也給組件結(jié)構(gòu)設(shè)計帶來了新的可能，本節(jié)會實例展示有哪些新可能。
1. 用 Error Boundary 處理錯誤
為了解決未捕獲錯誤阻塞整個應(yīng)用的問題，React 16 中引入了 Error Boundary 的概念，Error Boundary 指能夠捕獲其所有子組件的錯誤并對錯誤做優(yōu)雅處理的組件，這種優(yōu)雅錯誤處理包括上報錯誤日志、展示出錯提示而不是卸載整個組件樹。我們在本小節(jié)中會展示如何創(chuàng)建 Error Boundary 組件，并使用 componentDidCatch 生命周期方法來處理捕獲到的錯誤，此外還會展示 Error Boundary 使用的最佳實踐。
以上圖片鏈接點擊即可播放，其他小節(jié)待續(xù)。
源碼鏈接
代碼倉庫：wangshijun/course-new-features-of-react16
運行方法（建議安裝和使用 yarn）
git clone https://github.com/wangshijun/course-new-features-of-react16.git
cd course-new-features-of-react16
yarn
yarn start
如果要運行某節(jié)課的腳本，只需修改 src/index.js 第 4 行的 import 語句，import 對應(yīng)的代碼即可。
運行環(huán)境
- Node.js v8.6.0
- React v16
- React Native v0.49.0 [optional]
- VSCode v1.17.1 + Vim
- Chrome v61
參考資料
視頻下載
關(guān)注《前端周刊》微信公眾號：fullstackacademy，回復(fù) course-react16 獲取高清視頻教程下載地址。
可能有同學(xué)會問，我為什么做公開課？以后有什么計劃？感興趣的請閱讀：好久不見，總感覺欠你點什么 ？
