实现react教程

    仅实现下棋交互功能 https://codepen.io/gaearon/pen/VbbVLg?editors=0010

    main.html

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="viewport" content="width=device-width">
    6.   <title>JS Bin</title>
    7.   <style>
    8.     body {
    9.   font: 14px "Century Gothic", Futura, sans-serif;
    10.   margin: 20px;
    11. }
    13. ol, ul {
    14.   padding-left: 30px;
    15. }
    17. .board-row:after {
    18.   clear: both;
    19.   content: "";
    20.   display: table;
    21. }
    23. .status {
    24.   margin-bottom: 10px;
    25. }
    27. .square {
    28.   background: #fff;
    29.   border: 1px solid #999;
    30.   float: left;
    31.   font-size: 24px;
    32.   font-weight: bold;
    33.   line-height: 34px;
    34.   height: 34px;
    35.   margin-right: -1px;
    36.   margin-top: -1px;
    37.   padding: 0;
    38.   text-align: center;
    39.   width: 34px;
    40. }
    42. .square:focus {
    43.   outline: none;
    44. }
    46. .kbd-navigation .square:focus {
    47.   background: #ddd;
    48. }
    50. .game {
    51.   display: flex;
    52.   flex-direction: row;
    53. }
    55. .game-info {
    56.   margin-left: 20px;
    57. }
    59.   </style>
    60. </head>
    61. <body>
    62. <div id="root"></div>
    64. <script src="./dist/main.js">
    65. </script>
    66. </body>
    67. </html>

    tic.js

    1. import {render, Component, createElement} from './toy-react.js'
    2. // window.a = <div id="app" class="head"></div>
    4. class Square extends Component {
    5.     constructor(props) {
    6.       super(props);
    7.       this.state = {
    8.         value: null,
    9.       };
    10.     }
    12.     render() {
    13.       return (
    14.         <button
    15.           className="square"
    16.           onClick={() => this.setState({value: 'X'})}
    17.         >
    18.           {this.state.value}
    19.         </button>
    20.       );
    21.     }
    22.   }
    24.   class Board extends Component {
    25.     renderSquare(i) {
    26.       return <Square />;
    27.     }
    29.     render() {
    30.       const status = 'Next player: X';
    32.       return (
    33.         <div>
    34.           <div className="status">{status}</div>
    35.           <div className="board-row">
    36.             {this.renderSquare(0)}
    37.             {this.renderSquare(1)}
    38.             {this.renderSquare(2)}
    39.           </div>
    40.           <div className="board-row">
    41.             {this.renderSquare(3)}
    42.             {this.renderSquare(4)}
    43.             {this.renderSquare(5)}
    44.           </div>
    45.           <div className="board-row">
    46.             {this.renderSquare(6)}
    47.             {this.renderSquare(7)}
    48.             {this.renderSquare(8)}
    49.           </div>
    50.         </div>
    51.       );
    52.     }
    53.   }
    55.   class Game extends Component {
    56.     render() {
    57.       return (
    58.         <div className="game">
    59.           <div className="game-board">
    60.             <Board />
    61.           </div>
    62.           <div className="game-info">
    63.             <div>{/* status */}</div>
    64.             <ol>{/* TODO */}</ol>
    65.           </div>
    66.         </div>
    67.       );
    68.     }
    69.   }
    71.   // ========================================
    73.   render(
    74.     <Game />,
    75.     document.getElementById('root')
    76.   );

    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.         if (name == 'onClick') {
    12.             console.log(name)
    13.         }
    14.         this.props[name] = value
    15.     }
    16.     appendChild(component) {
    17.         this.children.push(component)
    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 {
    66.     constructor(type) {
    67.         this.root = document.createElement(type)
    68.     }
    69.     setAttribute(name, value) {
    70.         // 过滤事件， 如onClick
    71.         if (name.match(/^on([\s\S]+)$/)) {
    72.             // console.log(RegExp.$1)
    73.             // 绑定事件， Click转click
    74.             this.root.addEventListener(RegExp.$1.replace(/^[\s\S]/, c => c.toLowerCase()), value)
    75.         } else if (name == 'className'){
    76.             this.setAttribute('class', value)
    77.         } else {
    78.             this.root.setAttribute(name, value)
    79.         }
    80.         this.root.setAttribute(name, value)
    81.     }
    82.     appendChild(component) {
    83.         // this.root.appendChild(component.root)
    84.         let range = document.createRange()
    85.         range.setStart(this.root, this.root.childNodes.length)
    86.         range.setEnd(this.root, this.root.childNodes.length)
    87.         component[RENDER_TO_DOM](range)
    88.     }
    89.     [RENDER_TO_DOM](range){
    90.         range.deleteContents()
    91.         range.insertNode(this.root)
    92.     }
    93. }
    95. class TextWrapper {
    96.     constructor(content) {
    97.         this.root = document.createTextNode(content)
    98.     }
    99.     [RENDER_TO_DOM](range){
    100.         range.deleteContents()
    101.       range.insertNode(this.root)
    102.     }
    103. }
    105. export function createElement(tagName, attributes, ...rest) {
    106.     let element
    107.     if (typeof tagName == 'string') {
    108.         element = new ElementWrapper(tagName)
    109.     } else {
    110.         element = new tagName
    111.     }
    112.     if (typeof attributes === 'object' && attributes instanceof Object) {
    113.         for (const key in attributes) {
    114.             element.setAttribute(key, attributes[key])
    115.         }
    116.     }
    117.     let insertChildren = (children) => {
    118.         // console.log(children)
    119.         for(const child of children) {
    120.             if (typeof child == 'string') {
    121.                 child = new TextWrapper(child) 
    122.             }
    123.             if (child === null) {
    124.                 continue;
    125.             }
    126.             if ((typeof child == 'object') && (child instanceof Array)) {
    127.                 insertChildren(child)
    128.             } else {
    129.                 element.appendChild(child)
    130.             }
    131.         }
    132.     }
    133.     insertChildren(rest)
    134.     return element
    135. }
    137. export function render(component, parentElement) {
    138.     // parentElement.appendChild(component.root)
    139.     let range = document.createRange()
    140.     range.setStart(parentElement, 0)
    141.     range.setEnd(parentElement, parentElement.childNodes.length)
    142.     component[RENDER_TO_DOM](range)
    143. }

    终极交互 https://codepen.io/gaearon/pen/gWWZgR?editors=0010

    不支持函数组件， 需要修改为类组件

    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. render(<Game />, document.getElementById("root"));
    130.   function calculateWinner(squares) {
    131.     const lines = [
    132.       [0, 1, 2],
    133.       [3, 4, 5],
    134.       [6, 7, 8],
    135.       [0, 3, 6],
    136.       [1, 4, 7],
    137.       [2, 5, 8],
    138.       [0, 4, 8],
    139.       [2, 4, 6]
    140.     ];
    141.     for (let i = 0; i < lines.length; i++) {
    142.       const [a, b, c] = lines[i];
    143.       if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
    144.         return squares[a];
    145.       }
    146.     }
    147.     return null;
    148.   }