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

為濱海新區(qū)等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及濱海新區(qū)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站制作、濱海新區(qū)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

 
 
 
 

  
  
  
  
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 
Hello, world!
,
  
  
  
  
  }
  
  
  
  
}
  
  
  
  

  
  
  
  
ReactDOM.render(
  
  
  
  
  ,
  
  
  
  
  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ě)項(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) => (
  
  
  
  
  
  
  
  
  
    Hello, 
  
  
  
  
    { props.name || 'UserName' }
  
  
  
  
   
  
  
  
  
  
  
  
  
  
)
  
  
  
  

  
  
  
  
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) => (
  
  
  
  
  
  
  
  
  
    Hello, 
  
  
  
  
    { props.name || 'UserName' }
  
  
  
  
   
  
  
  
  
  
  
  
  
  
)
  
  
  
  

  
  
  
  
// 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)置的一些組件，用于渲染終端中的特定元素。

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

DEMO:

 
 
 
 

  
  
  
  
// ui.js
  
  
  
  
const React = require('react')
  
  
  
  
const { Text } = require('ink')
  
  
  
  
moudle.exports = () => (<>
  
  
  
  
  I am text
  
  
  
  
  I am bold
  
  
  
  
  I am italic
  
  
  
  
  I am underline
  
  
  
  
  I am strikethrough
  
  
  
  
  I am green
  
  
  
  
  I am blue on gray
  
  
  
  
)
  
  
  
  

  
  
  
  
// 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)類(lèi)似于 HTML 中的 標(biāo)簽。

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

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

 
 
 
 

  
  
  
  
loooooooooooooooooooooooooooooooooooooooong text
 
 
 
 

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

 
 
 
 

  
  
  
  

  
  
  
  
  loooooooooooooooooooooooooooooooooooooooong text
  
  
  
  

 
 
 
 

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

 
 
 
 

  
  
  
  

  
  
  
  
  loooooooooooooooooooooooooooooooooooooooong text
  
  
  
  

  
  
  
  

  
  
  
  
  loooooooooooooooooooooooooooooooooooooooong text
  
  
  
  

  
  
  
  

  
  
  
  
  loooooooooooooooooooooooooooooooooooooooong text
  
  
  
  

 
 
 
 

組件用于布局，除了支持類(lèi)似 CSS 中 margin、padding、border 屬性外，還能支持 flex 布局，可以將 理解為 HTML 中設(shè)置了 flex 布局的 div （

 
 
 
 

  
  
  
  
const App = () => 
  
  
  
  
  height={10}
  
  
  
  
  alignItems="flex-end"
  
  
  
  
  justifyContent="space-between"
  
  
  
  
>
  
  
  
  
 
  
  
  
  
    Hello
  
  
  
  
  
  
  
  
  
 
  
  
  
  
   World
  
  
  
  
  
  
  
  
  

 
 
 
 

 
 
 
 

  
  
  
  

  
  
  
  
  single
  
  
  
  

  
  
  
  

  
  
  
  
  double
  
  
  
  

  
  
  
  

  
  
  
  
  round
  
  
  
  

  
  
  
  

  
  
  
  
  bold
  
  
  
  

  
  
  
  

  
  
  
  
  singleDouble
  
  
  
  

  
  
  
  

  
  
  
  
  doubleSingle
  
  
  
  

  
  
  
  

  
  
  
  
  classic
  
  
  
  

 
 
 
 

 
 
 
 

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

 
 
 
 

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

 
 
 
 

  
  
  
  
const App1 = () => 
  
  
  
  
  Left
  
  
  
  
  
  
  
  
  
  Right
  
  
  
  
;
  
  
  
  

  
  
  
  
const App2 = () => 
  
  
  
  
  Left
  
  
  
  
  Right
  
  
  
  
;
 
 
 
 

 
 
 
 

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

 
 
 
 

  
  
  
  
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 input char: {char}
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
const React = require('react')
  
  
  
  
const { useApp } = require('ink')
  
  
  
  

  
  
  
  
const { useEffect } = React
  
  
  
  
const App = () => {
  
  
  
  
  const { exit } = useApp()
  
  
  
  

  
  
  
  
 // 3s 后退出終端
  
  
  
  
 useEffect(() => {
  
  
  
  
  setTimeout(() => {
  
  
  
  
   exit();
  
  
  
  
  }, 3000);
  
  
  
  
 }, []);
  
  
  
  

  
  
  
  
 return 3s 后退出終端……
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
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 password:
  
  
  
  
  }
  
  
  
  

  
  
  
  
  return pwd === 'hk01810'
  
  
  
  
    ? 登錄成功
  
  
  
  
    : 有內(nèi)鬼，終止交易
  
  
  
  
}
 
 
 
 

 
 
 
 

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

 
 
 
 

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

 
 
 
 

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

 
 
 
 

  
  
  
  
DEV=true node src/cli