React 16 新特性尝鲜视频教程【第2节】

课程介绍

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

适用人群

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

内容目录

1. 用 Error Boundary 处理错误

为了解决未捕获错误阻塞整个应用的问题，React 16 中引入了 Error Boundary 的概念，Error Boundary 指能够捕获其所有子组件的错误并对错误做优雅处理的组件，这种优雅错误处理包括上报错误日志、展示出错提示而不是卸载整个组件树。我们在本小节中会展示如何创建 Error Boundary 组件，并使用 componentDidCatch 生命周期方法来处理捕获到的错误，此外还会展示 Error Boundary 使用的最佳实践。

2. 在 render 中返回没有容器元素的多个元素

在 React 16 之前，render 方法必须返回单个元素，而 React 16 中我们可以在 render 方法中返回多个节点，即节点数组，该特性能给开发打来很大的便利，也给组件结构设计带来了新的可能，本节会实例展示有哪些新可能。

---

上面图片点击即可播放，其他小节待续。

---

源码链接

代码仓库：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

视频下载

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

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