[[413982]]

用過(guò) React 的同學(xué)都知道，React 作為一個(gè)視圖庫(kù)，在進(jìn)行 Web 開(kāi)發(fā)的時(shí)候需要安裝兩個(gè)模塊。

npm install react --save 
npm install react-dom --save 

react 模塊主要提供了組件的生命周期、虛擬 DOM Diff、Hooks 等能力，以及將 JSX 轉(zhuǎn)換為虛擬 DOM 的 h 方法。而 react-dom 主要對(duì)外暴露一個(gè) render 方法，將虛擬 DOM 轉(zhuǎn)化為真實(shí) DOM。

import React from 'react' 
import ReactDOM from 'react-dom' 
/* import ReactDOM from 'react-dom/server' //服務(wù)的渲染 */ 
 
class Hello extends React.component { 
  render() { 
    return <h1>Hello, world!</h1>, 
  } 
} 
 
ReactDOM.render( 
  <Hello />, 
  document.getElementById('root') 
) 

 如果我們將 react-dom 換成 react-native 就可以將虛擬 DOM 轉(zhuǎn)換為安卓或 iOS 的原生組件。我在之前的文章中介紹過(guò)，虛擬 DOM 最大的優(yōu)勢(shì)并不是其 Diff 算法，而是將 JSX 轉(zhuǎn)換為統(tǒng)一的 DSL，通過(guò)其抽象能力實(shí)現(xiàn)了跨平臺(tái)的能力。除了官方提供的 react-dom、react-native ，甚至可以渲染到命令行上，這也是我們今天介紹的 ink。

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

[[413983]] Ink

ink內(nèi)部使用 facebook 基于 C++ 開(kāi)發(fā)的一款跨平臺(tái)渲染引擎 yoga，支持 Flex 布局，功能十分強(qiáng)大。另外，React Native 內(nèi)部使用了該引擎。

初始化

這里有一個(gè)官方提供的腳手架，我們可以直接通過(guò)這個(gè)腳手架來(lái)創(chuàng)建一個(gè)項(xiàng)目。

$ mkdir ink-app 
$ cd ink-app 
$ npx create-ink-app 

如果你想使用 TypeScript 來(lái)編寫項(xiàng)目，你也可以使用如下命令：

$ npx create-ink-app --typescript 

生成的代碼如下：

// src/cli.js 
#!/usr/bin/env node 
const ink = require('ink') 
const meow = require('meow') 
const React = require('react') 
const importJsx = require('import-jsx') 
 
const ui = importJsx('./ui') 
 
const cli = meow(` 
 Usage 
   $ ink-cli 
 Options 
  --name  Your name 
`) 
 
ink.render(React.createElement(ui, cli.flags)) 

// src/ui.js 
const App = (props) => ( 
  <Text> 
    Hello, <Text color = "green"> 
    { props.name || 'UserName' } 
   </Text> 
  </Text> 
) 
 
module.exports = App; 

除了 ink 和 react，腳手架項(xiàng)目還引入了 meow、import-jsx 兩個(gè)庫(kù)。

meow 的主要作用是運(yùn)行命令時(shí)，對(duì)參數(shù)進(jìn)行解析，將解析的參數(shù)放到 flags 屬性中，其作用與 yargs、commander 一樣，是構(gòu)建 CLI 工具的必備利器。

const meow = require('meow') 
// 傳入的字符串，作為 help 信息。 
const cli = meow(` 
 Options 
  --name  Your name 
  --age   Your age 
`) 
console.log('flags: ', cli.flags) 

另一個(gè) import-jsx 的主要作用，就是將 jsx 字符串轉(zhuǎn)化為 createElement 方法的形式。

// ui.js 
const component = (props) => ( 
  <Text> 
    Hello, <Text color = "green"> 
    { props.name || 'UserName' } 
   </Text> 
  </Text> 
) 
 
// cli.js 
const importJsx = require('import-jsx') 
const ui = importJsx('./ui') 
 
console.log(ui.toString()) // 輸出轉(zhuǎn)化后的結(jié)果 

// 轉(zhuǎn)化結(jié)果： 
props => /*#__PURE__*/React.createElement( 
  Text, 
  null, 
  "Hello, ", 
  /*#__PURE__*/React.createElement( 
    Text, { 
      color: "green" 
    }, 
    props.name || 'UserName' 
  ) 
) 

這一步的工作一般由 babel 完成，如果我們沒(méi)有通過(guò) babel 轉(zhuǎn)義 jsx，使用 import-jsx 就相當(dāng)于是運(yùn)行時(shí)轉(zhuǎn)義，對(duì)性能會(huì)有損耗。但是，在 CLI 項(xiàng)目中，本身對(duì)性能要求也沒(méi)那么高，通過(guò)這種方式，也能更快速的進(jìn)行項(xiàng)目搭建。

內(nèi)置組件

由于是非瀏覽器的運(yùn)行環(huán)境，ink 與 react-native 一樣提供了內(nèi)置的一些組件，用于渲染終端中的特定元素。

<Text>

<Text>組件用于在終端渲染文字，可以為文字指定特定的顏色、加粗、斜體、下劃線、刪除線等等。

DEMO:

// ui.js 
const React = require('react') 
const { Text } = require('ink') 
moudle.exports = () => (<> 
  <Text>I am text</Text> 
  <Text bold>I am bold</Text> 
  <Text italic>I am italic</Text> 
  <Text underline>I am underline</Text> 
  <Text strikethrough>I am strikethrough</Text> 
  <Text color="green">I am green</Text> 
  <Text color="blue" backgroundColor="gray">I am blue on gray</Text> 
</>) 
 
// cli.js 
const React = require('react') 
const importJsx = require('import-jsx') 
const { render } = require('ink') 
 
const ui = importJsx('./ui') 
render(React.createElement(ui)) 

其主要作用就是設(shè)置渲染到終端上的文本樣式，有點(diǎn)類似于 HTML 中的 標(biāo)簽。

除了這種常見(jiàn)的 HTML 相關(guān)的文本屬性，還支持比較特殊的 wrap 屬性，用于將溢出的文本進(jìn)行截?cái)唷?/p>

長(zhǎng)文本在超出終端的長(zhǎng)度時(shí)，默認(rèn)會(huì)進(jìn)行換行處理。

<Text>loooooooooooooooooooooooooooooooooooooooong text</Text> 

如果加上 wrap 屬性，會(huì)對(duì)長(zhǎng)文本進(jìn)行截?cái)唷?/p>

<Text wrap="truncate"> 
  loooooooooooooooooooooooooooooooooooooooong text 
</Text> 

除了從尾部截?cái)辔谋?，還支持從文本中間和文本開(kāi)始處進(jìn)行截?cái)唷?/p>

<Text wrap="truncate"> 
  loooooooooooooooooooooooooooooooooooooooong text 
</Text> 
<Text wrap="truncate-middle"> 
  loooooooooooooooooooooooooooooooooooooooong text 
</Text> 
<Text wrap="truncate-start"> 
  loooooooooooooooooooooooooooooooooooooooong text 
</Text> 

<Box>

<Box> 組件用于布局，除了支持類似 CSS 中 margin、padding、border 屬性外，還能支持 flex 布局，可以將 <Box> 理解為 HTML 中設(shè)置了 flex 布局的 div （ <div style="display: flex;">）。

下面我們先給一個(gè) <Box> 組件設(shè)置高度為 10，然后主軸方向讓元素兩端對(duì)齊，交叉軸方向讓元素位于底部對(duì)齊。

然后在給內(nèi)部的兩個(gè) <Box> 組件設(shè)置一個(gè) padding 和一個(gè)不同樣式的邊框。

const App = () => <Box 
  height={10} 
  alignItems="flex-end" 
  justifyContent="space-between" 
> 
 <Box borderStyle="double" borderColor="blue" padding={1} > 
    <Text>Hello</Text> 
  </Box> 
 <Box borderStyle="classic"  borderColor="red" padding={1} > 
   <Text>World</Text> 
  </Box> 
</Box> 

最終效果如下：

比較特殊的屬性是邊框的樣式：borderStyle，和 CSS 提供的邊框樣式有點(diǎn)出入。

<Box borderStyle="single"> 
  <Text>single</Text> 
</Box> 
<Box borderStyle="double"> 
  <Text>double</Text> 
</Box> 
<Box borderStyle="round"> 
  <Text>round</Text> 
</Box> 
<Box borderStyle="bold"> 
  <Text>bold</Text> 
</Box> 
<Box borderStyle="singleDouble"> 
  <Text>singleDouble</Text> 
</Box> 
<Box borderStyle="doubleSingle"> 
  <Text>doubleSingle</Text> 
</Box> 
<Box borderStyle="classic"> 
  <Text>classic</Text> 
</Box> 

<Box> 組件提供的其他屬性和原生的 CSS 基本一致，詳細(xì)介紹可以查閱其文檔：

• 🔗 ink#Box：https://www.npmjs.com/package/ink#box

<Newline>

<NewLine> 組件相當(dāng)于直接在終端中添加一個(gè) \n 字符，用于換行（PS：只支持插入在 <Text> 元素之間）；

const App = () => (<> 
  <Text>Hello</Text> 
  <Text>World</Text> 
</>) 

const App = () => (<> 
  <Text>Hello</Text> 
  <Newline /> 
  <Text>World</Text> 
</>) 

<Spacer>

<Spacer> 組件用于隔開(kāi)兩個(gè)元素，使用后，會(huì)將間隔開(kāi)兩個(gè)元素隔開(kāi)到終端的兩邊，效果有點(diǎn)類似于 flex 布局的兩端對(duì)齊（justify-content: space-between;）

const App1 = () => <Box> 
  <Text>Left</Text> 
  <Spacer /> 
  <Text>Right</Text> 
</Box>; 
 
const App2 = () => <Box justifyContent="space-between"> 
  <Text>Left</Text> 
  <Text>Right</Text> 
</Box>; 

上面兩段代碼的表現(xiàn)形式一致：

內(nèi)置 Hooks

ink 除了提供一些布局用的組件，還提供了一些 Hooks。

useInput

可用于監(jiān)聽(tīng)用戶的輸入，useInput 接受一個(gè)回調(diào)函數(shù)，用戶每次按下鍵盤的按鍵，都會(huì)調(diào)用 useInput 傳入的回調(diào)，并傳入兩個(gè)參數(shù)。

useInput((input: string, key: Object) => void) 

第一個(gè)參數(shù)：input ，表示按下按鍵對(duì)應(yīng)的字符。第二個(gè)參數(shù)：key ，為一個(gè)對(duì)象，對(duì)應(yīng)按下的一些功能鍵。

• 如果按下回車，key.return = true;
• 如果按下刪除鍵，key.delete = true;
• 如果按下esc鍵，key.escape = true;

具體支持哪些功能按鍵，可以參考官方文檔：

• 🔗ink#useInput：https://www.npmjs.com/package/ink#useinputinputhandler-options

下面通過(guò)一個(gè) DEMO，展示其具體的使用方式，在終端上記錄用戶的所有輸出，如果按下的是刪除鍵，則刪除最近記錄的一個(gè)字符。

const React = require('react') 
const { useInput, Text } = require('ink') 
 
const { useState } = React 
module.exports = () => { 
  const [char, setChar] = useState('') 
  useInput((input, key) => { 
    if (key.delete) { 
      // 按下刪除鍵，刪除一個(gè)字符 
      setChar(char.slice(0, -1)) 
      return 
    } 
    // 追加最新按下的字符 
    setChar(char + input) 
  }) 
  return <Text>input char: {char}</Text> 
} 

useApp

對(duì)外暴露一個(gè) exit 方法，用于退出終端。

const React = require('react') 
const { useApp } = require('ink') 
 
const { useEffect } = React 
const App = () => { 
  const { exit } = useApp() 
 
 // 3s 后退出終端 
 useEffect(() => { 
  setTimeout(() => { 
   exit(); 
  }, 3000); 
 }, []); 
 
 return <Text color="red">3s 后退出終端……</Text> 
} 

useStdin

用于獲取命令行的輸入流。這里用一個(gè)簡(jiǎn)單的案例，來(lái)模擬用戶登錄。

const React = require('react') 
const { useStdin } = require('ink') 
const { useState, useEffect } = React 
module.exports = () => { 
  const [pwd, setPwd] = useState('') 
  const { stdin } = useStdin() 
   
  useEffect(() => { 
    // 設(shè)置密碼后，終止輸入 
    if (pwd) stdin.pause() 
 }, [pwd]) 
   
  stdin.on('data', (data) => { 
    // 提取 data，設(shè)置到 pwd 變量中 
    const value = data.toString().trim() 
    setPwd(value) 
  }) 
  // pwd 為空時(shí)，提示用戶輸入密碼 
  if (!pwd) { 
    return <Text backgroundColor="blue">password:</Text> 
  } 
 
  return pwd === 'hk01810' 
    ? <Text color="green">登錄成功</Text> 
    : <Text color="red">有內(nèi)鬼，終止交易</Text> 
} 

useStdout

用于獲取命令行的輸出流。會(huì)暴露 stdout 的寫入流，還會(huì)暴露一個(gè) write 方法，用于在終端進(jìn)行輸入。

const React = require('react') 
const { useStdout } = require('ink') 
const { useEffect } = React 
module.exports = () => { 
  const { write } = useStdout() 
  useEffect(() => { 
    // 在終端進(jìn)行寫入 
  write('Hello from Ink to stdout') 
 }, []) 
  return null 
} 

第三方組件

除了內(nèi)置的這些組件和 Hooks 外，還有豐富的第三方生態(tài)。比如：Loading組件、超鏈接組件、表格組件、高亮組件、多選組件、圖片組件……

• 🔗 ink#第三方組件：https://www.npmjs.com/package/ink#useful-components

ink-spinner

ink-link

ink-table

ink-syntax-highlight

ink-muti-select

調(diào)試工具

ink 屬于 React 生態(tài)，自然能夠支持 React 官方提供的調(diào)試工具 React Devtools。

$ npm install react-devtools # 安裝調(diào)試工具 

$ npx react-devtools # 啟動(dòng)調(diào)試工具 

然后，在啟動(dòng)應(yīng)用時(shí)，在前面設(shè)置 DEV 全局變量。

DEV=true node src/cli 

運(yùn)行后的效果如下：

總結(jié)

React 確實(shí)是視圖開(kāi)發(fā)的一把利器，再加上 Hooks 的加持，其抽象能力得到了進(jìn)一步的提升，統(tǒng)一的 DSL 加上 虛擬 DOM，照理來(lái)說(shuō)，是可以在任何平臺(tái)進(jìn)行渲染的。甚至，微軟官方都開(kāi)發(fā)了一個(gè) React Native for Windows，關(guān)鍵是這個(gè)東西不僅僅能開(kāi)發(fā) Windows 的桌面軟件，還可以開(kāi)發(fā) mac 的桌面軟件。

有點(diǎn)跑題，說(shuō)回 ink，大家熟知的 Gatsby 的命令行工具也是通過(guò) ink 進(jìn)行開(kāi)發(fā)的。如果大家后續(xù)有本地的 CLI 工具需要實(shí)現(xiàn)，可以考慮這款工具，至少不必?zé)廊绾卧诿钚羞M(jìn)行文本對(duì)齊。