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

前端周刊 · 公众号 · 前端 · 2017-10-28 08:25

正文

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

内容目录

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 层级。
     
      
      
      

     
     
      由于微信公号限制，单篇文章最多插入 3 个视频，第 1、2 节视频请看公众号历史文章。
     
     
     
      
       以下部分包含外链，请点击原文查看。
      
     
     
     
      源码链接
     
     
      代码仓库：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
      
      即可获取高清视频教程下载地址。