mentor-program-day121

運轉吧，大腦。

進度

今天把 todo list 做最後的 UI 調整，到這邊告一段落：

接下來，為了做出五子棋，首先得去先研究 React 官方教學 的圈圈叉叉。

不管是寫什麼應用程式，真的都是魔鬼藏在細節裡。原來一個簡單的圈圈叉叉也能藏這麼多細節在裡面。

目前還在研究整體思路，希望明天能把它弄清楚。

學到的事情

在讀官方文件的範例時，深深體會到 Closure 的重要性，拿下面這段 code 來舉例：

renderSquare(i) {
  return (
    <Square
      value={this.state.squares[i]}
      onClick={() => this.handleClick(i)}
    />
  );
}

如果不懂 Closure，絕對不能理解為什麼 <Square /> 裡可以拿到 i 的值：

class Square extends React.Component {
  render() {
    return (
      <button
        className="square"
        // 其實就等於 () => this.handleClick(i)
        onClick={() => this.props.onClick()}
      >
        {this.props.value}
      </button>
    );
  }
}

因為 Closure 的關係，每個 <Square /> 在綁定 onClick 時就已經被指定 i 的值了，所以其實能看成這樣子：

<button  onClick={() => this.props.onClick(0)}></button>
<button  onClick={() => this.props.onClick(1)}></button>
<button  onClick={() => this.props.onClick(2)}></button>
...

只能說這就是 React 有趣但也困難的地方，理解的話就會覺得「哇，原來還有這招」，不理解的話就會覺得「What the… 這啥」。

題外話

窯烤的馬鈴薯有一個窯烤的香味（廢話？

期許

希望明天把圈圈叉叉的「時光旅行」搞懂。