实现一个属于自己的React框架～～～～更新中～～～～～

3月31日去颐和园转了一圈, 拍的比较满意的几张照片

前言

准备工作

我们首先搭建开发的环境, 我们选择webpack4。值得注意的是, 因为我们需要解析JSX的语法, 我们需要使用**@babel/plugin-transform-react-jsx**插件。

@babel/plugin-transform-react-jsx插件会将JSX语法做出以下格式的转换。@babel/plugin-transform-react-jsx默认使用React.createElement, 我们可以通过设置插件的pragma配置项, 修改默认的函数名

// before
var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

// after
var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);


const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const HappyPack = require('happypack')

module.exports = {
  devtool: '#cheap-module-eval-source-map',

  mode: 'development',

  target: 'web',

  entry: {
    main: path.resolve(__dirname, './example/index.js')
  },

  devServer: {
    host: '0.0.0.0',
    port: 8080,
    hot: true
  },

  resolve: {
    extensions: ['.js']
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'happypack/loader?id=js'
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HappyPack({
      id: 'js',
      threads: 4,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['[@babel](/user/babel)/preset-env'],
            plugins: [
              '[@babel](/user/babel)/plugin-syntax-dynamic-import',
              [
                "[@babel](/user/babel)/plugin-transform-react-jsx",
                {
                  pragma: 'h'
                }
              ]
            ]
          }
        }
      ]
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html')
    })
  ]
}

上面是完整的打包配置(如果严格来说, 类库应该单独打包的)。同时我们将@babel/plugin-transform-react-jsx插件, pragma参数设置为"h"。我们在使用的时候, 只需要在文件中引入h函数即可。

创建VNode

我们在这里将会实现h方法, h方法的作用是创建一个VNode。根据编译结果可知, h函数的参数如下。

/**
 * type为VNode的类型
 * props为VNode的属性
 * childrens为VNode的子节点, 可能用多组子节点, 我们使用es6的rest参数
 */
h(type, props, ...childrens)

VNode本质就是Javascript中对象, 因此h函数只需要返回对应的对象即可。


export function createElement (type, props, ...children) {
  if (!props) props = {}
  
  props.children = [...children]

  let key = props.key

	if (key) {
    delete props.key
  }

  return createVNode(type, props, null, key)
}

export function createVNode (type, props, text, key) {
  const VNode = {
    type,
    props,
    text,
    key,
    _dom: null,
    _children: null,
    _component: null
  }

  return VNode
}

我们来使用一下，看一下h函数返回的结果, h函数返回的结果即是虚拟DOM

import { h } from 'yy-react'

console.log(
  <div>
    <h1>Hello</h1>
    <h1>World</h1>
  </div>
)

实现render

我们可以参考React的render函数的实现, render函数接受两个参数, React元素(VNode)以及container(挂载的DOM)。我们将要把VNode渲染成了真实的DOM节点。

下面是render函数的实现, 我们在本期还没有来得及实现Diff方法, 读者可以不用关注于这些。

整体代码的实现，参考(抄)了preact的源码的实现😏。(我还给preact的项目提交了pr😊，不过还没有merge😢)

👇 文章的最后是具体实现, 但是一大坨对阅读不是很友好，不想看的可以略过，直接看解说。

我们首先将视角转向render, render函数里调用里diff函数, 将返回的dom挂载到document中。_prevVNode等属性我们会在以后用到，目前可以忽略。


export function render (vnode, root) {
  let oldVNode = root._prevVNode
  let newVNode = root._prevVNode = vnode
  let dom = oldVNode ? oldVNode._dom : null
  let mounts = []
  let newDom = diff(dom, root, newVNode, oldVNode, mounts)
  if (newDom) {
    root.appendChild(newDom)
  }
}

在diff中，我们将对节点类型做出判断, VNode类型可以是普通的节点也可以是组件类型的节点, 我们这里先对普通类型的节点做出处理。


function diff (
  dom,
  root,
  newVNode,
  oldVNode,
  mounts,
  force
) {

  let newType = newVNode.type

  if (typeof newType === 'function') {
    // render component
  } else {
    dom = diffElementNodes(
      dom,
      newVNode,
      oldVNode,
      mounts
    )
  }

  newVNode._dom = dom

  return dom
}

我们接着将目光转向diffElementNodes函数, 在diffElementNodes函数中我们会根据具体节点类型创建对应的真实的DOM节点。例如文本类型的节点我们使用createTextNode, 而普通类型的我们使用createElement

因为整个VNode呈现的一种树状结构, 面对树状结构免不了使用递归去遍历每一颗节点。我们这里将创建后dom，作为父节点传入diffChildren函数中(新创建的节点会append到这个父节点中)。递归的转换的每一个子节点以及子节点的子节点。

由此我们也可知道，整个VNode树的渲染的顺序是由外向里的。但是设置VNode的props的顺序则是由里向外的。


function diffElementNodes (dom, newVNode, oldVNode, mounts) {

  if (!dom) {
    dom = newVNode.type === null ? document.createTextNode(newVNode.text) : document.createElement(newVNode.type)
  }

  newVNode._dom = dom

  if (newVNode.type) {
    if (newVNode !== oldVNode) {
      let newProps = newVNode.props
      let oldProps = oldVNode.props
      if (!oldProps) {
        oldProps = {}
      }
      diffChildren(dom, newVNode, oldVNode, mounts)
      diffProps(dom, newProps, oldProps)
    }
  }

  return dom
}

在diffChildren中, 我们将VNode的子VNode挂载到_children属性上, 遍历每一个子节点, 将子节点带入到diff中, 完成创建的过程


function diffChildren (
  root,
  newParentVNode,
  oldParentVNode,
  mounts
) {
  let oldVNode, newVNode, newDom, i, j, index, p, oldChildrenLength

  let newChildren = newParentVNode._children || 
                    toChildVNodeArray(newParentVNode.props.children, newParentVNode._children = [])

  for (i = 0; i < newChildren.length; i++) {
    newVNode = newChildren[i]
    oldVNode = index = null

    newDom = diff(
      oldVNode ? oldVNode._dom : null,
      root,
      newVNode,
      oldVNode,
      mounts,
      null
    )

    if (newVNode && newDom) {
      root.appendChild(newDom)
    }
  }
}

我们在遍历递归完子节点后, 就可以使用diffProps来设置我们的root节点了。我们遍历newProps中的每一个key, 并使用setProperty将props设置到dom上, setProperty中对一些dom属性做了特殊的处理。比如处理了驼峰的css的key, 和数字的value自动添加px等。


function diffProps (dom, newProps, oldProps) {
  for (let key in newProps) {
    if (
      key !=='children' &&
      key!=='key' &&
      (
        !oldProps ||
        ((key === 'value' || key === 'checked') ? dom : oldProps)[key] !== newProps[key]
      )
    ) {
			setProperty(dom, key, newProps[key], oldProps[key])
		}
  }
}

function setProperty (dom, name, value, oldValue) {
  if (name === 'style') {
    let s = dom.style
    if (typeof value === 'string') {
			s.cssText = value
		} else {
			if (typeof oldValue === 'string') {
        s.cssText = ''
      } else {
				for (let i in oldValue) {
					if (value==null || !(i in value)) {
            s.setProperty(i.replace(CAMEL_REG, '-'), '')
          }
				}
			}
			for (let i in value) {
				v = value[i];
				if (oldValue==null || v!==oldValue[i]) {
					s.setProperty(i.replace(CAMEL_REG, '-'), typeof v==='number' && IS_NON_DIMENSIONAL.test(i)===false ? (v + 'px') : v)
				}
			}
		}
  } else if (value == null) {
    dom.removeAttribute(name)
  } else if (typeof value !== 'function') {
    dom.setAttribute(name, value)
  }
}

最后我们再次回到render函数，render函数最后的会将创建好的dom, append到挂载的dom中完成渲染。


root.appendChild(newDom)

完整示例

github的仓库地址将在完成后放出


// create-element.js
export function render (vnode, root) {
  let oldVNode = root._prevVNode
  let newVNode = root._prevVNode = vnode
  let dom = oldVNode ? oldVNode._dom : null
  let mounts = []
  let newDom = diff(dom, root, newVNode, oldVNode, mounts)
  if (newDom) {
    root.appendChild(newDom)
  }
  runDidMount(mounts, vnode)
}

// diff.js
function diff (
  dom,
  root,
  newVNode,
  oldVNode,
  mounts,
  force
) {
  if (oldVNode == null || newVNode == null || newVNode.type !== oldVNode.type) {
    if (!newVNode) return null
    dom = null
    oldVNode = {}
  }

  let newType = newVNode.type

  if (typeof newType === 'function') {
    // render component
  } else {
    dom = diffElementNodes(
      dom,
      newVNode,
      oldVNode,
      mounts
    )
  }

  newVNode._dom = dom

  return dom
}

function diffElementNodes (dom, newVNode, oldVNode, mounts) {

  if (!dom) {
    dom = newVNode.type === null ? document.createTextNode(newVNode.text) : document.createElement(newVNode.type)
  }

  newVNode._dom = dom

  if (newVNode.type) {
    if (newVNode !== oldVNode) {
      let newProps = newVNode.props
      let oldProps = oldVNode.props
      if (!oldProps) {
        oldProps = {}
      }
      diffChildren(dom, newVNode, oldVNode, mounts)
      diffProps(dom, newProps, oldProps)
    }
  }

  return dom
}

// diff-children.js
function diffChildren (
  root,
  newParentVNode,
  oldParentVNode,
  mounts
) {
  let oldVNode, newVNode, newDom, i, j, index, p, oldChildrenLength

  let newChildren = newParentVNode._children || 
                    toChildVNodeArray(newParentVNode.props.children, newParentVNode._children = [])

  for (i = 0; i < newChildren.length; i++) {
    newVNode = newChildren[i]
    oldVNode = index = null

    newDom = diff(
      oldVNode ? oldVNode._dom : null,
      root,
      newVNode,
      oldVNode,
      mounts,
      null
    )

    if (newVNode && newDom) {
      root.appendChild(newDom)
    }
  }
}

// diffProps.js
function diffProps (dom, newProps, oldProps) {
  for (let key in newProps) {
    if (
      key !=='children' &&
      key!=='key' &&
      (
        !oldProps ||
        ((key === 'value' || key === 'checked') ? dom : oldProps)[key] !== newProps[key]
      )
    ) {
			setProperty(dom, key, newProps[key], oldProps[key])
		}
  }
  for (let key in oldProps) {
  }
}

// diff-props
function diffProps (dom, newProps, oldProps) {
  for (let key in newProps) {
    if (
      key !=='children' &&
      key!=='key' &&
      (
        !oldProps ||
        ((key === 'value' || key === 'checked') ? dom : oldProps)[key] !== newProps[key]
      )
    ) {
			setProperty(dom, key, newProps[key], oldProps[key])
		}
  }
  for (let key in oldProps) {
  }
}

function setProperty (dom, name, value, oldValue) {
  if (name === 'style') {
    let s = dom.style
    if (typeof value === 'string') {
			s.cssText = value
		} else {
			if (typeof oldValue === 'string') {
        s.cssText = ''
      } else {
				for (let i in oldValue) {
					if (value==null || !(i in value)) {
            s.setProperty(i.replace(CAMEL_REG, '-'), '')
          }
				}
			}
			for (let i in value) {
				v = value[i];
				if (oldValue==null || v!==oldValue[i]) {
					s.setProperty(i.replace(CAMEL_REG, '-'), typeof v==='number' && IS_NON_DIMENSIONAL.test(i)===false ? (v + 'px') : v)
				}
			}
		}
  } else if (value == null) {
    dom.removeAttribute(name)
  } else if (typeof value !== 'function') {
    dom.setAttribute(name, value)
  }
}

其他

BengBu-YueZhang 1楼•5 年前作者

掘金的地址，https://juejin.im/post/5ca2028be51d453fde2945be