React 16 新特性尝鲜实战教程【第5节：HTML ≈ JSX】

课程介绍

React 16 的发布除开源许可证和 Fiber 机制全面开启之外，还为我们提供了部分非常强大的新特性，本视频教程将通过实例带你探索这些新特性，从 Error Boundary 到 Text Only Component，再到 Portal，共 6 小节，19 分钟，每个小节实例讲解一个新特性，在讲解新特性基本用法的同时会介绍新特性的最佳实践。学完本视频教程，你将能熟练把诸如 Error Boundary，Portal 等特性运用到你的实际项目中来提高开发效率和代码质量，做到与时俱进。

适用人群

1. [必须]具备前端基础知识，了解 ES6；
2. [必须]具备 React 基础知识，有开发经验更好；
3. [可选]期望跟上社区发展动态，学习最新的开发技术，如果满足这点，前两点可忽略；

内容目录

5. 更加自由的 DOM 属性

React 16 对 DOM 组件的属性也做了不少增强，最让人兴奋的就是对自定义属性的宽容。本节会用实例演示哪些 DOM 属性会被直接渲染，哪些会被忽略，哪些写法是有效的，哪些写法是无效的，避免你在开发过程中踩坑。

4. 用 createPortal 把组件渲染到当前组件树之外

默认情况下，React组件树 是和 DOM树 完全对应的，但是这样会给部分 UI 组件带来限制，比如常见的蒙层、进度条，React 16 为我们提供的 portal 特性能够让我们把组件树的部分渲染到当前组件树之外，本节会基于 portal 机制从零开始构建最小可用的 组件，让大家理解怎么用，有什么最佳实践。

3. 用 Text Only Component 减少 DOM 层级

React 16 之前的版本要求只渲染字符串的组件必须把字符串包在无意义的 或

中，而在 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

参考资料

https://reactjs.org/blog/2017/09/26/react-v16.0.html

视频下载

关注《前端周刊》微信公众号：fullstackacademy，回复 course-react16 获取高清视频教程下载地址。

可能有同学会问，我为什么做公开课？以后有什么计划？感兴趣的请阅读：好久不见，总感觉欠你点什么