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!