手撸类React框架（1）渲染DOM元素

渲染DOM元素

DOM API

// Get an element by id
const domRoot = document.getElementById("root");
// Create a new element given a tag name
const domInput = document.createElement("input");
// Set properties
domInput["type"] = "text";
domInput["value"] = "Hi world";
domInput["className"] = "my-class";
// Listen to events
domInput.addEventListener("change", e => alert(e.target.value));
// Create a text node
const domText = document.createTextNode("");
// Set text node content
domText["nodeValue"] = "Foo";
// Append an element
domRoot.appendChild(domInput);
// Append a text node (same as previous)
domRoot.appendChild(domText);

虚拟DOM 元素对象Element

<div id="container">
  <input value="foo" type="text">
  <a href="/bar"></a>
  <span>Foo</span>
</div>

const element = {
  type: "div",
  props: {
    id: "container",
    children: [
      { type: "input", props: { value: "foo", type: "text" } },
      { type: "a", props: { href: "/bar" } },
      { type: "span", props: {
				onClick: e => alert("Hi"),
				children: [
		      {
		        type: "TEXT ELEMENT", // 1
		        props: { nodeValue: "Foo" } // 2
		      }
		    ]
			} }
    ]
  }
};

渲染虚拟DOM元素

const render = function(element, parentElement) {
  const {type, props} = element;
	//单独对文字进行处理
  const isTextElement = type === 'TEXT ELEMENT';
  const dom = isTextElement ? document.createTextNode('')  : document.createElement(type);
	// 处理onClick 等事件绑定 约定点击事件格式为onEventName（click，change）等...
  const isListener = name => name.startsWith('on');
  Object.keys(props).filter(isListener).forEach(name => {
      const evenType = name.toLowerCase().substring(2);
      dom.addEventListener(evenType, props[name]);
  })
	// 处理属性
  const isAttribute = name => !isListener(name) && name != 'children';
  Object.keys(props).filter(isAttribute).forEach(name => {
      dom[name] = props[name];
  })
	// 处理子级元素
  const childElements = props.children || [];
  childElements.forEach(childElement => {
      return render(childElement, dom)
  });
  if(!parentElement.lastChild) {
    parentElement.appendChild(dom);
  } else {
    parentElement.replaceChild(dom, parentElement.lastChild)
  }
}

const element = createElement(
  "div",
  { id: "container" },
  createElement("input", { value: "foo", type: "text" }),
  createElement(
    "a",
    { href: "/bar" },
    "bar"
  ),
  createElement(
    "span",
    { onClick: e => alert("Hi") },
    "click me"
  )
);

const createElement = (type, config, ...args)  => {
  const props = {...config};
  const childrens = !!args.length ? [].concat(...args) : [];
  props.children = childrens.filter(c => c!= null && c != false).map(c=> c instanceof Object ? c : createTextElement(c));
  return {type , props}
}
// 单独处理文本元素
const createTextElement = (value) => {
  return createElement(TEXT_ELEMENT, { nodeValue: value });
}

开发环境搭建

npx webpack init

? Which of the following JS solutions do you want to use? ES6
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? CSS only
? Will you be using PostCSS in your project? No
? Do you want to extract CSS for every file? No
? Do you like to install prettier to format generated configuration? No
? Pick a package manager: npm

npm install --save-dev @babel/plugin-transform-react-jsx

	test: /\.(js|jsx)$/i,
  loader: 'babel-loader',
  options: {
      presets: ['@babel/preset-env'],
			// 引入插件， 修改pragma 
      plugins: [['@babel/plugin-transform-react-jsx', {pragma: 'createElement'}]],
  },