墨迹3-使用Reaction构建CLI应用程序

Ink 3现已面市。Ink允许您使用Reaction构建命令行应用程序，并在此过程中获得乐趣。

墨水对我来说是一个特殊的项目，因为看到一个小小的实验如何成长为一个功能齐全的命令行UI工具包，被盖茨比、Parcel、Yarn、Terraform、Tap、Prisma、Shopify、纽约时报和其他许多公司使用，这让我感到超现实。当我只是在玩Reaction，试图让它将东西渲染成字符串并输出到终端时，我从来没有想到它会有这么大的未来。

我很高兴能与大家分享所有的最新消息，所以让我们一起来看看Ink3能提供什么。

虽然它不是一个很好的功能，但我认为它值得关注。人们喜欢使用Reaction为他们的命令行应用程序声明性地构建UI，但有时它最终会损害他们的最终性能。例如，Gatsby注意到他们的构建过程变慢了，这显然不是我希望Ink；的用户接受的权衡。

墨水3消除了相当多的渲染错误，在某些情况下，我观察到当重新渲染的频率很高时，性能提高了2倍。文本渲染和对Flexbox的整个支持都被从头开始重新思考和重写。它也比以前简单得多，这使得问题更容易调试、再现和解决。

以前版本的Ink针对各种布局问题有多个棘手的解决方法，因此它并不总是呈现您预期的效果。Ink 3应该是该领域的重大改进。

以前，您必须使用单独的<；Color>；组件将颜色应用于文本。这可能会很快变得嘈杂：

如果您的终端支持扩展的颜色范围，您甚至可以使用十六进制或RGB颜色。

通过设置background Color属性，文本还可以具有彩色背景，该属性接受与颜色相同的值。

方框现在可以有时尚的边框了！有趣的是，这项功能出人意料地发现了Ink中的一系列布局问题。我注意到方框周围的边框是如何错误呈现的，并揭示了Ink和Yoga中方框尺寸的不同，这引发了整个呈现流程的重写。

哦，总共有7种边框样式，所以你可以选择你最喜欢的一种。

我想特别提到useInput，因为它在Ink 2之后有了重大改进。现在它可以更可靠地解析用户输入，并且可以正确检测用户何时按下组合键，例如Shift+Tab。如果以前它不能为您正常工作，我鼓励您再试一次。

如果需要呈现不可预测且可能大量的项目，请使用<；static>；Component.Think of<；static>；作为虚拟列表技术的特定于终端的实现，其中只呈现必要的项目。<；Static>；会将所有新项目永久呈现在UI的其余部分之上，这意味着一旦显示它们，您就无法对其进行更新。这使得<；Static>；非常适合Jest之类的工具，在Jest等工具中可能需要记录数百个已完成的测试。

在Ink3中，<；static>；的性能几乎是以前的两倍，API也得到了简化，以匹配诸如Reaction-Tiny-Virtual-List之类的库。

这里是一个类似于Jest的UI示例，其中使用<；static>；呈现完成的测试。

是的，您没看错。您可以使用Reaction DevTools来检查Ink应用程序的输出。神奇的一点是，您可以实际更改任何组件的道具，并且无需重新启动即可看到CLI的即时更新。

您无需进行任何更改即可支持它，只需设置DEV=TRUE环境变量并打开DevTools：

当您的一个组件抛出错误时，Reaction会向控制台显示一条相当详细的错误消息和一个很长的堆栈跟踪。堆栈跟踪通常不是特别有用，因为它指向Reaction内部。

Ink3通过定义全局Reaction错误边界并呈现错误的漂亮概述，为此问题提供了一个更简单、更干净的解决方案。

为了进一步改进Developer UX，Ink 3拦截对console.log、console.error和其他方法的调用，以确保日志正确显示在您的应用程序的UI之上，并且不会相互干扰。这是必要的，因为Ink会一直重新呈现您的UI，这可能会覆盖console.log的输出。

如果您的应用程序同时显示多个用户输入，则要检测哪些输入具有焦点并应接收数据可能会变得很棘手。为了简化此操作，Ink提供了两个新的反应挂钩：

当组件调用useFocus钩子时，它通知Ink UI中有一个新的可聚焦组件。每次用户按Tab时，Ink都会将焦点传递到队列中的下一个可聚焦组件。

在上面的示例中，当用户按Tab时，焦点将在第一个和第二个组件之间来回传递。

当您的应用程序需要手动管理焦点时，无需等待用户输入，您可以使用useFocusManager钩子。它允许您将焦点切换到下一个或上一个组件，或者完全打开/关闭它。

<；Spacer&>组件是一个方便的框，它会自动扩展以填充所有可用空间。它与SwiftUI中内置的类似。在下面的示例中，"；左&34；和"；右&34；标签将被推到两侧，因为<；空格&>会填充它们之间的空间。

<；newline>；组件基本上是手动插入一个或多个\n字符的替代。请注意，它只能在<；文本>；组件中使用。

如果需要插入多个换行符，请添加Count属性：

许多伟大的公司和开发人员已经在使用Ink来构建他们的CLI，我迫不及待地想看看您会拿出什么下一代Ink！对于那些有兴趣从Ink2迁移的人，有一个迁移指南可供选择。

我想对为Ink3做出贡献并通过测试预发布版本以确保最终版本尽可能没有错误的每一个人说声谢谢，❤️