实现setState（监听state， 调用rerender方法）

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.             name: 'Jack'
  10.         }
  11.     }
  12.     render () {
  13.         return <div>
  14.             <button onClick={() => {this.setState({count: this.state.count+1})} }>add</button>
  15.             <p>count:{this.state.count.toString()}</p>
  16.             <p>name:{this.state.name}</p>
  17.             {this.children}
  18.         </div>
  19.     } 
  20. }
  23. window.a = <Hello id="app" class="head">
  24.     <span>1</span>
  25.     <span>2</span>
  26.     <span><h1>3</h1><h1>4</h1></span>
  27.     hello
  28. </Hello>
  30. 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.         this._range = null;
  9.     }
  10.     setAttribute(name, value) {
  11.         this.props[name] = value
  12.     }
  13.     appendChild(component) {
  14.         this.children.push(component)
  16.     }
  17.     [RENDER_TO_DOM](range) {
  18.         this._range = range
  19.         this.render()[RENDER_TO_DOM](range)
  20.     }
  21.     rerender() {
  22.         this._range.deleteContents()
  23.         this[RENDER_TO_DOM](this._range)
  24.     }
  25.     setState (newState) {
  26.         // console.log(newState)
  27.         // 没有state 或者 不是对象, 短路
  28.         if (this.state == null || typeof this.state != "object") {
  29.             this.setState = newState
  30.             this.rerender()
  31.             return;
  32.         }
  33.         // 深拷贝
  34.         let merge = (oldState, newState) => {
  35.             for (let p in newState) {
  36.                 if (oldState[p] == null || typeof oldState[p] != "object") {
  37.                     oldState[p] = newState[p]
  38.                 } else {    
  39.                     merge(oldState[p], newState[p])
  40.                 }
  41.             }
  42.         }
  43.         merge(this.state, newState)
  44.         this.rerender()
  45.     }
  46.     // get root() {
  47.     //     if (!this._root) {
  48.     //         this._root = this.render().root
  49.     //     }
  50.     //     return this._root
  51.     // }
  52. }
  54. class ElementWrapper {
  55.     constructor(type) {
  56.         this.root = document.createElement(type)
  57.     }
  58.     setAttribute(name, value) {
  59.         // 过滤事件， 如onClick
  60.         if (name.match(/^on([\s\S]+)$/)) {
  61.             // console.log(RegExp.$1)
  62.             // 绑定事件， Click转click
  63.             this.root.addEventListener(RegExp.$1.replace(/^[\s\S]/, c => c.toLowerCase()), value)
  64.         } else {
  65.             this.root.setAttribute(name, value)
  66.         }
  67.         this.root.setAttribute(name, value)
  68.     }
  69.     appendChild(component) {
  70.         // this.root.appendChild(component.root)
  71.         let range = document.createRange()
  72.         range.setStart(this.root, this.root.childNodes.length)
  73.         range.setEnd(this.root, this.root.childNodes.length)
  74.         component[RENDER_TO_DOM](range)
  75.     }
  76.     [RENDER_TO_DOM](range){
  77.         range.deleteContents()
  78.         range.insertNode(this.root)
  79.     }
  80. }
  82. class TextWrapper {
  83.     constructor(content) {
  84.         this.root = document.createTextNode(content)
  85.     }
  86.     [RENDER_TO_DOM](range){
  87.         range.deleteContents()
  88.       range.insertNode(this.root)
  89.     }
  90. }
  92. export function createElement(tagName, attributes, ...rest) {
  93.     let element
  94.     if (typeof tagName == 'string') {
  95.         element = new ElementWrapper(tagName)
  96.     } else {
  97.         element = new tagName
  98.     }
  99.     if (typeof attributes === 'object' && attributes instanceof Object) {
  100.         for (const key in attributes) {
  101.             element.setAttribute(key, attributes[key])
  102.         }
  103.     }
  104.     let insertChildren = (children) => {
  105.         // console.log(children)
  106.         for(const child of children) {
  107.             if (typeof child == 'string') {
  108.                 child = new TextWrapper(child) 
  109.             }
  110.             if ((typeof child == 'object') && (child instanceof Array)) {
  111.                 insertChildren(child)
  112.             } else {
  113.                 element.appendChild(child)
  114.             }
  115.         }
  116.     }
  117.     insertChildren(rest)
  118.     return element
  119. }
  121. export function render(component, parentElement) {
  122.     // parentElement.appendChild(component.root)
  123.     let range = document.createRange()
  124.     range.setStart(parentElement, 0)
  125.     range.setEnd(parentElement, parentElement.childNodes.length)
  126.     component[RENDER_TO_DOM](range)
  127. }