React源码解析 -- 开篇

版本：17.0.1

前置知识

虚拟DOM

使用js来表示dom树
以react为例子，比如

<div id="app">
  <p class="text">hello world!!!</p>
</div>
---

转化为

const virtualDOM = {
  tag: 'div',
  props: {
    id: 'app'
  },
  chidren: [
    {
      tag: 'p',
      props: {
        className: 'text'
      },
      chidren: [
        'hello world!!!'
      ]
    }
  ]
}

这样当虚拟DOM改变后再改变真实DOM，可以减少真实DOM的操作（注意：不一定快）

React.createElement、jsx和babel

React是通过React.createElement产生虚拟DOM的

<div id="app">
  <p class="text">hello world!!!</p>
</div>
// 通过react表示等于
React.createElement("div", {
  id: "app"
}, React.createElement("p", {
  className: "text"
}, "hello world!!!"));

但是这样的写法写程序非常不友好，所以有了jsx

function Test(props){
  return <div>
    你好
  </div>
}

然后通过babel插件@babel/plugin-transform-react-jsx转换为React.createElement的型式

可以这里尝试下

拓展

babel原理