前置知识jsx本质链接：https://www.yuque.com/linhe-8mnf5/fxyxkm/xekk7b

1、React渲染过程

image.png

  1. 把虚拟DOM变为真实DOM；
  2. 把虚拟DOM属性同步到真实DOM上；
  3. 把虚拟DOM上的children也变成真实DOM挂载到自己的DOM上；
  4. 把最终DOM挂载到容器上；

2、实现步骤一：将子节点挂载到根节点上

image.png

2.1 初始化项目文件

image.png

2.2 index内容初始化

  1. import React from './react';  // 注意：使用的是自己写的react
  2. import ReactDOM from './react-dom'; // 注意：使用的是自己写的react-dom
  4. const element1 = (<div className="title" style={{ color: 'red' }}><span>hello word</span></div>)
  7. ReactDOM.render(element1,
  8.   document.getElementById('root')
  9. );

2.3 实现react.js文件内容

  2. /**
  3.  * 实现createElement
  4.  * @param {*} type 元素类型
  5.  * @param {*} config 配对对象
  6.  * @param {*} children 子元素
  7.  */
  8. function createElement(type, config, children) {
  9.   if (config) {
  10.     delete config.__source;
  11.     delete config.__self;
  12.   }
  13.   let props = { ...config }
  14.   if (arguments?.length > 3) {
  15.     children = [].slice.call(arguments, 2)
  16.   }
  17.   props.children = children
  18.   return {
  19.     type,
  20.     props,
  21.     children
  22.   }
  24. }
  26. const React = { createElement }
  27. export default React

2.4 实现react-dom.js文件内容

  1. /**
  2.  * 1.把虚拟DOM变为真实DOM；
  3.  * 2.把虚拟DOM属性同步到真实DOM上；
  4.  * 3.把虚拟DOM上的children也变成真实DOM挂载到自己的DOM上；
  5.  * 4.把最终DOM挂载到容器上； 
  6.  * @param {*} vdom 要渲染的虚拟DOM
  7.  * @param {*} container 虚拟DOM转换成真实DOM，并插入到容器中
  8.  */
  10. function render(vdom, container) {
  11.   console.log(`vdom`, vdom)
  12.   const dom = createDom(vdom)
  13.   container.appendChild(dom)
  14. }
  16. /**
  17.  * 虚拟dom变为真实dom
  18.  * @param {*} vdom 虚拟dom
  19.  * {"type":"div","key":null,"ref":null,
  20.  * "props":{"className":"title","style":{"color":"red"},
  21.  * "children":{"type":"span","key":null,
  22.  * "ref":null,"props":{"children":"hello word"}
  23.  */
  24. function createDom(vdom) {
  25.   // 如果是字符串或者数字，直接返回真实节点
  26.   if (['number', 'string'].includes(typeof vdom)) {
  27.     console.log(`vdom`, vdom)
  28.     return document.createTextNode(vdom)
  29.   }
  31.   // 否则它就是一个react元素了
  32.   const { type, props } = vdom
  33.   let dom = document.createElement(type)
  34.   return dom
  35. }
  37. const ReactDom = { render }
  38. export default ReactDom

2.5 实现效果

image.png

3、实现步骤二：将虚拟dom的属性更新到真实dom

image.png

3.1 加入处理属性函数

image.png

image.png

实现代码：

  1. // react-dom文件
  3. function createDom(vdom) {
  4.   // 如果是字符串或者数字，直接返回真实节点
  5.   if (['number', 'string'].includes(typeof vdom)) {
  6.     return document.createTextNode(vdom)
  7.   }
  9.   // 否则它就是一个react元素了
  10.   const { type, props } = vdom
  11.   let dom = document.createElement(type)
  12.   // 将虚拟dom属性更新到真实dom上
  13.   updateProps(dom, props)
  14.   return dom
  15. }
  17. /**
  18.  * 将虚拟dom属性更新到真实dom上
  19.  * @param {*} dom 真实dom
  20.  * @param {*} newProps 新属性
  21.  */
  22. function updateProps(dom, newProps) {
  23.   for (let key in newProps) {
  24.     if (key === 'children') continue
  25.     // style单独处理，因为dom不支持
  26.     if (key === 'style') { 
  27.       const styleObj = newProps.style
  28.       for (let attr in styleObj) {
  29.         dom.style[attr] = styleObj[attr]
  30.       }
  31.     }else{
  32.       dom[key] = newProps[key]
  33.     }
  34.   }
  35. }

3.2 实现效果

image.png

4 实现步骤三：将子节点dom挂载到当前节点

image.png

4.1 处理子节点文本节点

image.png

4.2 处理子节是虚拟dom

image.png

4.3 处理子节点为数组

image.png
image.png

4.4 不满足以上条件处理

image.png

4.5 实现效果

image.png

5、React-dom完整代码实现

  1. /**
  2.  * createElement编译出来的结果
  3.  * {"type":"div","key":null,"ref":null,
  4.  * "props":{"className":"title","style":{"color":"red"},
  5.  * "children":{"type":"span","key":null,
  6.  * "ref":null,"props":{"children":"hello word"}
  7.  */
  10. /**
  11.  * 1.把虚拟DOM变为真实DOM；
  12.  * 2.把虚拟DOM属性同步到真实DOM上；
  13.  * 3.把虚拟DOM上的children也变成真实DOM挂载到自己的DOM上；
  14.  * 4.把最终DOM挂载到容器上； 
  15.  * @param {*} vdom 要渲染的虚拟DOM
  16.  * @param {*} container 虚拟DOM转换成真实DOM，并插入到容器中
  17.  */
  19. function render(vdom, container) {
  20.   const dom = createDom(vdom)
  21.   container.appendChild(dom)
  22. }
  24. /**
  25.  * 虚拟dom变为真实dom
  26.  * @param {*} vdom 虚拟dom
  27.  */
  28. function createDom(vdom) {
  29.   // 如果是字符串或者数字，直接返回真实节点
  30.   if (['number', 'string'].includes(typeof vdom)) {
  31.     return document.createTextNode(vdom)
  32.   }
  34.   // 否则它就是一个react元素了
  35.   const { type, props } = vdom
  37.   const dom = document.createElement(type)
  38.   // 将虚拟dom属性更新到真实dom上
  39.   updateProps(dom, props)
  40.   // 如果儿子只有一个儿子，并且儿子是文本节点
  41.   if (['number', 'string'].includes(typeof props.children)) {
  42.     dom.textContent = props.children
  43.     // 如果儿子是一个对象，并且是一个虚拟dom，递归调用render
  44.   } else if (typeof props.children === 'object' && props.children.type) {
  45.     // 把儿子变成真实dom，插入到自己身上
  46.     render(props.children, dom)
  47.     // 如果儿子是一个数组，说明儿子不止一个
  48.   } else if (Array.isArray) {
  49.     reconcileChildren(props.children, dom)
  50.   } else {
  51.     document.textContent = props.children ? props.children.toString() : ""
  52.   }
  53.   // // 把真实dom作为一个虚拟属性放在虚拟dom上，为以后更新做准备
  54.   // vdom.dom = dom
  55.   return dom
  56. }
  58. /**
  59.  * @param {*} childrenVdom 儿子们的虚拟dom
  60.  * @param {*} parentDom 父的真实dom
  61.  */
  62. function reconcileChildren(childrenVdom, parentDom) {
  63.   for (const childVdom of childrenVdom) {
  64.     render(childVdom, parentDom)
  65.   }
  66. }
  68. /**
  69.  * 将虚拟dom属性更新到真实dom上
  70.  * @param {*} dom 真实dom
  71.  * @param {*} newProps 新属性
  72.  */
  73. function updateProps(dom, newProps) {
  74.   for (const key in newProps) {
  75.     if (key === 'children') continue
  76.     // style单独处理，因为dom不支持
  77.     if (key === 'style') {
  78.       const styleObj = newProps.style
  79.       for (let attr in styleObj) {
  80.         dom.style[attr] = styleObj[attr]
  81.       }
  82.     } else {
  83.       dom[key] = newProps[key]
  84.     }
  85.   }
  86. }
  88. const ReactDom = { render }
  89. export default ReactDom

6、源代码

本文代码：https://gitee.com/linhexs/react-write/tree/1.react-render/

7、拓展

1、react源码篇：https://www.yuque.com/linhe-8mnf5/fxyxkm/xekk7b