React Hooks + Typescript实现贪吃蛇小游戏

项目地址(Github)

初始化项目

react 16.8已经正式支持react hooks的使用，开发者可以通过官方推荐的create react app创建一个基于typescript + react16.8(hooks)的初始化项目模板（直接根据引导创建即可，无需额外的初始化配置）。

潜在的问题：使用npm进行安装可能带来一些bug，这些bug目前还没有被修复。如果npm i之后使用npm start无法启动项目。可以尝试删除node_modules之后使用yarn安装依赖。

rm -r node_modules
yarn install

设计“蛇”组件

一条蛇应当包含自己独立的状态，如长度，位置，前进方向等信息。也要包含一些受控信息，如速度等。这两类信息的区分界限比较模糊，开发时也可以根据个人爱好进行选择。

但一个合理的区分方式是，自身状态(state)应当与外界属性无关或不完全相关。
$$f:(props,prop{s}_{side})\to state$$
其中props为组件的可控参数，$prop{s}_{side}$为组件的副作用参数，如当前的游戏时长。基于此种理解既可以将游戏时长这种相对隐形的参数作为显性参数与其他参数等价都作为props设计也可以作为组件的内部状态，甚至还可以构建一个中间层，时间作为中间层组件的state，作为最下层组件的props。

使用react hooks，组件的定义可以写作如下的形式

const Snake: React.FC<SnakeProps> = (props: SnakeProps