实现虚拟Dom

    tic.final.js

    1. import {render, Component, createElement} from './toy-react.js'
    3. class Square extends Component {
    4.     render() {
    5.         return (
    6.             <button className="square" onClick={this.props.onClick}>
    7.               {this.props.value}
    8.             </button>
    9.           );
    10.     }
    11.   }
    13.   class Board extends Component {
    14.     renderSquare(i) {
    15.       return (
    16.         <Square
    17.           value={this.props.squares[i]}
    18.           onClick={() => this.props.onClick(i)}
    19.         />
    20.       );
    21.     }
    23.     render() {
    24.       return (
    25.         <div>
    26.           <div className="board-row">
    27.             {this.renderSquare(0)}
    28.             {this.renderSquare(1)}
    29.             {this.renderSquare(2)}
    30.           </div>
    31.           <div className="board-row">
    32.             {this.renderSquare(3)}
    33.             {this.renderSquare(4)}
    34.             {this.renderSquare(5)}
    35.           </div>
    36.           <div className="board-row">
    37.             {this.renderSquare(6)}
    38.             {this.renderSquare(7)}
    39.             {this.renderSquare(8)}
    40.           </div>
    41.         </div>
    42.       );
    43.     }
    44.   }
    46.   class Game extends Component {
    47.     constructor(props) {
    48.       super(props);
    49.       this.state = {
    50.         history: [
    51.           {
    52.             squares: Array(9).fill(null)
    53.           }
    54.         ],
    55.         stepNumber: 0,
    56.         xIsNext: true
    57.       };
    58.     }
    60.     handleClick(i) {
    61.       const history = this.state.history.slice(0, this.state.stepNumber + 1);
    62.       const current = history[history.length - 1];
    63.       const squares = current.squares.slice();
    64.       if (calculateWinner(squares) || squares[i]) {
    65.         return;
    66.       }
    67.       squares[i] = this.state.xIsNext ? "X" : "O";
    68.       this.setState({
    69.         history: history.concat([
    70.           {
    71.             squares: squares
    72.           }
    73.         ]),
    74.         stepNumber: history.length,
    75.         xIsNext: !this.state.xIsNext
    76.       });
    77.     }
    79.     jumpTo(step) {
    80.       this.setState({
    81.         stepNumber: step,
    82.         xIsNext: (step % 2) === 0
    83.       });
    84.     }
    86.     render() {
    87.       const history = this.state.history;
    88.       const current = history[this.state.stepNumber];
    89.       const winner = calculateWinner(current.squares);
    91.       const moves = history.map((step, move) => {
    92.         const desc = move ?
    93.           'Go to move #' + move :
    94.           'Go to game start';
    95.         return (
    96.           <li key={move}>
    97.             <button onClick={() => this.jumpTo(move)}>{desc}</button>
    98.           </li>
    99.         );
    100.       });
    102.       let status;
    103.       if (winner) {
    104.         status = "Winner: " + winner;
    105.       } else {
    106.         status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    107.       }
    109.       return (
    110.         <div className="game">
    111.           <div className="game-board">
    112.             <Board
    113.               squares={current.squares}
    114.               onClick={i => this.handleClick(i)}
    115.             />
    116.           </div>
    117.           <div className="game-info">
    118.             <div>{status}</div>
    119.             <ol>{moves}</ol>
    120.           </div>
    121.         </div>
    122.       );
    123.     }
    124.   }
    126.   // ========================================
    128. let game = <Game />
    130. console.log(game);
    132. // render(game, document.getElementById("root"));
    134.   function calculateWinner(squares) {
    135.     const lines = [
    136.       [0, 1, 2],
    137.       [3, 4, 5],
    138.       [6, 7, 8],
    139.       [0, 3, 6],
    140.       [1, 4, 7],
    141.       [2, 5, 8],
    142.       [0, 4, 8],
    143.       [2, 4, 6]
    144.     ];
    145.     for (let i = 0; i < lines.length; i++) {
    146.       const [a, b, c] = lines[i];
    147.       if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
    148.         return squares[a];
    149.       }
    150.     }
    151.     return null;
    152.   }

    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.     get vdom() {
    18.         return this.render().vdom;
    19.     }
    20.     [RENDER_TO_DOM](range) {
    21.         this._range = range
    22.         this.render()[RENDER_TO_DOM](range)
    23.     }
    24.     rerender() {
    25.         // this._range.deleteContents()
    26.         // this[RENDER_TO_DOM](this._range)
    27.         // 先插入再删除
    28.         let oldRange = this._range;
    29.         let range = document.createRange();
    30.         range.setStart(oldRange.startContainer, oldRange.startOffset)
    31.         range.setEnd(oldRange.startContainer, oldRange.startOffset)
    32.         this[RENDER_TO_DOM](range)
    33.         oldRange.setStart(range.endContainer, range.endOffset)
    34.         oldRange.deleteContents()
    35.     }
    36.     setState (newState) {
    37.         // console.log(newState)
    38.         // 没有state 或者 不是对象, 短路
    39.         if (this.state == null || typeof this.state != "object") {
    40.             this.setState = newState
    41.             this.rerender()
    42.             return;
    43.         }
    44.         // 深拷贝
    45.         let merge = (oldState, newState) => {
    46.             for (let p in newState) {
    47.                 if (oldState[p] == null || typeof oldState[p] != "object") {
    48.                     oldState[p] = newState[p]
    49.                 } else {    
    50.                     merge(oldState[p], newState[p])
    51.                 }
    52.             }
    53.         }
    54.         merge(this.state, newState)
    55.         this.rerender()
    56.     }
    57.     // get root() {
    58.     //     if (!this._root) {
    59.     //         this._root = this.render().root
    60.     //     }
    61.     //     return this._root
    62.     // }
    63. }
    65. class ElementWrapper extends Component {
    66.     constructor(type) {
    67.         super(type)
    68.         this.type = type
    69.         this.root = document.createElement(type)
    70.     }
    71.     // setAttribute(name, value) {
    72.     //     // 过滤事件， 如onClick
    73.     //     if (name.match(/^on([\s\S]+)$/)) {
    74.     //         // console.log(RegExp.$1)
    75.     //         // 绑定事件， Click转click
    76.     //         this.root.addEventListener(RegExp.$1.replace(/^[\s\S]/, c => c.toLowerCase()), value)
    77.     //     } else if (name == 'className'){
    78.     //         this.setAttribute('class', value)
    79.     //     } else {
    80.     //         this.root.setAttribute(name, value)
    81.     //     }
    82.     //     this.root.setAttribute(name, value)
    83.     // }
    84.     // appendChild(component) {
    85.     //     // this.root.appendChild(component.root)
    86.     //     let range = document.createRange()
    87.     //     range.setStart(this.root, this.root.childNodes.length)
    88.     //     range.setEnd(this.root, this.root.childNodes.length)
    89.     //     component[RENDER_TO_DOM](range)
    90.     // }
    91.     get vdom() {
    92.         this.children = this.children.map(child => child.vdom);
    93.         return this
    94.     }
    95.     [RENDER_TO_DOM](range){
    96.         range.deleteContents()
    97.         range.insertNode(this.root)
    98.     }
    99. }
    101. class TextWrapper extends Component{
    102.     constructor(content) {
    103.         super(content)
    104.         this.content = content
    105.         this.root = document.createTextNode(content)
    106.     }
    107.     get vdom() {
    108.         return this;
    109.     }
    110.     [RENDER_TO_DOM](range){
    111.         range.deleteContents()
    112.       range.insertNode(this.root)
    113.     }
    114. }
    116. export function createElement(tagName, attributes, ...rest) {
    117.     let element
    118.     if (typeof tagName == 'string') {
    119.         element = new ElementWrapper(tagName)
    120.     } else {
    121.         element = new tagName
    122.     }
    123.     if (typeof attributes === 'object' && attributes instanceof Object) {
    124.         for (const key in attributes) {
    125.             element.setAttribute(key, attributes[key])
    126.         }
    127.     }
    128.     let insertChildren = (children) => {
    129.         // console.log(children)
    130.         for(const child of children) {
    131.             if (typeof child == 'string') {
    132.                 child = new TextWrapper(child) 
    133.             }
    134.             if (child === null) {
    135.                 continue;
    136.             }
    137.             if ((typeof child == 'object') && (child instanceof Array)) {
    138.                 insertChildren(child)
    139.             } else {
    140.                 element.appendChild(child)
    141.             }
    142.         }
    143.     }
    144.     insertChildren(rest)
    145.     return element
    146. }
    148. export function render(component, parentElement) {
    149.     // parentElement.appendChild(component.root)
    150.     let range = document.createRange()
    151.     range.setStart(parentElement, 0)
    152.     range.setEnd(parentElement, parentElement.childNodes.length)
    153.     component[RENDER_TO_DOM](range)
    154. }