React.js入门笔记(续)：用React的方式来思考

本文主要内容来自React官方文档中的“Thinking React”部分，总结算是又一篇笔记。主要介绍使用React开发组件的官方思路。代码内容经笔者改写为较熟悉的ES5语法。

React——在我们看来，是用javascript快速开发大型web应用的捷径。这在Facebook和Instagram实践中得到了证实。

零 任务描述

假设我们已经拿到了一个蹩脚设计师给的设计稿：



从后端返回来的一组json数据包括商品类，商品名，价格和库存：

[
    {
        "category": "Sporting Goods",
        "price": "$49.99",
        "stocked": true,
        "name": "Football"
    },
    {
        "category": "Sporting Goods",
         "price": "$9.99",
         "stocked": true,
         "name": "Baseball"
    },
    {
        "category": "Sporting Goods",
        "price": "$29.99",
        "stocked": false,
        "name": "Basketball"
    },
    {
        "category": "Electronics",
        "price": "$99.99",
        "stocked": true,
        "name": "iPod Touch"
    },
    {
        "category": "Electronics",
        "price": "$399.99",
        "stocked": false,
        "name": "iPhone 5"
    },
    {
        "category": "Electronics",
        "price": "$199.99",
        "stocked": true,
        "name": "Nexus 7"
    }
]

我们在根目录下创建一个json.json文件。放入这些信息，模拟从后台获取的数据。

需求：实现商品的展示，筛选功能，

第一步:将UI分解为组件层次结构

你要做的第一件事就是在纸上画出每个子组件,并逐一给它们命名。 或者更简单点，把设计稿psd图层组名就可以作为React组件的名字——从逻辑上说，他俩基本是一回事。

组件应该如何分类嵌套? 秘籍在于：一个组件应该只做一件事。 跟英译中一样，如果句子最终变得又臭又长,那你就应该把它分解成更精悍的短句，短又怎么了？

向用户反馈一个JSON里的数据信息时，你会发现,如果你的json框架搭的没问题，则你的UI也(或者说组件结构)会将很好地映射出来。 用户界面和数据模型始终遵循相同的信息架构——意味着把UI分割为组件是一件轻松的事。这里可以留意下给出的json数据排列方式——同一个category的数据都放一块了。这为后文的生成商品类提供了极大的方便。

如下图，你看到在这个APP里有5个组件。我们着重标出了每个组件应该展示什么数据。

• UI面板(橙色):包含完整的应用。
• 搜索框(蓝色):接收用户输入信息
• 商品面板(绿色):用于展示按照一定规则过滤后的数据。
• 商品类别目录(青色):显示每个商品类别的标题
• 商品信息(红色):显示每个商品

留意到商品列表,你会发现表头(包含“名称”和“价格”的标签)可以不是组件————这根据自身习惯因人而异。本例中,我们把它划归到商品面板,是因为它是数据呈现的一部分。 然而,假使这个表头很复杂(比如说，我要对它实现点击排序),那它肯定得独立划分为一个表头组件。

既然我们已经确定了组件,接下来就是安排层次结构。这也很简单：在层次结构中，需要关联其它组件才能显示的组件，就是子组件。

如果你还是不得要领，那么看这个。

• APP面板

• 搜索框
• 商品面板
  
  * 商品类别目录
  
  * 商品

第二步，实现静态的代码

思考：自上而下的数据流

首先思考数据流向



商品目录实际上是分辨data的category属性，通过遍历把不同属性放到数组内就行了。

商品信息也是遍历。如果遇到stocked属性为false（没库存）,就把该商品名显示为红色。

整个架构应该是在ajax方法的回调中实现。这里使用jquery的getJSON方法。

得到以下代码：

$.getJSON('json.json',function(data){
        //console.log(data);

        var App=React.createClass({
            render:function(){
                return (
                    <div>
                        <SearchBar/>
                        <ProductTable products={this.props.products}/>
                    </div>
                );//把获取到的data传入到商品面板中作为属性！
            }
        });

        var SearchBar=React.createClass({
            render:function(){
                return (
                    <div>
                        <input type="text"/><br/>
                        <input type="checkbox"/>只显示有库存的商品
                    </div>
                );
            }
        });

        var ProductTable=React.createClass({
            render:function(){
                var rows=[];
                var lastCategory=null;
                this.props.products.forEach(function(product){//遍历this.props.products
                    if(product.category!==lastCategory){//如果该对象的商品目录不是上一个商品目录，加到数组row中去
                        rows.push(<ProductCategory name={product.category} key={product.category}/>);
                    }//就是搜集不同商品的类别！
                    //接下来push一个商品行，把该product对象作为ProductsList的子属性
                    rows.push(<PorductInfo product={product} key={product.name} />);
                    lastCategory=product.category;
                });
                return (
                    <table>
                        <thead><tr>
                            <td>商品名</td>
                            <td>价格</td>
                        </tr></thead>
                        <tbody>
                        {rows}
                        </tbody>
                    </table>
                );//注意表格结构必须完整，不得简写。
            }
        });

        var ProductCategory=React.createClass({//商品目录
            render:function(){
                return (
                    <tr><td>{this.props.name}</td></tr>
                )
            }
        });

        var PorductInfo=React.createClass({//商品信息
            render:function(){
                var name=null;
                if(!this.props.product.stocked){//如果没库存,显示为红色
                    name=
                        <span style={{color:"red"}}>{this.props.product.name}</span>
                }else{
                    name=
                        <span>{this.props.product.name}</span>
                }

                return (
                    <tr>
                        <td>{name}</td>
                        <td>{this.props.product.price}</td>
                    </tr>
                );
            }
        });

        ReactDOM.render(
            <App products={data}/>,
            document.getElementById('example')
        );

    });

效果大概是这样：

静态实现的回顾

迄今我们完成了最为简单的部分——根据数据模型渲染你的UI，封装完了的组件层次结构。然而这还没有任何交互——差不多可以实现交互功能的时候了。

但在此之前，最好明确以下几个问题。

• 静态渲染和交互实现最好分离开来写。写一个静态的版本可能要打很多代码，而不用什么想东西；添加交互并不需要太多代码，但是你需要大量思考。
• 静态版本的应用,父到子组件间的数据交流是通过用props来传递的。如果你已经熟悉状态（state）的概念，那么需要记住：**对于静态版本完全不必要使用state。 状态针对的是交互————所谓“数据可以随时间改变”的东西。 **
• 你可以按照自顶向下或自底向上的方式来构建你的组件——都没问题。 在简单的的demo中,自上而下通常更加容易,但大的项目里面,自下而上构建更方便测试。

小结：完成了静态版本,这个组件就是可复用的了。在本文这个例子的静态版本中，组件只有一个render() 方法，组件结构的顶部(App)以data为支撑。 如果你改变data的内容再刷新，UI将被更新。没有什么复杂的改变。 React的单向数据流(单向绑定)保持所有数据内容的模块化和效率。

---

第三步，找到最小的（且完整的）的UI状态！

触发你的底层数据改变。最好的方法就是state。

而让UI交互起来的第一步奥义在于：不要重复！不要重复！不要重复！（Don't Reapeat Yourself）。你得明确你的需求，需要哪些状态——不必要的通通删掉。比方说，你做一个待办事项列表（TODO List）,完全没必要给你的待办事项各自设置单独状态——相反，把它们放到一个数组里就可以了。

回顾我们案例中的所有交互元素，它们包括：

• 原始呈现的商品列表
• 搜索框内的内容
• 复选框是否被点选
• 过滤后的商品列表

让我们逐一思考，哪一个可以作为状态——对每个交互元素都得问三个问题:

1. 它是通过父级组件的props传进来的吗？,如果是，这个交互元素可能不是状态。
2. 它随着时间的推移依然保持不变吗? 如果是,它可能不是状态。
3. 你能可以根据组件的props和其它的state计算出来吗? 如果可以,它绝对不是状态。

在这个简单的demo中，原始呈现的商品列表是通过props传进来的。所以可以直接判断它不是状态。搜索框和复选框的内容不可能通过计算得到，而且可以随时间而改变——它们是状态。至于过滤后的商品列表，它是根据搜索框和复选框的内容而计算得出的结果，所以它不是状态。

因此，我们得出，底层的状态就两个：

• 搜索框的内容
• 复选框是否被点选

---

第四步：状态放哪里？

交互实现的第二步就是：找到哪个是可变的组件，或者是拥有状态的组件。

记住，React是单向数据流，父级组件通常无法知道子组件拥有哪些状态——最有挑战性的地方就在于此。你可以参照以下思路，对每个交互元素的状态从三个方面考虑：

• 确定每个组件是不是依赖于状态？
• 找到共同的先代组件(所有需要状态子组件的共同祖先)。
• 常见的组件所有者或另一个更高层次结构的组件。
  
  注：如果你找不到一个有值得拥有状态的组件，可以创建一个调试用的新组件，让它拥有所有状态，并把它加到常见所有者组件的上层。

个人以为其实主要考虑第三个就差不多了。接下来把这一策略用于本文案例:

• 商品面板(ProductTable)展示商品内容时，基于搜索框（SearchBar）和复选框的状态
• App是所有组件（包括它自己）的共同所有者。
• 在理论上上，搜索框和复选框的状态放App里是有意义的。

好了,所以我们决定,状态都放App里。

接着。把这两个状态通过props传进搜索框SearchBar和商品面板ProductTable。最后，根据相应的props值，渲染搜索框的文本内容，并对商品内容执行过滤。

$.getJSON('json.json',function(data){
        //console.log(data);

        var App=React.createClass({
            getInitialState:function(){
                return {//存放输入框和复选框的状态，默认为空。
                    filterText:'',
                    bStocked:false
                }
            },
            render:function(){

                return (
                    <div>
                        <SearchBar
                            filterText={this.state.filterText}
                            bStocked={this.state.bStocked}
                        />
                        <ProductTable
                            filterText={this.state.filterText}
                            bStocked={this.state.bStocked}
                            products={this.props.products}
                        />
                    </div>
                );//把获取到的data传入到商品面板中作为属性！
            }
        });

        var SearchBar=React.createClass({
            render:function(){
                console.log(this.props.bStocked)
                return (
                    <div>
                        <input value={this.props.filterText} type="text"/><br/>
                        <input checked={this.props.bStocked} type="checkbox"/>只显示有库存的商品
                    </div>
                );
            }
        });

        var ProductTable=React.createClass({
            render:function(){

                var rows=[];
                var lastCategory=null;
                //执行indexOf必须先存下来，否则识别不了this
                var str=this.props.filterText;
                var bCheck=this.bStocked;
                this.props.products.forEach(function(product){//遍历this.props.products
                    if (product.name.indexOf(str)===-1||(!product.stocked&&bCheck)){
                        return;
                    }//满足两个判断条件，直接跳出，执行下一个遍历：
                    //1.如果搜索框搜不到
                    //2.如果数据显示库存为false且点选了“只看有库存的商品”
                    if(product.category!==lastCategory){//如果该对象的商品目录不是上一个商品目录，加到数组row中去
                        rows.push(<ProductCategory name={product.category} key={product.category}/>);
                    }//就是搜集不同商品的类别！
                    //接下来push一个商品行，把该product对象作为ProductsList的子属性
                    rows.push(<PorductInfo product={product} key={product.name} />);
                    lastCategory=product.category;
                });
                return (
                    <table>
                        <thead><tr>
                            <td>商品名</td>
                            <td>价格</td>
                        </tr></thead>
                        <tbody>
                        {rows}
                        </tbody>
                    </table>
                );//注意表格结构不得简写。
            }
        });

        var ProductCategory=React.createClass({//商品目录
            render:function(){
                return (
                    <tr><td>{this.props.name}</td></tr>
                )
            }
        });

        var PorductInfo=React.createClass({//商品信息
            render:function(){
                var name=null;
                if(!this.props.product.stocked){//如果没库存,显示为红色
                    name=
                        <span style={{color:"red"}}>{this.props.product.name}</span>
                }else{
                    name=
                        <span>{this.props.product.name}</span>
                }

                return (
                    <tr>
                        <td>{name}</td>
                        <td>{this.props.product.price}</td>
                    </tr>
                );
            }
        });

---

第五步：让数据反向流起来

到目前为止,这个应用已经完成的差不多了。它有正确的props和state。 现在是时候来支持数据流动的另一种方式:底层数据把信息反馈到上层。

React让数据流一目了然,使人容易理解程序是如何工作的,但它比起传统的双向数据绑定实现，你确实还得多打一些代码。

怎么好意思说应用已经完成得差不多了呢？由于受到顶层state的影响。输入框完全不能键入内容，复选框也是点选不了，简直是在愚弄用户——但这是故意的——从React的价值取向来说，输入的内容必须从状态的所有者App传入。

试想接下来要发生什么。当用户输入内容，触发onChange。SearchBar将通过回调传递信息给App，然后app根据回调的信息用this.setState()来刷新状态。

要明白一个原理：用户并不是不能输入东西，只是输入后被被顶层状态给挡住了。

思路：

1. 我在App中设置一个handleUserInput方法，此方法有两个参数，传入的两个参数将分别被设置为App状态中的filterText和bStocked的值。
2. 把这个handleUserInput方法作为一个props属性(在此命名为onUserInput)传进子组件里边去！
3. 用户输入时，用一个ref值把用户输入内容存入到SearBar的一个私有属性比如this.filterTextInput中。在ES6语法下简写确实比较方便：

ref={(input) => this.filterTextInput = input}

1. 然后onChange事件激活this.props.onUserInput(),把你用ref记录存下来的值作为参数给传进去。就成功影响App的state。

全部代码如下：

$.getJSON('json.json',function(data){
        //console.log(data);

        var App=React.createClass({
            getInitialState:function(){
                return {//存放输入框和复选框的状态，默认为空。
                    filterText:'',
                    bStocked:false
                }
            },
            handleUserInput:function(filterText, bStocked) {
                this.setState({
                    filterText: filterText,
                    bStocked: bStocked
                });
            },
            render:function(){

                return (
                    <div>
                        <SearchBar
                            filterText={this.state.filterText}
                            bStocked={this.state.bStocked}
                            onUserInput={this.handleUserInput}
                        />
                        <ProductTable
                            filterText={this.state.filterText}
                            bStocked={this.state.bStocked}
                            products={this.props.products}
                        />
                    </div>
                );//把获取到的data传入到商品面板中作为属性！
            }
        });

        var SearchBar=React.createClass({
            handleChange:function(){
                this.props.onUserInput(
                  this.filterTextInput.value,
                  this.bStockedInput.checked
                );
            },
            render:function(){
                //console.log(this.props.bStocked)
                return (
                    <div>
                        <input
                            value={this.props.filterText}
                            type="text"
                            ref={(input) => this.filterTextInput = input}
                            onChange={this.handleChange}
                        />
                        <br/>
                        <input
                            checked={this.props.bStocked}
                            type="checkbox"
                            ref={(input) => this.bStockedInput = input}
                            onChange={this.handleChange}
                        />只显示有库存的商品
                    </div>
                );//ref={(input) => this.filterTextInput = input}表示把所有输入的内容放到ref属性中
            }
        });

        var ProductTable=React.createClass({
            render:function(){

                var rows=[];
                var lastCategory=null;
                //执行indexOf必须先存下来，否则识别不了this
                var str=this.props.filterText;
                var bCheck=this.props.bStocked;
                this.props.products.forEach(function(product){//遍历this.props.products
                    if (product.name.indexOf(str)===-1||(!product.stocked&&bCheck)){
                        return;
                    }//满足两个判断条件，直接跳出，执行下一个遍历：
                    //1.如果搜索框搜不到
                    //2.如果数据显示库存为false且点选了“只看有库存的商品”
                    if(product.category!==lastCategory){//如果该对象的商品目录不是上一个商品目录，加到数组row中去
                        rows.push(<ProductCategory name={product.category} key={product.category}/>);
                    }//就是搜集不同商品的类别！
                    //接下来push一个商品行，把该product对象作为ProductsList的子属性
                    rows.push(<PorductInfo product={product} key={product.name} />);
                    lastCategory=product.category;
                });
                return (
                    <table>
                        <thead><tr>
                            <td>商品名</td>
                            <td>价格</td>
                        </tr></thead>
                        <tbody>
                        {rows}
                        </tbody>
                    </table>
                );//注意表格结构不得简写。
            }
        });

        var ProductCategory=React.createClass({//商品目录
            render:function(){
                return (
                    <tr><td>{this.props.name}</td></tr>
                )
            }
        });

        var PorductInfo=React.createClass({//商品信息
            render:function(){
                var name=null;
                if(!this.props.product.stocked){//如果没库存,显示为红色
                    name=
                        <span style={{color:"red"}}>{this.props.product.name}</span>
                }else{
                    name=
                        <span>{this.props.product.name}</span>
                }

                return (
                    <tr>
                        <td>{name}</td>
                        <td>{this.props.product.price}</td>
                    </tr>
                );
            }
        });

        ReactDOM.render(
            <App products={data}/>,
            document.getElementById('example')
        );
    });

效果：



好了，功德圆满了。文档说，“ it's really just a few lines of code”就实现了这个UI。但我把文档用ES5语法重写，去掉空行，注释，也估计要100多行。为此结语是这么说的：

尽管写的比你平时要多一点，但是记住：代码读出来的价值远大于写出来的价值——况且React还那么好读。当你构建一个大型的组件库，你会欣赏这种明朗的，模块化的代码风格,当重用你的代码,就会体会到它的方便。