React可以写命令行，你知道吗？

https://mp.weixin.qq.com/s/IK0X1LwS1BD5RCaCyRKxSQ
React可以写命令行，你知道吗？

一、介绍

命令行工具，大家应该比较熟悉了。比如我们平常使用的vue-cli、create-react-app、angular-cli等工具，这类都是命令行工具。
一个好的命令行工具，能给对应的框架加分，也同时显示出了框架开发者的水平。
那么，如何写出一个好看的命令行呢？
本文给大家介绍一些，如何使用React来写命令行，来达到更好用的命令行的效果。

二、入门实践

2.1 新建工程

// 创建一个工程路径
mkdir helloworld
// 进入这个目录
cd helloworld
// 初始化npm
npm init -y
// 安装依赖
npm install ink react import-jsx -s

2.2 编写代码

我们创建index.js文件

1 2	'use strict'; require('import-jsx')('./hello');

然后我们再新建一个hello.js:

'use strict';
const React = require('react');
const {render, Color} = require('ink');
class Counter extends React.Component {
    constructor() {
        super();
        this.state = {
            counter: 0
        };
    }
    render() {
        return (
            <Color green>
                {this.state.counter} tests passed
            </Color>
        );
    }
    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState(prevState => ({
                counter: prevState.counter + 1
            }));
        }, 100);
    }
    componentWillUnmount() {
        clearInterval(this.timer);
    }
}
render(<Counter/>);

文件结构如下：

2.3 运行代码

我们运行我们的代码

1	node ./index.js

然后我们看到：
image.png
然后tests前面的数字不停地在变化，然后按ctrl + c 可以退出我们的命令行。

2.4 解释

写过react的很好理解，render函数里面就是会输出原先的界面信息，内部用到了state.counter的变量。
由于在componentDidMount这个生命周期创建了一个定时器，每100ms修改一下这个变量。
最终我们看到了tests passed前面的数字不停的在变化。
如果我们想要让他输出一下，就退出，那就把这个定时器删除就好了。