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