跟着官网的例子学Reacjs （一）FilterableProductTable

　　最近开始学习React，发现最好的方法不是看这个书那个书，而是直接上官网，一步步的跟着学习，真的获益匪浅。许多翻译的书上漏掉的知识点都可以学到。

入门的一些准备工作可以参照官网的步骤，引入依赖的核心包，就不多说了，直接上官网的第二个具体例子，一个过滤产品列表的Table：https://facebook.github.io/react/docs/thinking-in-react.html

     这篇文章主要介绍的并不是API的一些使用，而是向刚入门的同学介绍使用React设计组件时的一些思路，思考怎么样来更好的使用React。

　　1. 首先，要做的是这么个东西

一个很简单的table列表，带了一个搜索功能，只是界面比较简陋。。。（作者自己也调侃说这肯定是个糟糕的设计，哈哈）。鉴于此，使用bootstrap稍微规整了一下

　　2. 接着，作者分析了这个组件该怎么划分：要本着最小原则，实现单一功能得原则，划分了五个组件

每种颜色代表一个组件，最后组件的关系如下，很好理解：

FilterableProductTable

• SearchBar
• ProductTable
  • ProductCategoryRow
  • ProductRow

下面直接进入主题，来code这五个组件

　　2.1 先来个最简单的，SearchBar

　　这个组件和其他的组件相对独立，而且就一个input框和一个复选框

var SearchBar = React.createClass({
    render: function () {
        return (
            <form>
                <input type="text" placeholder="input product name"/><br/>
                <input id="FPT_SearchBar_in_stock" type="checkbox"/>
                <label htmlFor="FPT_SearchBar_in_stock">only show product in stock</label>
            </form>
        );
    }
});

render方法只渲染了一个form，里面一个俩input，搞定

　　2.2 ProductCategoryRow

产品分类组件，也相对简单些，只需要接受父组件的一个分类的名称就可以了

var ProductCategoryRow = React.createClass({
    render:function(){
        return (
            <tr>
                <th colSpan="2">{this.props.category}</th>
            </tr>
        );
    }
});

　　2.3 ProductRow

产品明细组件，接受父类的产品信息，并且判断，如果没有库存了，产品名字要显示为红色

var ProductRow = React.createClass({
    render:function(){
        //如果没有库存，名字显示为红色
        var name = this.props.product.stocked
            ? this.props.product.name
            : <span style={{color:'red'}}>{this.props.product.name}</span>;
         return(
             <tr>
                 <td>{name}</td>
                 <td>{this.props.product.price}</td>
             </tr>
         );
    }
});

　　2.4 ProductTable

产品列表组件负责渲染所有的产品信息，通过接收父类穿进来的products属性，遍历循环，并负责给两个子控件ProductCategoryRow 和 ProductRow 赋值

var ProductTable = React.createClass({
    //根据数据获得需要render的rows
    formatProducts: function () {
        var result = [];
        var category = "";
        this.props.products.forEach((product)=> {
            if(category !== product.category){
                result.push(<ProductCategoryRow category={product.category} key={product.category}/>);
            }
            result.push(<ProductRow product={product} key={product.name}/>);
            category = product.category;
        });
        return result;
    },
    render: function () {
        var products = this.formatProducts();
        return (
            <table className="table table-bordered">
                <thead>
                    <tr>
                        <th>
                            Name
                        </th>
                        <th>
                            Price
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {products}
                </tbody>
            </table>
        );
    }
});

　　2.5 最后一个组件FilterableProductTable

这个组件只负责给ProductTable的products属性赋值就可以了，然后把SearchBar组件也包含进来。

var FilterableProductTable = React.createClass({
    render: function () {
        return (
            <div>
                <SearchBar />
                <ProductTable products={this.state.data}/>
            </div>
        );
    },
    getInitialState: function () {
        return {
            data: [],
            filterName: '',
            onlyStock: ''
        };
    },
    //组件显示后(生命周期中的方法)
    componentDidMount: function () {
        var defaultData = [
            {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"}
        ];
        setTimeout(function () {
            this.setState({data: defaultData});
        }.bind(this), 2000);
    },
    addOneProduct: function () {
        var oldData = this.state.data;
        var newData = {category: "Electronics", price: "$123", stocked: true, name: (new Date) - 0};
        oldData.push(newData);
        this.setState({data: oldData});
    }
});

这里做了一些处理，就是每个组件都有一个生命周期，其中内置的函数componentDidMount函数负责在组件显示后调用，延迟2s给data传递了本地数据，这样就有一个过了两秒数据才加载出来的感觉

 

通过上面的两步，页面一个纯静态的样子就出来了，过滤的功能还没有加。

然后作者提到了一个关键的概念，就是React中的props和state，他俩的区别在哪？什么时候使用state？

作者给出了一个解决的方法：

 让我们通过每一个问题，找出哪一个是state。简单地询问每一块数据三个问题：

 它是从通过父组件的props传递？如果是这样，它可能不是state。
 是否随着时间的推移保持不变？如果是这样，它可能不是state。
 你可以基于组件中的任何其他state或props计算它？如果是这样，它不是state。

大概的翻译了一下原文，如上。这应该就是使用state的一个原则吧。

接下来，开始实现过滤的功能之前，根据上面的原则，我们思考我们要实现的这几个组件中，到底有哪些地方要用到state？

没错，一共3个：

1、整个表格的数据来源，正常情况下是从服务器请求的，所以使用state

2、SearchBar中的搜索框的输入值，因为是用户输入的，时刻在发生变化

3、SearchBar中的复选框

 

　　3、按照上面整理的，需要修改之前的两个组件

var FilterableProductTable = React.createClass({
    render: function () {
        return (
            <div>
                <SearchBar filterName={this.state.filterName} onlyStock={this.state.onlyStock} onSearchChange={this.handleSearchChange}/>
                <ProductTable products={this.state.data} filterName={this.state.filterName} onlyStock={this.state.onlyStock}/>
            </div>
        );
    },
    getInitialState: function () {
        return {
            data: [],
            filterName: '',
            onlyStock: false
        };
    },
    //组件显示后(生命周期中的方法)
    componentDidMount: function () {
        var defaultData = [
            {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"}
        ];
        setTimeout(function () {
            this.setState({data: defaultData});
        }.bind(this), 2000);
    },
    //当搜索框变化时的处理函数
    handleSearchChange:function(filterName, onlyStock){
        this.setState({
            filterName: filterName,
            onlyStock: onlyStock
        });
    },
    addOneProduct: function () {
        var oldData = this.state.data;
        var newData = {category: "Electronics", price: "$123", stocked: true, name: (new Date) - 0};
        oldData.push(newData);
        this.setState({data: oldData});
    }
});

var SearchBar = React.createClass({
    render: function () {
        return (
            <form>
                <input type="text" placeholder="input product name"
                       ref="filterTextInput"
                       value={this.props.filterName}
                       onChange={this.handleChange} /><br/>
                <input id="FPT_SearchBar_in_stock" type="checkbox"
                       ref="inputOnlyStock"
                       checked={this.props.onlyStock}
                       onChange={this.handleChange} />
                <label htmlFor="FPT_SearchBar_in_stock">only show product in stock</label>
            </form>
        );
    },
    handleChange:function(){
        this.props.onSearchChange(this.refs.filterTextInput.value, this.refs.inputOnlyStock.checked);
    }
});

OK，完成。

完整代码可以到我的github上下载运行：https://github.com/lyc-chengzi/reactProject

后续新的例子会继续往上整合，并且用webpack来打包，希望大家一起学习