媒介

React 导读（一）
React 导读（二）

在之前 2 篇文章中中进修到了写第一个 Web 组件以及经常运用的性命周期函数的运用，这篇文章将继承之前的目次，最先新的知识点补充：

1. [x] React 怎样编写 Hello World!
2. [x] React 中三个最基础、最重要的东西
3. [x] React 中的 JSX
4. [x] 你的第一个 Web 组件
5. [x] React 中最最先须要关注的性命周期
6. [x] React 一个组件鸠合的简朴交互
7. [x] React 最先一个项目的一点发起
8. [ ] React 简朴的项目构造构造

这篇文章重要会引见第6、7的知识点。

六 & 七、React 一个组件鸠合的简朴交互以及最先一个项目的一点发起

为何要将6、7合在一起写呢？不是因为想偷懒…现实上是离开一个场景和适宜的最先去计划组件等设想都是不合理的，多多少少都有点交集，所以将这 2 点融会在一起是更利于进修和明白的，到这里就已不是太基础的内容了，基础上代码量会有所提高，然则剖析依旧会很仔细。

这里用一个简朴的表格的增添、删除、编辑、搜刮四个功用来作为实例吧。
因为这应当是一样平常开辟历程当中碰到历程最多的，我将参考 bootstrap-table 的体式格局来开辟一个简朴的表格组件和商定设置来做，以为比较自在，假如你着手才好且营业稍大和庞杂可以参考 antd 设想规范来完成，如今市面上应当蚂蚁这套用的比较多，然则这并不意味着我们就一定是依据他来做，现实项目不庞杂的状况是可以运用更简朴的体式格局。

做这个最先之前，首先要假定一点场景和基础需求，如许才带着去思索怎样完成以及更靠近需求目的。

(1) 场景

为了更清楚的部署年前年后的工作和值班，如今要对过年时期职员告假的状况举行统计，而且举行一个简朴的治理。

(2) 功用性需求

• 增添员工的告假信息
• 展现增添的员工告假的列表
• 可以对信息举行修正
• 可以删除增添的信息，因为不可恢复，所以须要一个提醒
• 可以依据员工的名字举行搜刮

简朴形貌了一下，实在就之前说的几个功用。

末了做出来的结果以下(=.=没有设想，对齐就行哈)：

看之前可以下载源代码对照着看，不过代码能够会不停修正 BUG，哈哈~有 BUG 不要虚，没有 BUG 我们能够就赋闲了。
源码-GitHub

(3) 准备工作

1. 整顿须要用到的手艺
2. 开辟要用的基础 UI 组件
3. 看下 bootstrap-table 的基础设想
4. 搭建项目目次

1. 须要用到的手艺
须要用到的手艺：React/ES6, CSS 即可

2. 基础 UI 组件
依据我们这里的功用来看，我们只须要下面这几个基础组件即可：
Button, Dialog, Input, Table, Radio

在这个例子项目内里，组件的分别构造以下：

为何要如许分别呢？

• 基础组件：实在这个是每一个项目都须要的，假如说太小的项目不须要实在大多数是斟酌掉了项目的迭代周期的考量以及今后代码的可复用性，望文生义，基础组件就是你要在今后的组件编写历程当中须要依靠的最基础的组件，基础是只担任 UI 层面的职责，固然你还可以再剥离，这里就不太展开了，晓得这一层是为了今后写组件可以有自身的基础组件即可。
• 营业组件、模块组件：在我们开辟好基础组件事后，实在这些基础组件是不具备任何营业代价的，比方有了营业设想稿后，我们须要针对营业然后编写营业中公用的组件或许封装运用操纵2次的组件代码，构成一个可复用的营业组件或许营业模块范例的组件。比方我这里会将每一个模块用到的模块题目封装成一个 ModTitle 组件，如许今后修正这里款式的时刻悉数就在一个处所修正，或许在营业体系上会有 Layout 相干的规划组件需求，再比方体系中表格全部一块的需求，包括搜刮、头部操纵按钮、数据展现表格，这三者可以举行一个通用性的封装来构成营业模块上的表格运用组件，增添编写模块的效力，固然这里我并没有封装，因为封装和重构并非软件初始开辟更应当注意的，而是碰到第二次的时刻再反过来思索怎样防止反复或许让组件内部封装。
• 展现组件、容器组件：这一层就是网上盛行的展现型组件、容器组件的一层，我这里分别重如果跟详细营业功用有关联的一层。因为我这里没有 react-router，所以庞杂度会低一些，背面有时间也可以引见。

3. bootstrap-table 天生表格的体式格局

可以检察 github-bootstrap-table 的运用例子来看下运用体式格局，这里我用它做例子并非说此库完全好或许不好，而是之前项目用了 bootstrap-table 然后就模拟了 columns 设置的体式格局，关于它 API 设想的其他部份临时没采纳。
表格组件现实上是治理类体系很中心的部份，一是用的多，二是自身也比较庞杂，封装太死缺乏灵活性，封装太简朴缺乏效力，品种也比较多。大体上我会采纳字段举行设置的体式格局，详细看背面的代码和剖析。

4. 项目的目次计划
上面引见了一些概念性的东西，那末项目重要的目次零丁提一下，这里的项目目次不适合大型项目，然则须要一个这个历程，来明白每一项的意义以及为何我们还须要其他手艺来处理你碰到的题目，堆手艺的做法是不可取的，至少在不猖獗 KPI 形式的状况下。

├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── server // 网站后端的目次，这里我们不须要关联
├── src // 前端的源代码目次
│   ├── App.js // App 的进口组件
│   ├── apis // API 要求层的相干文件，Ajax 的要领也是须要适配的，比方罕见的拦截器做法
│   ├── app.css
│   ├── assets // 一些静态资本
│   ├── components // 包括了营业组件、模块组件、展现组件，这里项目较小的时刻不须要分别太细，然则要有如许的分层来构造代码
│   ├── containers // 容器组件，重要的副作用等逻辑组件，基础上是数据初始化、保护一个较顶层的数据进口
│   ├── index.css
│   ├── index.js // 网站的进口 JS 文件，重如果担任组件挂载到 DOM，或许你也可以做一些全局注入的一些操纵
│   ├── normalize.css
│   ├── registerServiceWorker.js
│   ├── smarty // 基础组件的目次，这里我叫它 smarty，定名空间运用 st-，这个随你愉快
│   ├── stores // 数据操纵的重要聚焦处所，每一个 Store 都能是一个事宜定阅者，用于衔接 React View 组件
│   └── utils // 一些东西辅佐函数，如今我这里没有运用，实在项目肯定会用上的

(4) 最先思索要怎样最先写代码

1. 须要一个 React 的容器组件来衬着我想要的一个功用模块；
2. 功用模块的数据须要一个处所举行治理。

要处理第一个题目，假定我们的容器组件叫 EmployeeManage，那末在最外层的 App 组件中应当声明要衬着它，代码就会是如许：

class App extends Component {
    render() {
        return (
            <div className="App">
                <EmployeeManage />
            </div>
        );
    }
}

好了，假定如许会涌现最初的谁人结果图的模样，那末数据并不想写的太过于零星，所以我定义了一个 Store 类举行治理，为何是类呢？如今不是盛行 Redux 之类函数式的么？一是在最最先进修的时刻增添太多手艺栈心累，二是不一定要用 Redux 我们才写好 React，三是以为也不太必要就我们如今的需求来看，四是我就想最初简简朴单的。
然则如今我们是数据驱动体式格局的编程，数据变了来关照 React 的 state 变了然后 React 去帮我们做视图的更新，所以，我们的 Store 得是一个基于事宜的类，要有事宜应当有的特征：监听。所以末了我须要一个 EmployeeStore：

// 用下自带的，你也可以自身完成一个简朴的
import EventEmitter from 'events';
import assign from 'object-assign';

const state = {};

const EmployeeStore = assign({}, EventEmitter.prototype, {
    // 把容器组件的 this.state 在这里治理
    getState() {
        return state;
    }
});

原始是原始了一点，然则应当很好明白，那就是我的 EmployeeStore 具有了 EventEmitter.prototype 的东西，比方经常运用的 on(), off(), emit() 等要领来完成事宜特征。
然后我们须要把 EmployeeManage 和 EmployeeStore 衔接起来，最简朴的衔接像如许子：

class EmployeeManage extends React.Component {
    constructor() {
        super();
        // 看这里
        this.state = EmployeeStore.getState();
    }
}

衔接了这个基础的东西，我们的 EmployeeStore 不是还可以定阅事宜么？然后数据修正了我们就触发一下定阅的事宜去通知 EmployeeManage 然后经由过程 this.setState 去更新视图即可，全部关联以下：

看图能够就更直观的晓得数据和组件之间的关联了，用过 Flux 能够可以发明还比较像，然则这是两个差别的理念，我这里只是一个最基础的事宜体系，所以会迥殊简朴。

我们如今来定阅一个名为 updateList 的事宜，用来示意表格中须要展现每条数据。我们须要在 EmployeeManage 中到场下面的代码：

componentDidMount() {
    EmployeeStore.on('updateList', this.handleUpdateList);
}

componentWillUnMount() {
    EmployeeStore.off('updateList', this.handleUpdateList);
}
    
handleUpdateList(list) {
    this.setState(prevState => {
        return {
            list: list,
        };
    });
}

这三个要领能跟上面的图对应一下，就对应上了 EmployeeManage 和 Component，那末我们的 Store 须要怎么做呢？

getList() {
    // API 要求列表数据的要领，返回一个 Promise
    EmployeeApi.get().then(result => {
        if(result.status === 200) {
            // 恰好，就关照了 EmployeeManage 说我数据猎取胜利了，可以更新视图了
            this.emit('updateList', result.data);
        }
    });
},

以上就完成了衔接工作了，基础上剩下的就是码代码，往上积累功用。
先写到这里吧，太长看着也累，分一下章节吧~实在架子已差不多了，剩下的就是写功用点了。假如以为看文章太慢可以直接看源码能够会更快更直接一点，没有数据层，实在并非太好，先明白视图和关联吧。