在上一篇文章的基础上添加处理函数组件渲染。

1、改造index.js为函数组件

  1. // index
  2. import React from './react';
  3. import ReactDOM from './react-dom';
  5. function FunctionComponent(props) {
  6.   return (
  7.     <div className="title" style={{ background: 'red' }}>
  8.       <span>{props.name}</span>
  9.     </div>
  10.   )
  11. }
  14. ReactDOM.render(<FunctionComponent name="xiaoming" />,
  15.   document.getElementById('root')
  16. );

2、添加处理函数组件

createDom函数增加处理函数组件逻辑：
image.png

mountFunctionComponent函数实现：实现逻辑其实很简单，就是调用函数组件，传入props，使其成为原生组件，重复调用原生组件逻辑。createElement
image.png

3、实现效果

image.png

4、完整代码

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

5、源代码

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