React 16 新特性尝鲜【第3节】

前端周刊 · 公众号 · 前端 · 2017-10-26 08:16

正文

可自由转载。手机上请横屏观看，文末有高清版下载方法。

内容目录

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
      
     
     
      视频下载
     
     
      长按下图，识别二维码，关注《前端周刊》微信公众号，回复
      
       course-react16
      
      即可获取高清视频教程下载地址。
     
     
      
     
     
      
       

      
     
     
      
       最后，可能你有同学会问，我为什么要做这个公开课？接下来的计划是什么？请阅读
       
        好久不见，我总感觉欠你点什么

React 16 新特性尝鲜【第3节】

正文

内容目录

3. 用 Text Only Component 减少 DOM 层级

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

1. 用 Error Boundary 处理错误

源码链接

运行环境

参考资料

视频下载

请到「今天看啥」查看全文