ReactDom ReactDomは、ユーザーが書いたReactDOMとブラウザ内のDOMとの間のマッピングテーブルであり、DOMを構築し、随時更新を維持するために使用されるjsオブジェクトである.import React, { Component } from 'react';
import { render } from 'react-dom';
let element = hello
word
;
console.log(element)
render(element, document.getElementById('root'));
babelは、以上のコードをvar element = React.createElement("h1", {
id: "title"
}, "hello", React.createElement("h2", null, "word"));
Reactにコンパイルする.createElementの実装原理は、function createElement(type, options={}, ...children){
return {
type,
props: {...options, children}
}
}
のように、elementはtype、propsの2つのコア属性を含むネストされたオブジェクトである. JSXのTips JSXレンダリングエンジンの原理に基づいて、JSX構文は以下の点に注意する必要があります. jsキーワードの使用を回避し、class-->classNameなどのアルパカルールを使用します. 効率的なDOM diffのために、リストにkey属性を追加します. ReactDomは可変オブジェクトであり、propsプロパティを変更することによってDOMを再レンダリングすることはできません. 繰り返しレンダリングもDOMdiffされます.既存のDOMをできるだけ多重化し、必要なDOMのみ更新します. React.createElement基本原理const hasSymbol = typeof symbol == "function" && symbol.for;
const REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for("react.element") : 0xeac7;
function createElement(type, config, children) {
let props = {};
for (let key in config) {
props[key] = config[key];
}
const childrenLength = arguments.length - 2;
if (childrenLength == 1) {
props.children = children;
} else if (childrenLength > 1) {
props.children = Array.prototype.slice.call(arguments, 2);
}
return { $$typeof: REACT_ELEMENT_TYPE, type, props };
}
class Component {
constructor(props) {
this.props = props;
}
static isReactComponent = true;
}
export default { createElement, Component };
ReactDom.renderの基本原理/**
*@param {*} node React ， ：React 、 、
*@param {*} parent ， DOM
*/
function render(node, parent) {
if (typeof node === "string") {
return parent.appendChild(document.createTextNode(node));
}
let type, props;
type = node.type;
props = node.props;
if(type.isReactComponent){//
let element = new type(props).render();
type = element.type;
props = element.props;
if(typeof element.type == 'function'){//
return render(element, parent)
}
}else if (typeof type === "function") {// ~~~~
let element = type(props);
type = element.type;
props = element.props;
if(typeof element.type == 'function'){
return render(element, parent)
}
}
let domElement = document.createElement(type); // DOM
for (let propName in props) {
if (propName == "children") { // children，
let children = props.children;
if (!Array.isArray(children)) {// ，
children = [children];
}
children.forEach(child => render(child, domElement));
} else if (propName === "className") {
domElement.className = props.className;
} else if (propName === "style") {
let styleObject = props.style;
for (let attr in styleObject) domElement.style[attr] = styleObject[attr];
} else {
domElement.setAttribute(propName, props[propName]);
}
}
parent.appendChild(domElement);
}
export default {
render
};