React 导读（六）

阅读完之前的第四和第五章，分享了 Dialog 和 Table 组件的一点设计，还有一些小组件的代码都已经上传到 Github-smarty 上去了，能够自己翻阅看一下，接着我们开始整合这些组件来合成一个业务模块。

一、理解容器组件、展示组件

在现在流行的方案中，Redux 的出现迎来了容器组件、展示组件等概念的流行，其实在这之前 Flux 的方案已经有了这类划分，Redux 应该是让它更知名了。

容器组件(containers/employeeManage/index.jsx)：又称充血组件，主要用于一个顶层组件的数据获取，以及一些副作用数据、业务逻辑的处理，我这里的状态订阅代码都放在此处。

展示组件(components/employee/**/*.jsx)：又可以称贫血组件，跟容器组件不同的是它几乎没有业务逻辑，只是通过传递的 props 进行渲染，更像一个纯函数，(props) => component。

这里多联想一下，如果把这里的组件类型，脱离 View 层的限制去连接后端的分层设计，其实他们也是有充血模型和贫血模型的，但是唯一不同的是，后端的分层只是对数据的操作，可以简单分为：

充血模型：(Domain + Bussiness Logic) => End

贫血模型：(Bussiness Logic + Service) => (Domain Model) => End

上面主要是领域模型（Domain）以及业务逻辑(Bussiness Logic)的关系，区别的话简单可以理解成业务逻辑存在的位置，这里就跟前端的组件划分是一样的，如何更好的划分[业务逻辑]就是设计和开发组件的重点。

二、容器组件代码

容器就有一点打包的趣味，容器+组件，就是打包一些组件在一起，那么我们需要打包哪些东西呢？ 我们需要打包业务模块的所有功能的入口组件，比如这里我的功能有：

模块名称 搜索、按钮等操作栏 人员表格 删除、添加、编辑弹框

入口代码就这样子：

<div className="mod">
    <ModTitle>员工管理</ModTitle>
    <EmployeeHeader onAdd={this.handleAdd} />
    <EmployeeTable loading={this.state.isLoadingData}
        data={this.state.list}
        onEdit={this.handleEdit}
        onDelete={this.handleDelete} />

    {/* 各种弹框 */}
    <EmployeeDeleteDialog visible={this.state.visibleDeleteDialog}
        data={this.state.currentSelected}
        onClose={this.handleCloseDeleteDialog}/>
    <EmployeeAddDialog visible={this.state.visibleAddDialog}
        onClose={this.handleCloseAddDialog} />
    <EmployeeEditDialog visible={this.state.visibleEditDialog}
        data={this.state.currentSelected}
        onClose={this.handleCloseEditDialog} />
</div>

从上面的代码可以看出，我这里的容器组件 render 的内容都是一些包装了的自定义组件，有很多 props 的传递。那么这些 props 的值在容器组件中是如何获取的呢？那就要用到之前我们解释数据流程的内容了，这里温习一下主要代码：

// 1. 先看一下我们容器组件依赖的状态 state
const state = {
    list: [],
    currentSelected: null,
    visibleDeleteDialog: false,
    visibleAddDialog: false,
    visibleEditDialog: false,
    isLoadingData: false,
};

// 2. 这里的 state 我是都放在 Store 中进行托管的，所以我们在容器组件构造器里面需要获取初始值
constructor() {
    super();
    // Store 有一个获取状态的 getter
    this.state = EmployeeStore.getState();
}

这样我们的数据就初始化好了，接下来就是监听来更改状态，然后 props 里面的值就有了更新。

componentDidMount() {
    EmployeeStore.on("loadingData", this.handleLoadingData);
    EmployeeStore.on("updateList", this.handleUpdateList);

    // 第一次先请求一次员工列表
    EmployeeStore.getList();
}

// 只要 emit("updateList", newData) 就会触发 React 的更新方法 setState 这样整个组件数据就重新更新了
handleUpdateList(list) {
    this.setState(prevState => {
        return {
            list: list,
            isLoadingData: false,
        };
    });
}

三、弹框

其实容器组件要做的工作我这里就差不多了，因为功能很简单。那么我这里只是处理了列表更新，对于列表数据的删除和添加等功能都没有做，这些副作用其实我是放在了弹框里面去做，无论你放在哪里都是可以的，看你项目的情况。我们这里只看一下添加弹框的内容，添加弹框是一个业务类型的组件，依赖的是 Dialog 基础组件的功能。

// addDialog/index.jsx
render() {
    if(!this.props.visible) {
        return null;
    }

    const footer = (
        <DialogFooter
            onSubmit={this.handleSubmit}
            onClose={this.handleClose}
            submitText="添加"
            closeText="关闭" />
    );

    return (
        <Dialog className="employeeAddDialog"
            renderHeader={() => <DialogHeader title="添加成员" />}
            renderFooter={() => footer}>
            <div className="addDialog">
                <Input onChange={this.handleChangeName} placeholder="请输入姓名" />
                <Input onChange={this.handleChangeDays} placeholder="请输入天数" />
                <Input onChange={this.handleChangeAge} placeholder="请输入年龄" />
            </div>
        </Dialog>
    );
}

上面的代码可以看出来，其实主要就是多了三个输入框来进行交互，最后这个添加弹框是有自己的状态的，不是一个纯展示组件，他的 state 如下：

state = {
    formData: {
        name: "",
        age: 0,
        sex: null,
        days: 0,
    }
};

这里我喜欢包裹一层 formData，用来单独就值我要跟后端对接的数据，可能需求还有变化，需要添加的数据并不想影响我的表单提交数据，而且更新也相对方便一点。

那么弹框的提交和关闭是怎么弄的呢？

handleSubmit(e) {
    const {formData} = this.state;
    // addEmployee 方法会 emit("updateList", newData) 来更新容器里面的状态
    EmployeeStore.addEmployee(formData);
    // 乐观交互
    this.handleClose();
}

handleClose(e) {
    // 把关闭状态给外面控制
    this.props.onClose();
}

这里可以看到关闭是通过 props 传递的一个容器方法来做的，因为弹框总体上来说，都是不具备重业务逻辑的一个组件，所以渲染的控制对外开放会更好，因为有时候万一你弹框是默认就要显示的就很别扭：this.state.visible = this.props.visible 这种代码就很蛋疼。所以干脆控制都让外面来做，要改变的给一个 onChange 的接口就行。

这里需要注意的就是添加弹框继承的是 React.PureComponent 来减少不必要的渲染，会进行一个浅的数据 Diff 控制更新。

细心的朋友可能会发现，我的 Input 组件写得比较恶心，为什么呢？我绑定了三个不同的 handleChangeXXX 这种方法，那么如何优化呢？可以思考一下哦~

四、展示表格组件

在这里我将表格做成了纯粹靠外界数据进行渲染的展示组件，将业务逻辑和行为几乎都给了容器组件去做，先来看一下目录结构：

├── dataTable
│   ├── config.js // 表格的配置，主要是 columns、格式化方法
│   ├── dataTable.css
│   └── index.jsx // 表格组件

根据之前的需求，表格这里具有：表头 和 内容 两部分，这里表头能够根据我们的配置进行初始化：

// 具体的配置内容能够在 Github 上看一下
import config from "./config";

const headers = config.table.map((row, index) => {
    let width = row.width;
    return <th onClick={row.onSort} style={row.style} className={row.className} width={width} key={`header-${index}`}>{row.title}</th>;
});
headers.push(<th width="160" key="opts">操作</th>);

表头初始化好了，开始初始化内容，表格的内容这里按行进行初始化，依赖了一个 SimpleRow 的业务组件来减少业务表格的代码量：

const rows = this.props.data.map((item, i) => {
    return (
        <SimpleRow key={item.id} tableConfig={config.table} row={item} index={i}>
            <td key={`opt-${i}`}>
                <Button style={{marginRight: 5}} color="blue"
                    onClick={() => this.props.onEdit(item)}>编辑</Button>
                <Button color="red" onClick={() => this.props.onDelete(item)}>删除</Button>
            </td>
        </SimpleRow>
    );
});

这样我们的一个表格就搞定了~加入 Table 组件就能够渲染一个简单职工列表了：

<div className="mod-table employeeTable">
    <TableLoading loading={loading} />
    <Table>
        <Table.Header>
            {headers}
        </Table.Header>
        <Table.Body>
            {rows}
        </Table.Body>
    </Table>
</div>

这里可以看到还有一个 TableLoading 组件，这也是一个偏业务的组件，主要就是用于表格加载数据时候的一个 Loading 行为。最后这个表格是搞定了，但是代码还是复杂了一点，那么怎么才能更简单的让别人用呢？让代码更少，O__O "…这个可以再思考一下哦~可以再进行一次封装。

PS: 有什么东西是分层搞不定的...如果搞不定，再分一层。哈哈，当然这是一个段子。

今天就写到这里吧，其实导读系列就先结束了，这里涉及的东西不多，但是对最初用 React 来编写代码还算比较有帮助的，后面会继续深入一点的话题，比如

库类：热火朝天的数据状态管理、纯函数、流式、单向数据流、表单、验证器等等吧~ 脚手架：如何搭建一个自己心仪的玩具~ 框架：如何更工程的去开发 React 等内容~ 好玩的一些开发组件的理念~ 当 TypeScript 遇上 React 呀这种。

想到的时候有时间就写写。

PS: 系列写了六集 =.= 还蛮神奇的，我姓协音就是六。