mentor-program-day122

不認輸，繼續奮鬥。

進度

今天跟圈圈叉叉奮鬥了一整天，差不多快釐清整個思路了，還差一點就完成了。先附上第一篇筆記 想用 React 做出五子棋嗎？先從圈圈叉叉開始吧，相信明天就能搞定，加油！

學到的事情

在讀官方文件時，發現背後還藏了蠻多那些進階 JavaScript 的知識，最常見的就是 this 跟 closure。

舉例來說，官方在處理 this 值是這樣做的：

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    this.setState({squares: squares});
  }

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        // 用 arrow function 來綁定
        onClick={() => this.handleClick(i)}
      />
    );
  }
  // ...
}

箭頭函式雖然寫起來乾淨，但缺點是可讀性不是那麼好，所以我原本看不太懂官方特別強調這邊用箭頭函式的原因是什麼。不過後來去 codepen 轉換一下寫法就懂了：

renderSquare () {
  return (
    <Square
      value={this.state.squares[i]}
      // 外面包一層 function
      onClick={function wrapper () {
        // 1. onClick 時 呼叫 wrapper 
        // 2. 執行 wrapper 時又再呼叫 this.handleClick(i)
        // 3. 至於 i 的值會是透過 scope chain 找到當初執行 renderSquare 的 i
        this.handleClick(i)
      }}
    />
  )
}

理解完這些以後，我才明白當你對一個東西不了解時，你可以試著像這樣抽絲剝繭，把那些簡化後的東西打一步一步打回原形。通常這樣做以後就會慢慢找出答案了。

題外話

聽說南韓已經開始放寬防疫制度了，台灣也似乎也打算這樣做。

不知道未來會怎麼樣，總之還是希望大家能平安無事就好。

期許

明天要把圈圈叉叉搞定，然後開始搞五子棋。