React入坑

JSX => DOM

用过React的同学可能都有这样的感觉:

  • 刚接触React:JSX是什么鬼 莫名其妙,又有点神奇
  • 用React: JSX就JSX吧,老夫拿起来就是一把梭

React采用的JSX语法,书写方式和直接写HTML标签类似,但是从JSX到DOM,经历了哪些过程呢? 本文就带同(da)学(lao)们扒一扒其中的奥妙,实现一个最最最简版的React(对, 就是这么小, 因为我还没长大) 动手写代码之前,我们先理一理React的渲染流程:

1. babel

我们先把一段JSX代码通过babel编译下看看变成啥样: 打开babeljs.io/, try it out

我们看到babel将JSX编译成了React.createElement()方法。createElement接收三个参数

  • type 标签名
  • props 属性
  • children 子节点

等等,React.createElement又是啥, 没用过啊::dizzy_face:

2. Virtual DOM

没用过没关系,我们来看看他是个啥,在React环境下执行以下代码:

React.createElement(
  "h1",
  { titile: "\u5C0F\u59D0\u59D0\u597D" },
  "hello, little sister"
);
复制代码

按照以上思路, 实现React.createElement, ReactDOM.render方法:

const React = {
  createElement: function (type, props, ...children) {
    return {type, props, children}
  }
}

const ReactDOM = {
  render: function (vnode, container) {
    let {type, props, children} = vnode;
    let node = document.createElement(type)
    for(let key in props) {
      node.setAttribute(key, props[key])
    }
    children.forEach(child => {
      if(typeof child === 'string'){
        node.innerHTML = child
      } else {
        ReactDOM.render(child, node)
      }
    })
    container.appendChild(node);
  }
}

ReactDOM.render(<h1 title="hello">world<span>123</span></h1>, document.getElementById('root'));
复制代码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值