专栏首页FinGet前端之路JSX到原生DOM是怎么炼成的

JSX到原生DOM是怎么炼成的

一段很平常的JSX代码:

let ele = <div id="div" className="red">hello
  	<span className="blue">word</span>
  </div>;

ReactDOM.render(ele,document.getElementById('root'))

JSX语法糖

上面的写法是为了写起来方便也就是所谓的语法糖,我们借用babel的在线工具可以清楚的看到原生的react应该怎么写

React.createElement()真面目

那么React.createElement(),创建的react元素又是长什么样的? 我们可以打印ele看一看:

console.log(ele);

简化一下它的结构

let eleObj = {
  type: 'div', // 就是什么标签嘛
  props:{ // 属性 包括子节点
    className: 'red', // class
    id: 'div',  // id
    children:[  // 子节点
      'hello',  // 文本子节点
      {         // 子节点对象
        type:'span',
        props:{
          className:'blue',
          children:['word']
        }
      }
    ]
  }
}

模拟render()函数实现

ReactDOM.render()是怎么解析react元素的:

// 模拟render函数
function render(eleObj, container){
  // 解构出标签的类型和属性对象
  let {type, props} = eleObj;
  // 创建一个DOM元素
  let ele = document.createElement(type);
  // 循环属性对象
  for (let attr in props){
    if(attr == 'children'){
      props[attr].forEach(item => {
        if(typeof item == 'string'){
          let textNode = document.createTextNode(item);
          ele.appendChild(textNode);
        } else {
          // 递归调用
          render(item, ele);
        }
      })
    } else if(attr == 'className') {
      ele.setAttribute('class',props[attr]);
    } else {
      ele.setAttribute(attr, props[attr]);
    }
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript从初级往高级走系列————Virtual Dom

    看图,只有修改了的数据才进行了刷新,减少了DOM操作,这其实就是vnode与newVnode对比,找出改变了的地方,然后只重新渲染改变的

    FinGet
  • JavaScript数据结构与算法-String

    思路:数字变字符串再变数组,这个主要就是运用的数组的常用api了,pop、shift、 unshift、join。

    FinGet
  • win10下安装配置mongodb

    mongod --config c:\MongoDB\etc\mongo.conf --install --serviceName "MongoDB"

    FinGet
  • [大数据之Yarn]——资源调度浅学

    在hadoop生态越来越完善的背景下,集群多用户租用的场景变得越来越普遍,多用户任务下的资源调度就显得十分关键了。比如,一个公司拥有一个几十个节点的hadoo...

    用户1154259
  • 10大白帽黑客专用的 Linux 操作系统

    今天让我们来介绍十个黑客专用的操作系统,它们被白帽黑客用作渗透测试的工具。这里我把 Kali Linux 列为首位,是因为它在渗透测试中非常流行,它的开发团队 ...

    C4rpeDime
  • 跨帐号访问COS资源

    日常工作中,经常会存在跨帐号访问COS资源的场景,例如两个主体公司,甲方和乙方,资源归属甲方,但需要乙方进行软件开发和部署,所以甲方需要授权给乙方一定的资源访问...

    wainsun
  • 基于EasyNVR摄像机无插件直播流媒体服务器实现文字滤镜处理功能

    最近遇到有客户需要用ffmpeg对图像进行文字滤镜处理,增加各种文字效果,需要ffmpeg支持此功能,因此需要在编译ffmpeg时候加上此功能模块 –enabl...

    EasyNVR
  • 跨帐号访问COS资源

    日常工作中,经常会存在跨帐号访问COS资源的场景,例如两个主体公司,甲方和乙方,资源归属甲方,但需要乙方进行软件开发和部署,所以甲方需要授权给乙方一定的资源访问...

    wainsun
  • Python基础学习02天

    你好我是森林
  • Python编程从入门到实践之遍历列表|第2天

    通常情况下,我们需要对列表的所有元素进行操作,这个时候就需要遍历整个列表。循环采用for。

    你好我是森林

扫码关注云+社区

领取腾讯云代金券