React「一字棋」小遊戲英文版教程

根據React官網教程，實現「一字棋」小遊戲。邏輯比較簡單，拿來練練手，目的是為了培養一下純英文技術文檔的閱讀習慣，把握英文教程的語言表達方式。

教程鏈接：React Tutorial：https://reactjs.org/tutorial/tutorial.html

demo演示：

GIF

組件設計：

1、Game組件，由一個Board組件和遊戲步驟列表組成。Board是遊戲區域。右側文字列表保存了遊戲的歷史操作記錄，點擊某條記錄能返回至歷史步驟。

2、Board組件，由9個Square組件組成，這構成了遊戲畫布。

3、Square組件，渲染了單個Button，即遊戲操作按鈕。當點擊事件發生時，向畫布上添加一顆棋子，同時生成一條操作記錄。

幾點小結：

1、react提倡，組件細分越小越好，一個組件的功能越簡單越好。

2、父子組件之間通過props來傳遞數據，這數據可以是父組件中的state數據，也可以事件處理器。

3、在改變state時，要先複製一份state再去修改它，不建議直接修改state（可控組件）。

4、當多個子組件需要共享某部分數據時，Lifting State Up，把這部分數據放在它們共同的父組件中。

5、一個性能優化技巧，在列表循環時，給每一個列表項都加一個唯一的key，這能大大提升列表變化時Diff演算法的速度。

參考資料：

React Tutorial：https://reactjs.org/tutorial/tutorial.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！