一年多之前入门react的时候，这个入门的井字棋小游戏让我研究了很久也没太弄懂。后来因为一些原因去学vue了，然后一直也没太深入弄react，最近实习公司的技术栈是react，于是顺便仔细研究一下之前让我一脸懵逼的小游戏。主要是记录一些收获和疑惑

这个教程里有几个值得学习的点

• 状态提升
• 不直接修改/改变底层数据
• 无状态的函数组件
• diff算法的key

今天主要是来实现一下这几个课后作业~

1.在游戏历史记录列表显示每一步棋的坐标

这里主要是添加了一个 locationHistory 二维数组，存储每一步下棋的位置。（主要是不想破坏history的数据结构

接着是提取记录的位置，找坐标的处理

最终结果

2.在历史记录中加粗显示当前选择

这个比较简单，简单做一个判断就可

3.使用两个循环渲染格子而不是写死

这个参考了一个博客 juejin.cn/post/689385…。如何存储 JSX 是我比较疑惑的点。参考了别人的代码后发现是用数组存，发现确实可以。现在还不太清楚为什么可以这么存（

最后

记录了一些对react官网小游戏疑惑，欢迎交流