简单记录react 虚拟DOM转换为真实DOM

406 阅读1分钟
  1. 通过babel-preset-react从而使得我们在编写jsx语法及自定义组件时将其转为通过React.creatElement方法进行处理获得react元素。
  2. 通过ReactDom.render方法对于上一步创建好的react元素进行渲染。
  3. ReactDom.render方法调用后会先创建根对象root,随后执行root.render。
  4. 通过workLoop函数遍历整个虚拟dom树,将下一个虚拟dom传给performUnitOfWork函数 performUnitOfWork传递给beginWork并对其子节点进行处理为Fiber类型以及进行monut或update操作等
  5. beginWork函数返回处理完的子元素 继续循环处理直到没有子元素,此时performUnitOfWork调用completeUnitOfWork函数完成将虚拟DOM转化为真实DOM