一个demo两张图带你走进React的世界(二)

3.2.3、TableHead组件

该组件的设计和RowNode组件类似，唯一不同的就是一个全选的复选框。为什么说不同呢？细心的童鞋肯定发现了关于这个复选框使用的是state，而RowNode使用的却是props。

原因是因为我们表的每一行的选中状态是记录在了MainWrapper组件中，所以传下来便是props，而全选的状态是不需要再顶层组件中的，所以这个时候就需要我们得TableHead组件来维护一个属于自己的状态。

因此代码设计便和RowNode的稍微些许不一样。

3.2.4、TableBox组件

此组件是用来囊括TableHead 和TableContent 组件的，并且传递回调和数据，没有别的操作在此组件上。

这个组件多了一个propTypes的参数，是用来告知顶层组件传递props的时候的某些数据的格式，如果不符合将会报错。具体参考：React中文文档--可复用组件

3.2.5、TableAction组件

包含了CRUD四个按钮组件，但是在每个组件中没有别的多余操作，而是将涉及到表项的操作回调到了顶层组件MainWrapper中来，所以四个小组件的代码几乎一样，除了Add的操作，Add组件是为了能够显示出弹出框，所以当点击Add按钮的时候，使用下面代码来显示PopUpBox组件：

var popUpBox = document.querySelector('.popUp');
    popUpBox.classList.add('open');

3.2.6、PopUpBox组件

这个组件的复杂度是仅次于MainWrapper组件，为什么这么说？因为'PopUpBox’的数据是依据你的操作是Add还是Edit决定的，而如果是Edit，那么数据又是取决于你勾选的是哪一行来决定的，所以便有了如下这张图示：

这个组件设计的难点是如何当顶层组件MainWrapper的editData发生改变的时候，组件内部的两个input输入框的数据也跟着发生变化？因此

1. 我们在点击Edit按钮的时候采取触发MainWrapper组件中editData的状态变化；
2. 我们使用组件的生命周期中的componentWillReceiveProps来决定是否状态发生改变，所以当顶层组件的editData发生改变的时候，将会通过这个生命周期状态来获取新的props，并更新掉PopUpBox自己维护的一个name和color的状态，从而让两个输入框显示的结果保证正确。

之后按照input的标准组件写法来：

...
 handleNameChange: function(e){
    this.setState({name: e.target.value});
  },
...

<input type='text' ref='name' name='name' value={this.state.name} onChange={this.handleNameChange}/>

3.2.7、MainWrapper组件

当下面的所有组件都设计好的时候，MainWrapper组件便不再那么难写了，直接看code还是更省事。

4、总结

此篇文章的目的不是普及概念，而是从设计的角度来说明React。有了React，但凡是设计一个大组件，我们都应该在设计之初细分成小组件，并将所有组件需要的数据以及回调都一并整理清楚，相信经历多了总能出点经验的，既然有了这种解决方案，不以系统全局来设计，那真的是浪费了React的精髓了。

5、参考

1. React中文教程