BackgroundInk是React渲染系统在命令行上的一个实现。它在GitHub上已经有10,000多个Star。看起来很好玩，于是试着写了一个五子棋游戏。经过几天的划水，终于初见成效！先看一个演示动图（Gif太大放不下，请到GitHub上观看）：需要声明的是：我已经在GitHub上开源了这个客户端，地址是https://github.com/acrazing/g。..，但这是一个在线游戏客户端。由于商业原因，服务端代码未开源，所以本文主要讲述使用Ink+React搭建客户端的过程。如果有机会，我会考虑写一篇文章来谈谈服务器的架构和思路。如何使用首先需要你在本地安装node+npm，然后使用npm全局安装本项目的npm包：npmi-ggomoku-terminal这个时候有个命令行入口gomoku，它的使用方法是：$gomoku--helpgomoku[options]Options:--versionShowversionnumber[boolean]--apitheapihost[string][default:"http://23.106.139.99:5001"]--storetheconfig&sessionstorefile[string][default:"~/.gomoku-terminal.json"]--help显示帮助[boolean]如果只启动一个实例，则不需要传递任何参数，直接调用命令行，但是如果要启动多个实例，则需要传入--store参数指向不同的文件名来存储session信息。首次启动或token过期时，首先会进入登录界面：此时需要使用方向键控制焦点，然后输入用户名和密码再将焦点移至在Go上按Enter键登录，或不输入用户名和密码按Anonymous匿名登录。注册界面好像有问题，只支持匿名登录。登录成功后会跳转到房间列表页面：该页面会显示5可以使用上下键选择房间进入（如果有的话），也可以点击新建创建房间并进入。按R手动刷新房间列表。进入房间后会自动跳转到房间页面：这时候首先需要按Ready键（或者按键盘R）做准备。如果你长时间没有准备好，你就会被踢出去。双方准备就绪后，游戏自动开始。这时候如果该你出手了，你可以用方向键选择你要出手的位置，然后回车出手，如果有则自动判负好久没做了：技术实现上主要有两个难点：一是键盘控制，这个ink没有提供有效的操作解决方案，只提供了一个StdinContext来暴露标准输入，但是控制focusthroughkeys需要自己实现。本项目中的实现是通过一个Focusable组件来实现的。具体可以查看这个文件：Focusable.ts。另一个是性能问题。刷新（渲染）将触发完整渲染。这与react-dom不同。React-dom做了很多优化（主要是diff算法和补丁更新）。在绘制棋盘界面的过程中，至少有255（15*15）个元素，所以必须严格控制每一个Piece的刷新过程，不能出现状态变化导致所有Pieces都被渲染的情况，所以它只能通过元素的局部状态来控制，不能通过道具。另外，这个项目使用mobx来管理状态，mobx-sync将状态持久化到文件系统，还实现了快捷键系统，具体可以查看这个文件：KeyboardReceiver.TODO优化性能：当前渲染性能太差，只能说勉强能用。这需要墨客做大量的优化和优化体验：目前只完成了基本的交互功能，但外观相当难看。源码地址：https://github.com/acrazing/g...npm包地址：https://www.npmjs.com/package...
