React開發——step1 設計思想

兵马未动，粮草先行。在开发之前，我们要做的就是思考整个模块的代码组成。这里主要是对react的一些概述性的理解。

react的优势

首先，我们要思考，为什么会有react这个框架，它主要帮我们解决了什么问题。我想应该就是它让我们从繁重的dom操作解放出来了，同时以它的单向数据流，非常清晰的逻辑，让我们能够更清晰地建立数据模型。

两个编码原则

其次，我觉得有利必有弊，一方面我们享受着jsx语法带来的便利，但这也要求了我们需要在开放的时候，更注重代码组织的设计，否则，就很容易出现js跟html混杂在一起，非常混乱的局面。我们应该把组件划分成两种，一种是负责业务逻辑的，一种是负责UI展示的，通过传递参数的方式，很好地拆分UI与业务逻辑。这里还有两个原则值得我们参考。
第一个就是 第一职责原则
一个组件只做一件事：这样既有利于我们的代码维护，也有利于提高我们的性能。因为如果这个小组件的数据没有发生改变，那么react就不会对它进行更新。
第二个 DRY原则
能通过计算得到的属性值，不用单独存储
组件尽量无状态，通过props获取。

讲了这么多，举个例子写点伪代码吧
比如我们要做一个上面是三个tab，点击tab下面的内容发生改变的功能。

 <TabSelector selected={this.state.selectIndex} onTabChange={this.onTabChange}/>
 <TextArea value={this.state.text}/>

TabSelector跟Text都是无状态组件，他们也只做一件事，一个复杂切换tab的选择，一个负责展示文本。