基于range的DOM绘制
    main.js

    1. import {render, Component, createElement} from './toy-react.js'
    2. // window.a = <div id="app" class="head"></div>
    4. class Hello extends Component {
    5.     constructor () {
    6.         super()
    7.         this.state = {
    8.             count: 0
    9.         }
    10.     }
    11.     render () {
    12.         return <div>
    13.             <p>{this.state.count.toString()}</p>
    14.             {this.children}
    15.         </div>
    16.     } 
    17. }
    20. window.a = <Hello id="app" class="head">
    21.     <span>1</span>
    22.     <span>2</span>
    23.     <span><h1>3</h1><h1>4</h1></span>
    24.     hello
    25. </Hello>
    27. render(window.a, document.body)

    toy-react.js

    1. const RENDER_TO_DOM = Symbol('render to dom')
    3. export class Component {
    4.     constructor() {
    5.         this.props = Object.create(null);
    6.         this.children = [];
    7.         this._root = null;
    8.     }
    9.     setAttribute(name, value) {
    10.         this.props[name] = value
    11.     }
    12.     appendChild(component) {
    13.         this.children.push(component)
    15.     }
    16.     [RENDER_TO_DOM](range) {
    17.         this.render()[RENDER_TO_DOM](range)
    18.     }
    19.     // get root() {
    20.     //     if (!this._root) {
    21.     //         this._root = this.render().root
    22.     //     }
    23.     //     return this._root
    24.     // }
    25. }
    27. class ElementWrapper {
    28.     constructor(type) {
    29.         this.root = document.createElement(type)
    30.     }
    31.     setAttribute(name, value) {
    32.         this.root.setAttribute(name, value)
    33.     }
    34.     appendChild(component) {
    35.         // this.root.appendChild(component.root)
    36.         let range = document.createRange()
    37.         range.setStart(this.root, this.root.childNodes.length)
    38.         range.setEnd(this.root, this.root.childNodes.length)
    39.         component[RENDER_TO_DOM](range)
    40.     }
    41.     [RENDER_TO_DOM](range){
    42.         range.deleteContents()
    43.       range.insertNode(this.root)
    44.     }
    45. }
    47. class TextWrapper {
    48.     constructor(content) {
    49.         this.root = document.createTextNode(content)
    50.     }
    51.     [RENDER_TO_DOM](range){
    52.         range.deleteContents()
    53.       range.insertNode(this.root)
    54.     }
    55. }
    57. export function createElement(tagName, attributes, ...rest) {
    58.     let element
    59.     if (typeof tagName == 'string') {
    60.         element = new ElementWrapper(tagName)
    61.     } else {
    62.         element = new tagName
    63.     }
    64.     if (typeof attributes === 'object' && attributes instanceof Object) {
    65.         for (const key in attributes) {
    66.             element.setAttribute(key, attributes[key])
    67.         }
    68.     }
    69.     let insertChildren = (children) => {
    70.         console.log(children)
    71.         for(const child of children) {
    72.             if (typeof child == 'string') {
    73.                 child = new TextWrapper(child) 
    74.             }
    75.             if ((typeof child == 'object') && (child instanceof Array)) {
    76.                 insertChildren(child)
    77.             } else {
    78.                 element.appendChild(child)
    79.             }
    80.         }
    81.     }
    82.     insertChildren(rest)
    83.     return element
    84. }
    86. export function render(component, parentElement) {
    87.     // parentElement.appendChild(component.root)
    88.     let range = document.createRange()
    89.     range.setStart(parentElement, 0)
    90.     range.setEnd(parentElement, parentElement.childNodes.length)
    91.     component[RENDER_TO_DOM](range)
    92. }