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'));
複製代碼