站点工具

用户工具


手写简易React(JSX与虚拟DOM)

JSX与虚拟DOM

我们在使用React的时候,源码里写的都是JSX。JSX代码在运行之前会被Babel的\@babel/preset-react 预设里的插件转换成JavaScript后再运行。

let div = <div className="header">hello jirengu</div>;

转换后的JavaScript

let div = React.createElement("div", {className: "header"}, "hello jirengu");

动手试试看!

上面的代码没法运行,因为目前还不存在React.createElement这个东西。我们补充代码,提前增加一个React对象,里面包含createElement方法。这个方法接收输入参数,返回一个对象。

const React = {
 createElement(tag, attrs, ...children) {
   return {
     tag,
     attrs,
     children
   }
 }
};
 
//let div = React.createElement("div", {className: "header"}, "hello jirengu"); 
let div = <div className="header">hello jirengu</div>;
console.log(div);
/*
{
  tag: "div",
  attrs:{className: "header"},
  children: ["hello"]
}
*/

在【这里】看看控制台的输出。输出的这个div已经变成一个对象,包含原始JSX的全部信息。这个对象就叫做虚拟DOM(即:假的,目前还不存在的,但后面要被渲染放到页面变成真实DOM的对象)。

虚拟DOM的渲染

function render(vdom, container) {
  let node;
  if(typeof vdom === 'string') {
    node = document.createTextNode(vdom);
  } 
  if(typeof vdom === 'object') {
    node = document.createElement(vdom.tag);
    vdom.children.forEach(childVdom => render(childVdom, node));
  }
  setAttribute(node, vdom.attrs);
  container.appendChild(node);
}
 
function setAttribute(node, attrs) {
 for(let key in attrs) {
   if(key.startsWith('on')) {   //<p onClick={xxx}></p>
     node[key.toLocaleLowerCase()] = attrs[key];
   } else if(key === 'style') {  //<p style={xxx}></p>
     Object.assign(node.style, attrs[key]);
   } else {
     node[key] = attrs[key];    //<p className={xxx}></p>
   } 
 }
}
 
const ReactDom = {
 render(vdom, container) {
   container.innerHTML = '';
   render(vdom, container);
 }
};

上述代码中,render函数的作用是把虚拟DOM对象渲染后放入到container元素内。为了便于调用,我们新建一个ReactDom对象,包含一个render方法,作用是清空容器,渲染虚拟DOM到容器。

把以上代码做一个整理

const React = {
  createElement(tag, attrs, ...children) {
    return {tag, attrs, children};
  }
};
 
const ReactDom = {
  render(vdom, container) {
    container.innerHTML = "";
    render(vdom, container);
  }
};
 
function render(vdom, container) {
  let node;
  if (typeof vdom === "string") {
    node = document.createTextNode(vdom);
  }
  if (typeof vdom === "object") {
    node = document.createElement(vdom.tag);
    setAttribute(node, vdom.attrs);
    vdom.children.forEach((childVdom) => render(childVdom, node));
  }
  container.appendChild(node);
}
 
function setAttribute(node, attrs) {
  for (let key in attrs) {
    if (key.startsWith("on")) {
      node[key.toLocaleLowerCase()] = attrs[key];
    } else if (key === "style") {
      Object.assign(node.style, attrs[key]);
    } else {
      node[key] = attrs[key];
    }
  }
}
 
//测试代码
let str = "jirengu";
let styleObj = {
  color: "red",
  fontSize: "30px"
};
 
ReactDom.render(
  <div className="wrap">
    Hello {str}
    <button className="btn" onClick={() => console.log("click me")}>
      Click me!
    </button>
    <p style={styleObj}>I have style</p>
  </div>,
  document.body
);

可在【这里】运行测试效果。

以上代码是一个最粗浅的React雏形。自己后续可尝试实现Class组件、setState、函数组件、DOM diff、Hooks等。下方是视频教程和源码可供参考(源码可切换分支看一步一步实现的过程)。

饥人谷一直致力于培养有灵魂的编程者,打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实,他们以饥人谷为起点,足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程:加微信 xiedaimala03,官网:https://jirengu.com

若愚 · 2023/02/09 10:46 · 手写简易react_手写系列六.txt