zoukankan      html  css  js  c++  java
  • React机制浅析

    在写React代码时,避免不了提前想想页面的结构,当然这也属于HTML布局了,比如哪些组件里需要包含哪些组件。遂突发奇想,如果试着把子组件的render内容替换原组件,会是个啥?

    比如拿 https://reactjs.org/tutorial/tutorial.html 的例子来试下~

    1. Game组件

    属性+方法:

    this.state.squares;
    this.handleClick(i);

    render():

    <div className="game">
      <div className="game-board">
        <Board 
          squares={current.squares}
          onClick={(i) => this.handleClick(i)}
        />
      </div>
      <div className="game-info">
        <div>{status}</div>
        <ol>{}</ol>
      </div>
    </div>

    包含了一个Board组件,属性有 squares + onClick(i)。我们把Board组件用它的render()替换

    2. 用render()替换Board组件

    <div className="game">
      <div className="game-board">
        <div>
          <div className="board-row">
            {this.renderSquare(0)}
            {this.renderSquare(1)}
            {this.renderSquare(2)}
          </div>
          <div className="board-row">
            {this.renderSquare(3)}
            {this.renderSquare(4)}
            {this.renderSquare(5)}
          </div>
          <div className="board-row">
            {this.renderSquare(6)}
            {this.renderSquare(7)}
            {this.renderSquare(8)}
          </div>
        </div>
      </div>
      <div className="game-info">
        <div>{status}</div>
        <ol>{}</ol>
      </div>
    </div>

    因为this.renderSquare()方法实际上是实例化了Square组件,所以再用Square组件替换this.renderSquare()

    3. Square组件替换 this.renderSquare()

    <div className="game">
      <div className="game-board">
        <div>
          <div className="board-row">
            <button className="square" onClick={() => onClick(0)}>
              {squares[0]}
            </button>
            <button className="square" onClick={() => onClick(1)}>
              {squares[1]}
            </button>
            <button className="square" onClick={() => onClick(2)}>
              {squares[2]}
            </button>
          </div>
          <div className="board-row">
            <button className="square" onClick={() => onClick(3)}>
              {squares[3]}
            </button>
            <button className="square" onClick={() => onClick(4)}>
              {squares[4]}
            </button>
            <button className="square" onClick={() => onClick(5)}>
              {squares[5]}
            </button>
          </div>
          <div className="board-row">
            <button className="square" onClick={() => onClick(6)}>
              {squares[6]}
            </button>
            <button className="square" onClick={() => onClick(7)}>
              {squares[7]}
            </button>
            <button className="square" onClick={() => onClick(8)}>
              {squares[8]}
            </button>
          </div>
        </div>
      </div>
      <div className="game-info">
        <div>{status}</div>
        <ol>{}</ol>
      </div>
    </div>

    是不是已经很熟悉了? ^_^

    因为这里的 onClick(i) 是组件Board的属性,再将其替换成Game组件里的 this.handleClick(i)方法,结果如下:

    <div className="game">
      <div className="game-board">
        <div>
          <div className="board-row">
            <button className="square" onClick=this.handleClick(0)>
              {squares[0]}
            </button>
            <button className="square" onClick=this.handleClick(1)>
              {squares[1]}
            </button>
            <button className="square" onClick=this.handleClick(2)>
              {squares[2]}
            </button>
          </div>
          <div className="board-row">
            <button className="square" onClick=this.handleClick(3)>
              {squares[3]}
            </button>
            <button className="square" onClick=this.handleClick(4)>
              {squares[4]}
            </button>
            <button className="square" onClick=this.handleClick(5)>
              {squares[5]}
            </button>
          </div>
          <div className="board-row">
            <button className="square" onClick=this.handleClick(6)>
              {squares[6]}
            </button>
            <button className="square" onClick=this.handleClick(7)>
              {squares[7]}
            </button>
            <button className="square" onClick=this.handleClick(8)>
              {squares[8]}
            </button>
          </div>
        </div>
      </div>
      <div className="game-info">
        <div>{status}</div>
        <ol>{}</ol>
      </div>
    </div>

    Soga~,原形毕露了!

    这样走下来一遍,对React的render()机制大概有个谱,更重要的是理解组件属性的传递过程。

    Done!

  • 相关阅读:
    Java EE (3) -- Java EE 6 Web Services Developer Certified Expert(1z0-897)
    二、用电信号传输 TCP/IP 数据(1)
    P2384 最短路 洛谷
    T1231 最优布线 codevs
    P3371 单源最短路径【模板】 洛谷
    spfa【模板】
    P1396 营救 洛谷
    解决Android加固多进程ptrace反调试的思路整理
    Android Dex文件格式解析
    360加固保so动态脱壳
  • 原文地址:https://www.cnblogs.com/hello-yz/p/8540771.html
Copyright © 2011-2022 走看看