在命令行里也能使用 React

也想出现在这里？点击联系我~

用过 React 的同学都知道，React 作为一个视图库，在进行 Web 开发的时候需要安装两个模块。

1. npminstallreact–save
2. npminstallreact-dom–save

react 模块主要提供了组件的生命周期、虚拟 DOM Diff、Hooks 等能力，以及将 JSX 转换为虚拟 DOM 的 h 方法。而 react-dom 主要对外暴露一个 render 方法，将虚拟 DOM 转化为真实 DOM。

1. importReactfrom'react'
2. importReactDOMfrom'react-dom'
3. /*importReactDOMfrom'react-dom/server'//服务的渲染*/
5. classHelloextendsReact.component{
6. render(){
7. return<h1>Hello,world!</h1>,
8. }
9. }
11. ReactDOM.render(
12. <Hello/>,
13. document.getElementById('root')
14. )

如果我们将 react-dom 换成 react-native 就可以将虚拟 DOM 转换为安卓或 iOS 的原生组件。我在之前的文章中介绍过，虚拟 DOM 最大的优势并不是其 Diff 算法，而是将 JSX 转换为统一的 DSL，通过其抽象能力实现了跨平台的能力。除了官方提供的 react-dom、react-native ，甚至可以渲染到命令行上，这也是我们今天介绍的 ink。

• npm ink: https://www.npmjs.com/package/react-dom

Ink

ink内部使用 facebook 基于 C++ 开发的一款跨平台渲染引擎 yoga，支持 Flex 布局，功能十分强大。另外，React Native 内部使用了该引擎。

初始化

这里有一个官方提供的脚手架，我们可以直接通过这个脚手架来创建一个项目。

1. $mkdirink-app
2. $cdink-app
3. $npxcreate-ink-app

如果你想使用 TypeScript 来编写项目，你也可以使用如下命令：

1. $npxcreate-ink-app–typescript

生成的代码如下：

1. //src/cli.js
2. #!/usr/bin/envnode
3. constink=require('ink')
4. constmeow=require('meow')
5. constReact=require('react')
6. constimportJsx=require('import-jsx')
8. constui=importJsx('./ui')
10. constcli=meow(`
11. Usage
12. $ink-cli
13. Options
14. –nameYourname
15. `)
17. ink.render(React.createElement(ui,cli.flags))

1. //src/ui.js
2. constApp=(props)=>(
3. <Text>
4. Hello,<Textcolor="green">
5. {props.name||'UserName'}
6. </Text>
7. </Text>
8. )
10. module.exports=App;

除了 ink 和 react，脚手架项目还引入了 meow、import-jsx 两个库。

meow 的主要作用是运行命令时，对参数进行解析，将解析的参数放到 flags 属性中，其作用与 yargs、commander 一样，是构建 CLI 工具的必备利器。

1. constmeow=require('meow')
2. //传入的字符串，作为help信息。
3. constcli=meow(`
4. Options
5. –nameYourname
6. –ageYourage
7. `)
8. console.log('flags:',cli.flags)

另一个 import-jsx 的主要作用，就是将 jsx 字符串转化为 createElement 方法的形式。

1. //ui.js
2. constcomponent=(props)=>(
3. <Text>
4. Hello,<Textcolor="green">
5. {props.name||'UserName'}
6. </Text>
7. </Text>
8. )
10. //cli.js
11. constimportJsx=require('import-jsx')
12. constui=importJsx('./ui')
14. console.log(ui.toString())//输出转化后的结果

1. //转化结果：
2. props=>/*#__PURE__*/React.createElement(
3. Text,
4. null,
5. "Hello,",
6. /*#__PURE__*/React.createElement(
7. Text,{
8. color:"green"
9. },
10. props.name||'UserName'
11. )
12. )

这一步的工作一般由 babel 完成，如果我们没有通过 babel 转义 jsx，使用 import-jsx 就相当于是运行时转义，对性能会有损耗。但是，在 CLI 项目中，本身对性能要求也没那么高，通过这种方式，也能更快速的进行项目搭建。

内置组件

由于是非浏览器的运行环境，ink 与 react-native 一样提供了内置的一些组件，用于渲染终端中的特定元素。

<Text>

<Text>组件用于在终端渲染文字，可以为文字指定特定的颜色、加粗、斜体、下划线、删除线等等。

DEMO:

1. //ui.js
2. constReact=require('react')
3. const{Text}=require('ink')
4. moudle.exports=()=>(<>
5. <Text>Iamtext</Text>
6. <Textbold>Iambold</Text>
7. <Textitalic>Iamitalic</Text>
8. <Textunderline>Iamunderline</Text>
9. <Textstrikethrough>Iamstrikethrough</Text>
10. <Textcolor="green">Iamgreen</Text>
11. <Textcolor="blue"backgroundColor="gray">Iamblueongray</Text>
12. </>)
14. //cli.js
15. constReact=require('react')
16. constimportJsx=require('import-jsx')
17. const{render}=require('ink')
19. constui=importJsx('./ui')
20. render(React.createElement(ui))

其主要作用就是设置渲染到终端上的文本样式，有点类似于 HTML 中的 标签。

除了这种常见的 HTML 相关的文本属性，还支持比较特殊的 wrap 属性，用于将溢出的文本进行截断。

长文本在超出终端的长度时，默认会进行换行处理。

1. <Text>loooooooooooooooooooooooooooooooooooooooongtext</Text>

如果加上 wrap 属性，会对长文本进行截断。

1. <Textwrap="truncate">
2. loooooooooooooooooooooooooooooooooooooooongtext
3. </Text>

除了从尾部截断文本，还支持从文本中间和文本开始处进行截断。

1. <Textwrap="truncate">
2. loooooooooooooooooooooooooooooooooooooooongtext
3. </Text>
4. <Textwrap="truncate-middle">
5. loooooooooooooooooooooooooooooooooooooooongtext
6. </Text>
7. <Textwrap="truncate-start">
8. loooooooooooooooooooooooooooooooooooooooongtext
9. </Text>

<Box>

<Box> 组件用于布局，除了支持类似 CSS 中 margin、padding、border 属性外，还能支持 flex 布局，可以将 <Box> 理解为 HTML 中设置了 flex 布局的 div （ <div style="display: flex;">）。

下面我们先给一个 <Box> 组件设置高度为 10，然后主轴方向让元素两端对齐，交叉轴方向让元素位于底部对齐。

然后在给内部的两个 <Box> 组件设置一个 padding 和一个不同样式的边框。

1. constApp=()=><Box
2. height={10}
3. alignItems="flex-end"
4. justifyContent="space-between"
5. >
6. <BoxborderStyle="double"borderColor="blue"padding={1}>
7. <Text>Hello</Text>
8. </Box>
9. <BoxborderStyle="classic"borderColor="red"padding={1}>
10. <Text>World</Text>
11. </Box>
12. </Box>

最终效果如下：

比较特殊的属性是边框的样式：borderStyle，和 CSS 提供的边框样式有点出入。

1. <BoxborderStyle="single">
2. <Text>single</Text>
3. </Box>
4. <BoxborderStyle="double">
5. <Text>double</Text>
6. </Box>
7. <BoxborderStyle="round">
8. <Text>round</Text>
9. </Box>
10. <BoxborderStyle="bold">
11. <Text>bold</Text>
12. </Box>
13. <BoxborderStyle="singleDouble">
14. <Text>singleDouble</Text>
15. </Box>
16. <BoxborderStyle="doubleSingle">
17. <Text>doubleSingle</Text>
18. </Box>
19. <BoxborderStyle="classic">
20. <Text>classic</Text>
21. </Box>

<Box> 组件提供的其他属性和原生的 CSS 基本一致，详细介绍可以查阅其文档：