中国联通|Ink3 发布，最好用的React的命令行APP构建工具
文章图片
文章图片
文章图片
文章图片
稳定性和性能Ink 3解决了很多渲染错误 ， 彻底重新考虑了文本渲染以及对Flexbox的整体支持并进行了重写 ， 对某些需要重新渲染的频率很高的应用 ， 性能可以提高2倍 。
Ink 3比以前简单得多 ， 这使问题更易于调试 ， 重现和解决 。
之前版本的Ink具有针对各种布局问题的多种解决方法 ， 所以在呈现效果上也会和与其结果会略有差异 。 Ink 3对此做了巨大的改善 。
Text颜色属性之前给文本上色 ， 必须使用单独的<Color>组件 ， 如果文本层级比较多时候 ， 很容易会引起混乱 。
<Color red>
<Text bold>Hello Chongchong</Text>
</Color>
Ink 3中 ， 将<Color>组件的功能都合并到的<Text>组件中 ， 更友好易用 ， 也符合一贯的Html签语法 。
<Text bold color=\"red\">
Hello Chongchong
</Text>
对支持颜色扩展的终端 ， 也Ink3支持十六进制的颜色代码或者RGB颜色语法
<Text color=\"green\">Green</Text>
<Text color=\"#005cc5\">Blue</Text>
<Text color=\"rgb(232 131 136)\">Red</Text>
新增加的backgroundColor属性 ， 可以用来给文本增加彩色范围和color属性一样 。
<Text backgroundColor=\"green\" color=\"white\">Green</Text>
【中国联通|Ink3 发布，最好用的React的命令行APP构建工具】<Text backgroundColor=\"#005cc5\" color=\"white\">Blue</Text>
<Text backgroundColor=\"rgb(232 131 136)\" color=\"white\">Red</Text>
box边框新版本中<box>组件 ， 可以支持设置非常好看时尚的边框了:
<Box
borderStyle=\"round\"
borderColor=\"green\"
paddingX={1
flexDirection=\"column\"
>
<Text color=\"green\">New version is available!</Text>
<Text>
Run <Text color=\"blue\">npm i -g my-cli</Text> to update
</Text>
</Box>
边框的样式上也很丰富 ， 总共支持7种边框样式 ， 可根据应用和爱好进行选择合适的边框样式：
内置HookInk 3内置了一组强大的钩子来管理的应用程序 ， 其中包括：
useInput：用于读取用户输入 。
useApp：退出应用 。
useStdin：访问标准输入stdin 。
useStdout：访问标准输出stdout 。
useStderr：访问标准错误stderr 。
useFocus和useFocusManager：管理焦点 。
特别是useInput ， 现在可以更可靠地解析用户输入 ， 可以正确检测用户何时按下了组合键 ， 例如Shift + Tab 。
新<Static>组件如果需要渲染不可预测的而且数量庞大的列表项 ， 建议使用新推出的<Static>组件 。 可以将<Static>当做特定终端下的虚拟列表技术的实现 ， 对其仅呈现必要的列表项 。 <Static>将所有新项目永久呈现在用户界面其他部分上 ， 而且一旦它们显示就无法更新 。 如果要对于诸如Jest之类需要记录数百个需要完成的测试项的工具他是最理想的选择：
<Static items={['Test #1' 'Test #2' 'Test #3'
>
{(test index) => (
<Text key={index color=\"green\">
Completed {test
</Text>
)
</Static>
在Ink 3中 ， <Static>性能超过之前类似功能的react-tiny-virtual-list库的 。
下面是一个类似于Jest的UI的示例 ， 其中使用<Static>渲染了完整的测试 。
React Devtools支持在Ink3中可以使用React Devtools检查Ink应用程序的输出 。 更神奇的是 ， 可以更改任何组件的属性 ， 并且无需重新启动即可即时查看CLI更新 。
我们无需进行任何更改即可支持它 ， 只需设置DEV=true环境变量并打开Devtools：
DEV=true node examples/counter
npx react-devtools
内置错误处理程序和日志拦截当某个组件抛出错误时 ， React会向控制台显示一条非常冗长的错误消息 ， 并显示一堆长长的堆栈 。 然而大多数情况下 ， 这并没有什么蛋用 ， 尤其对于不是很资深的开发者而言 。
Ink3通过自定义全局React错误边界 ， 呈现外观优美错误消息 ， 从而为解决问题提供了更简单 ， 更直观的解决方案 。
为了进一步改善开发人员的UX ， Ink 3拦截了对console.log和console.error的调用 ， 以确保日志可以正确显示在应用程序UI的上方 ， 并且保证互不干扰 。 这是必要的 ， 因为Ink一直需要更新渲染UI ， 有可能会覆盖的输出console.log 。
焦点管理如果应用一次显示了多个用户输入 ， 则检测哪个输入具有焦点并应接收数据可能会变有点棘手 。 为了简化该过程 ， Ink提供了两个新的React内置钩子（前面内置hook提到了）：
useFocus：用于获得焦点 。
useFocusManager：以编程方式对焦点进行管理 。
当组件调用useFocus钩子时 ， 它会通知Ink UI中有一个新的焦点组件 。 每次用户按下Tab键 ， Ink都会将焦点传递到队列中的下一个可聚焦组件 。
const First = () => {
const {isFocused = useFocus();
return (
<Text>
{isFocused ? 'First item is focused' : 'First item is not focused'
</Text>
);
;
const Second = () => {
const {isFocused = useFocus();
return (
<Text>
{isFocused ? 'Second item is focused' : 'Second item is not focused'
</Text>
);
;
const Example = () => (
<>
<First />
<Second />
</>
);
在上面的示例中 ， 当用户按下Tab键时 ， 焦点将在First和Second组件之间来回传递 。
当应用需要手动管理焦点而无需等待用户输入时 ， 可以使用useFocusManager钩子 。 它使可以将焦点切换到下一个或上一个组件 ， 或者完全将其打开/关闭 。
新<Spacer>组件组件是一个方便的框 ， 它会自动展开以填充所有可用空间 。 它与SwiftUI的内置代码非常相似 。 在下面的示例中 ， \"左\"和\"右\"标签将被推到侧面 ， 因为<Spacer>填充了它们之间的空间 。
<Box>
<Text>Left</Text>
<Spacer />
<Text>Right</Text>
</Box>
同样 ， 当容器具有列方向时 ， <Spacer>将改为垂直扩展 。
<Box flexDirection=\"column\" height={10>
<Text>Top</Text>
<Spacer />
<Text>Bottom</Text>
</Box>
新<Newline>组件组件基本上是对手动插入一个或多个\字符的替代 。 请注意 ， 组件只能在<Text>组件内部使用 。
<Text>
Hello
<Newline />
Chongchong
</Text>
如果需要插入多个换行符 ， 可以添加一个count属性：
<Newline count={3 />
推荐阅读
- 中国冰淇淋市场总量超千亿元 还有哪些机会可挖掘？
- 挺过上半年疫情冲击，中国电竞行业为啥更红火了？
- 懂车帮|中国版“路虎揽胜”上街，一般人认不出来，堪称百万SUV，15万起
- 中国|13岁丧父15岁丧母，嫂子变卖嫁妆供他读书，终成中国首富，他是谁
- 航班延误|100多名中国乘客因美航班延误起飞滞留美国
- 使馆|重要提醒！中国驻布基纳法索大使馆凌晨发布：经埃塞俄比亚转机赴华乘客，24日起转机前5天内须进行核酸检测
- 中国武汉|3万只羊即将进京赶“烤” 蒙古国：希望送给武汉人民
- 袁心玥是不是中国女排之中身材最好的球员?你怎么看?
- 美国|6月美债海外持有量两连升 中国持有规模下降最大
- 中国经营报|瑞幸“活”过来了？咖啡市场为何难逃“6亏3平1盈利”？