断点调试

本节目标：理解“断点调试”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。在之前的实现中，我们所做的主要就是：

将jsx的语法，转换为真实的dom; 在碰到jsx语法后，按照webpack配置，调用babel-loader解析这个jsx语法；会查看\<后面的变量名：
如果是原生dom标签中的一种，就标识为字符串；按规范来说是小写，type将会是变量名，即type:变量名；然后再解析出props和children，这三个重要部分，然后再传入React.createElement方法，这个方法刚好需要这三个值：

如果是小写，就认为是原生dom类型，type将会是字符串，即type:字符串；然后再解析出props和children，这三个重要部分，然后再传入React.createElement方法，这个方法刚好需要这三个值：

function createElement(type, config, children)

其中的第三个参数children可以是一个数组，也可以是一个普通值；此外，这个方法会把第三个参数后面多传的参数都当成children; 所以，对于以下

jsx:
let element1 = (
  <div className="title" style={{ color: "red" }}>
    <span>hello</span>world
  </div>
);

由于第一个字母是小写的，所以type=div；另外会解析出属性classname="title",style={color:"red"}; 此外标签之间的内容会被当成children,所以，children=[{标签之间的内容}]，最终经过React.createElement转换后的普通对象如下所示：其中的key,ref是从babel传入createElement的参数props中解析出来的；

如果是大写，就认为是自定义组件，就会查看这个大写开头的变量，它一般是模块内定义或者从其他文件引入的一个大写字母开头变量；
这时，这是会判断这个变量是函数还是对象
- 如果是函数，还要进一步判断isReactClassComponent，即是函数组件还是类组件；
- 如果是对象，我们type将直接指向这个对象，即type:大写的变量名（代表一个对象），然后这个对象上会有一个$$typeof属性，用来区分这个对象是必属于哪一种React的特殊类型；

ReactDOM.render('', document.getElementById("root"));

对于以上render的调用，如果render的第一个参数是falsy值，即vdom为false，将什么也不做，具体代码如下：

function render(vdom, container) {
  mount(vdom, container);
}
export function mount(vdom, container) {
  let newDOM = createDOM(vdom);
  container.appendChild(newDOM);
}
/**
 *

把虚拟DOM转成真实

DOM
 */
export function createDOM(vdom) {
  if (!vdom) return null;

断点调试 ​

断点调试