リアクトの手動実装（シリーズI）

リアクト

- まず第一に、webpackまたは小包を使用する（ドキュメントを使用する）: [https://..org/getting_.html]() )環境を構築する
- 新しいReactの下のsrcディレクトリ内のこの時間.jsファイルを手動で作成する

 let React = {}
 React.createElement = (type,attrs,...children) => {
 if(!type) {
 return
 }
 return {
 type,
 attrs,
 children
 }
 }
 export default React
 上記のコードでは、typeはタグの種類を指し、attrsは値を指し、childrenは子レベルである。
  
 <div id="app">
 <span>hello react</span>
 </div>

今回、index.jsにReactを導入することができますが、その方法は非常に簡単ではありません！

React-DOMの実装

次に、第二段階は、仮想ドムレンダリングの実装であり、また、新しいreact-domの下のsrcディレクトリにある.js 

function ReactDOM(vnode, contanier) {
 let element;
 const { type, attrs, children } = vnode;
 
 //1.DOMがテキストノードであるかどうかを判断するために、はい、次にテキストノードを作成し、そうでない場合は、DOMノードの作成
 
 if (typeof vnode === "string") {
 element = document.createTextNode(vnode);
 } else {
 element = document.createElement(type);
 }
 //2.DOMにattrsを差し込む
 
 setAttribute(element, attrs);
 
 //3.ページに表示する
 contanier.appendChild(element);
 
 //ここでは、子レベルがあるかどうかを判断することであり、再帰的に要素に一つずつレンダリングする必要がある
 if (children && children.length) {
 children.forEach((node) => {
 ReactDOM(node, element);
 });
 }
}
//setAttributeメソッドを実装する
 1.値があるかどうか、判断の次のステップがあり、そうでない場合は返す
 2.値は3つのカテゴリに分かれており、1つは、通常のid、classNameなどであり、別のスタイルである
 
function setAttribute(element, attrs) {
 if (!element || !attrs) {
 return;
 }
 Object.keys(attrs).forEach((attr) => {
 const value = attrs[attr];
 
 if (attr === "className") {
 element.setAttribute("class", value);
 } else if (attr === "style") {
 if (typeof value === "string") {
 element.style.cssText = value;
 } else if (isObject(value)) {
 let str = "";
 Object.keys(value).forEach((ele) => {
 str += ele + ":" + value[ele] + ";";
 element.style.cssText = str;
 });
 }
 } else {
 element.setAttribute(attr, value);
 }
 });
}
//オブジェクトかどうかを判断する
function isObject(obj) {
 return Object.prototype.toString.call(obj) === "[object Object]";
}
export default ReactDOM;

ここでは、reactのバージョン1.0の基本的な実装について、index.jsで使用しています！

import React from './src/react'
import ReactDOM from './src/react_-dom'
ReactDOM(
 <div id="app" className="app-class">
 oioioio
 <div
 id="span"
 className="span-class"
 style={{ color: "#f00", width: "100px" }}
 >
 span
 </div>
 </div>,
 document.getElementById("root")
);