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

前端周刊 · 公众号 · 前端 · 2017-10-27 08:48

正文

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

内容目录

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 方法中返回多个节点，即节点数组，该特性能给开发打来很大的便利，也给组件结构设计带来了新的可能，本节会实例展示有哪些新可能。
     
     
      
      
     
     
      由于微信公号限制，单篇文章最多插入 3 个视频，第 1 节视频请看公众号历史文章。
     
     
     
      
       以下部分包含外链，请点击原文查看。
      
     
     
     
      源码链接
     
     
      代码仓库：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 新特性尝鲜【第4节】

正文

内容目录

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

3. 用 Text Only Component 减少 DOM 层级

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

源码链接

运行环境

参考资料

视频下载

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