Ink 2.0 发布:命令行应用程序的 React

栏目: 服务器 · 发布时间: 5年前

内容简介:自称为“命令行接口 React”的 JavaScript 库 Ink 最近发布了第二个主要迭代版本。借助 Ink,开发者可以通过组装 React 组件来构建命令行应用程序,并充分利用他们的 React 知识和 React 生态系统。官方文档提供了如下的示例:

自称为“命令行接口 React”的 JavaScript 库 Ink 最近发布了第二个主要迭代版本。借助 Ink,开发者可以通过组装 React 组件来构建命令行应用程序,并充分利用他们的 React 知识和 React 生态系统。

Ink 是一个 React 渲染器,可以将 React 组件树转成字符串,然后输出到终端上。Ink 2.0 可以无缝支持 React 的某些特性,比如 HooksContext ,还可以与 React 生态系统中的其他重要组件(比如 Redux )发生交互。

官方文档提供了如下的示例:

复制代码

importReact, {Component} from'react';
import{render,Color} from'ink';

classCounterextendsComponent{
  constructor() {
   super();
   this.state = {
      i:0
    };
  }

  render() {
   return(
      <Colorgreen>
        {this.state.i} tests passed
      </Color>
    );
  }

  componentDidMount() {
   this.timer = setInterval(() => {
     this.setState({
      i:this.state.i +1
      });
    },100);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }
}

render(<Counter/>);

终端上的输出:

Ink 2.0 发布:命令行应用程序的 React

Ink 2.0 提供了 7 个 内置的组件 。还有其他 10 个第三方组件 也可用于开发终端应用程序,以及 14 个组件正在迁移到 Ink 2.0。这些可重用的组件提供了常用的终端用户界面布局和行文(文本输入框、进度条、微调器、确认输入框、滚动条、自动完成、文本动画、图像显示等)。这些组件也解决了其他一些较受关注的问题,比如链接、路由、动画和颜色。

Ink 2.0 使用了 Yoga ,一个实现了 Flexbox 的跨平台布局引擎。所以,每个元素就是一个 Flexbox 容器,可以使用相关的 Flexbox 参数( flexShrinkflexGrowflexDirection 等等)。内置组件 Box 可用于配置布局。下列的组件:

复制代码

import{render, Box, Text, Color}from'ink';

constFlexbox =()=>(
   <Boxpadding={2}flexDirection="column">
       <Box>
           <Boxwidth={14}>
               <Textbold>Total tests:</Text>
           </Box>
            12
       </Box>

       <Box>
           <Boxwidth={14}>
               <Textbold>Passed:</Text>
           </Box>
           <Colorgreen>10</Color>
       </Box>

       <Box>
           <Boxwidth={14}>
               <Textbold>Failed:</Text>
           </Box>
           <Colorred>2</Color>
       </Box>
   </Box>
);

render(<Flexbox/>);

将在终端上显示:

Ink 2.0 发布:命令行应用程序的 React

可以使用 ink-testing-library 来测试 Ink 组件。这个库的灵感来自 react-testing-library,一个可替代 Jest 来测试 React 组件的框架。可以像下面这样测试一个计数器应用程序:

复制代码

import Reactfrom'react';
import {Text}from'ink';
import {render}from'ink-testing-library';

const Counter = ({count}) => <Text>Count: {count}</Text>;

const {lastFrame, rerender} = render(<Countercount={0}/>);
lastFrame() ==='Count: 0';//=> true

rerender(<Countercount={1}/>);
lastFrame() ==='Count: 1';//=> true

终端应用程序和命令行应用程序之间有一个区别。终端应用程序具有图形化用户界面,可能带有复杂的导航和输入功能。

基于 blessed 终端界面库构建的 React-blessed 可以让应用程序变成下面这样:

Ink 2.0 发布:命令行应用程序的 React

Ink 旨在简化命令行应用程序的界面,提供更简单的输入功能:

Ink 2.0 发布:命令行应用程序的 React

Ink 采用了 MIT 开源协议。开发者可以通过其 GitHub 主页 贡献代码。

查看英文原文: Ink: React for Interactive Command-Line Apps


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

电脑报(上下册)

电脑报(上下册)

电脑报社 / 西南师范大学出版社 / 2006-12-01 / 45.00元

全套上、下两册,浓缩2006年电脑报精华文章。附录包含70余篇简明IT应用指南,覆盖软件、硬盘、数码、网络四大领域。配赠权威实用的2006-2007中国计算机年鉴DVD光盘,近1.4GB海量信息与资源超值奉献。8大正版超值软件,涵盖系统维护、系统安全、办公应用、多媒体娱乐等四大领域。微软、腾讯、友立等知名厂商,新年献礼。提供2006-2007全系列硬件、数码产品资讯,兼具知识性与资料性。官方网站全......一起来看看 《电脑报(上下册)》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具