React开发流程——利用React构建简单的可检索产品数据表

分类：React作者：佚名

今天就是春节了，祝各位鸡年大吉，心想事成
感觉这两天错过了好几个亿
净往外赔钱了~马云爸爸才给了我2.08. 心塞
不过咱也算是参加过一个两亿的项目了
昨晚发现博客还增加了30+访问流量
没想到除夕夜还有这么多努力的人. 佩服 d===(￣▽￣*)b
好了废话不多说

使用React构建可搜索产品数据表
是React官网上的一个demo，它不是很难
不过却能够很好的映射React的开发流程
而且把我们常用的语法基本都涉及了
可以让我们对于React有更进一步的理解
React官方传送门：Thinking in React

UI与JSON

首先我们从我们的UI设计师那里拿到了UI模拟图和JSON-API

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

category是产品类别
price是产品价格
stocked是有无库存
name是产品名称

拆分UI视图

首先我们要做的第一项工作就是拆分UI
把它们拆解成一个个组件，组件中还有子组件
并且赋给它们名字
这个UI可以拆分成五个组件

  1. FilterableProductTable (黄色)
    完整的产品表
  2. SearchBar (深蓝色)
    用户输入部分
  3. ProductTable (绿色)
    产品完整展示部分
  4. ProductCategoryRow (天蓝色)
    产品类别标头
  5. ProductRow (红色)
    产品信息

当然你也可以在细拆把ProductTable中的Name和Price拆出来
不过我觉得没必要搞得这么复杂
组件层次关系如下：

  • FilterableProductTable
    • SearchBar
    • ProductTable
      • ProductCategoryRow
      • ProductRow

构建静态版本

静态的版本也就是页面最初应该显示的版本
构建它不需要复杂的想法，只是代码多了点
官网上的文档是这样说的

In simpler examples,it’s usually easier to go top-down,
and on larger projects,it’s easier to go bottom-up and write tests as you build

意思就是像我们这样简单的例子中
通常由顶级层次组件向下来写更简单一些
而在大型的项目中
最佳实践是从下级层次往上写并且要做必要的测试
那在这里的demo我们就从FilterableProductTable组件开始写

var PRODUCTS = [
    {category: 'Sporting Goods',price: '$49.99',name: 'Football'},{category: 'Sporting Goods',price: '$9.99',name: 'Baseball'},price: '$29.99',name: 'Basketball'},{category: 'Electronics',price: '$99.99',name: 'iPod Touch'},price: '$399.99',name: 'iPhone 5'},price: '$199.99',name: 'Nexus 7'}
];
var FilterableProductTable = React.createClass({
    render: function(){
        return (
            <div>
                <SearchBar/>
                <ProductTable products={this.props.products}/>
            </div>
        )
    }
});
var SearchBar = React.createClass({
    render: function(){
        return (
            <div>
                <input type="text"/><br/>
                <input type="checkBox"/>Only show products in stock<br/><br/>
            </div>
        )
    }
});
var ProductTable = React.createClass({
    render: function(){
        var rows = [];
        var lastCategory = null;
        this.props.products.forEach(function(product){
            if(product.category !== lastCategory){
                rows.push(<ProductCategoryRow category={product.category} key={product.category}/>);
            }
            rows.push(<ProductRow product={product} key={product.name}/>);
            lastCategory = product.category;
        });
        return (
            <table>
                <thead>
                    <tr>
                        <td><strong>Name</strong></td>
                        <td><strong>Price</strong></td>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>
        )
    }
});
var ProductCategoryRow = React.createClass({
    render: function(){
        return (
            <tr>
                <td><strong>{this.props.category}</strong></td>  
            </tr>
        )
    }
});
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>
        )
    }
});
ReactDom.render(
    <FilterableProductTable products={PRODUCTS}/>,document.getElementById('root')
)

很好的体现了React单向数据流的特点
将JSON数据交给父级
然后父级再讲数据传递下去
这里比较关键的代码就是ProductTable中的这部分了

var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product){
    if(product.category !== lastCategory){
        rows.push(<ProductCategoryRow category={product.category} key={product.category}/>);
    }
    rows.push(<ProductRow product={product} key={product.name}/>);
    lastCategory = product.category;
});

利用了数组的形式将静态列表的组件项存储下来
使用变量lastCategory，当当前遍历的product中category与lastCategory不同时
就向数组中添加ProductCategoryRow组件

售罄产品过滤

我们先来考虑点击那个复选框来重置是否显示售罄产品过滤
很容易的就可以想到必须要设置一个状态
这个状态就是是否只显示有库存的产品（或者不显示售罄产品）
然后为复选框绑定change事件改变状态

var FilterableProductTable = React.createClass({
    getinitialState: function(){
        return {
            inStockOnly: false
        }
    },//设置初始状态：产品默认展示全部
    checkHandler: function(){
        this.setState({
            inStockOnly: !this.state.inStockOnly
        });
    },//复选框要绑定的事件处理函数：改变inStockOnly状态
    render: function(){
        return (
            <div>
                <SearchBar checkHandler={this.checkHandler}/> //将事件处理函数作为数据传递给子级
                <ProductTable products={this.props.products} inStockOnly={this.state.inStockOnly}/>
                //将状态state作为属性props传递给子级
            </div>
        )
    }
});
var SearchBar = React.createClass({
    render: function(){
        return (
            <div>
                <input type="text"/><br/>
                <input type="checkBox" onChange={this.props.checkHandler}/>Only show products in stock<br/><br/>
                //为复选框绑定change事件处理函数
            </div>
        )
    }
});
var ProductTable = React.createClass({
    render: function(){
        var rows = [];
        var lastCategory = null;
        var products = this.props.inStockOnly ?
                       this.props.products.filter(function(product){
                           return product.stocked;
                       }) : this.props.products;
        //通过判断状态inStockOnly来决定是否过滤products数组
        products.forEach(function(product){
            if(product.category !== lastCategory){
                rows.push(<ProductCategoryRow category={product.category} key={product.category}/>);
            }
            rows.push(<ProductRow product={product} key={product.name}/>);
            lastCategory = product.category;
        });
        return (
            <table>
                <thead>
                    <tr>
                        <td><strong>Name</strong></td>
                        <td><strong>Price</strong></td>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>
        )
    }
});

关键字过滤产品

进度已经过去一大半了
剩下一个问题就是我们在输入框中输入字符时
同样需要对产品进行“过滤”
现在我们需要另外的状态——输入框字符改变
还需要一个事件处理函数来改变这个状态

var FilterableProductTable = React.createClass({
    getinitialState: function(){
        return {
            inStockOnly: false,filterText: '' //表示输入框中字符
        }
    },checkHandler: function(){
        this.setState({
            inStockOnly: !this.state.inStockOnly
        });
    },textHandler: function(text){
        this.setState({
            filterText: text
        });
    },//输入框字符改变状态随之改变，但是还不能获取输入框中字符，所以设置一个参数test
    render: function(){
        return (
            <div>
                <SearchBar checkHandler={this.checkHandler} textHandler={this.textHandler}/>
                //将事件处理函数作为数据传递给SearchBar组件
                <ProductTable products={this.props.products} inStockOnly={this.state.inStockOnly} filterText={this.state.filterText}/>
                //将filterText状态传递给ProductTable组件
            </div>
        )
    }
});
var SearchBar = React.createClass({ 
    Handler: function(){
        this.props.textHandler(this.refs.input.value);
    },//为了将获取的输入框内字符传入textHandler作为参数，外部包装一个函数
    render: function(){
        return (
            <div>
                <input type="text" ref="input" onChange={this.Handler}/><br/>
                // 绑定change事件处理函数
                <input type="checkBox" onChange={this.props.checkHandler}/>Only show products in stock<br/><br/>
            </div>
        )
    }
});
var ProductTable = React.createClass({
    render: function(){
        var rows = [];
        var lastCategory = null;
        var products = this.props.products;
        var inStockOnly = this.props.inStockOnly;
        var filterText = this.props.filterText;
        products = inStockOnly ?
                   products.filter(function(product){
                       return product.stocked;
                   }) : products;
        products = filterText ?
                   products.filter(function(product){
                       return product.name.indexOf(filterText) !== -1;
                   }) : products;//通过字符限制一步过滤
        products.forEach(function(product){
            if(product.category !== lastCategory){
                rows.push(<ProductCategoryRow category={product.category} key={product.category}/>);
            }
            rows.push(<ProductRow product={product} key={product.name}/>);
            lastCategory = product.category;
        });
        return (
            <table>
                <thead>
                    <tr>
                        <td><strong>Name</strong></td>
                        <td><strong>Price</strong></td>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>
        )
    }
});

完整版本

完整的脚本代码如下

var React = require('react');
var ReactDom = require('react-dom');
var PRODUCTS = [
    {category: 'Sporting Goods',name: 'Nexus 7'}
];
var FilterableProductTable = React.createClass({
    getinitialState: function(){
        return {
            inStockOnly: false,filterText: ''
        }
    },render: function(){
        return (
            <div>
                <SearchBar checkHandler={this.checkHandler} textHandler={this.textHandler}/>
                <ProductTable products={this.props.products} inStockOnly={this.state.inStockOnly} filterText={this.state.filterText}/>
            </div>
        )
    }
});
var SearchBar = React.createClass({ 
    Handler: function(){
        this.props.textHandler(this.refs.input.value);
    },render: function(){
        return (
            <div>
                <input type="text" ref="input" onChange={this.Handler}/><br/>
                <input type="checkBox" onChange={this.props.checkHandler}/>Only show products in stock<br/><br/>
            </div>
        )
    }
});
var ProductTable = React.createClass({
    render: function(){
        var rows = [];
        var lastCategory = null;
        var products = this.props.products;
        var inStockOnly = this.props.inStockOnly;
        var filterText = this.props.filterText;
        products = inStockOnly ?
                   products.filter(function(product){
                       return product.stocked;
                   }) : products;
        products = filterText ?
                   products.filter(function(product){
                       return product.name.indexOf(filterText) !== -1;
                   }) : products;
        products.forEach(function(product){
            if(product.category !== lastCategory){
                rows.push(<ProductCategoryRow category={product.category} key={product.category}/>);
            }
            rows.push(<ProductRow product={product} key={product.name}/>);
            lastCategory = product.category;
        });
        return (
            <table>
                <thead>
                    <tr>
                        <td><strong>Name</strong></td>
                        <td><strong>Price</strong></td>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>
        )
    }
});
var ProductCategoryRow = React.createClass({
    render: function(){
        return (
            <tr>
                <td><strong>{this.props.category}</strong></td>  
            </tr>
        )
    }
});
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>
        )
    }
});
ReactDom.render(
    <FilterableProductTable products={PRODUCTS}/>,document.getElementById('root')
)

UI视图切分为组件模块
将JSON数据放入父级组件
再将数据props流入子级组件
设置状态位，然后通过事件处理函数改变状态state
state改变，触发DOM的不断渲染
这个例子诠释了React的组件化、单向数据流的特点

==主页传送门==

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...
react 学习(六) 函数组件实例及类组件生命周期
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...
mini react-window(二) 实现可知变化高度虚拟列表
上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如...
react 学习(五) 完善 setState 及实现 ref
上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二...
react 学习13实现 PureComponent
我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解...
react学习(十) React 中的 context
在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。
react 学习(一) 实现简版虚拟 dom 和挂载
楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试...
react 学习(三) 组件更新
我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
react学习(八) diff 算法实现
前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有...
react学习(九) React 新的生命周期
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安...
react 学习14实现 React.memo
上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用...
细聊Concent & Recoil , 探索react数据流的新开发模式
开源不易，感谢你的支持，❤ star me if you like concent ^_^
使用hel-micro制作远程antd、tdesign-react
hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案 ，欢迎关注与了解
setup vs 5 react hooks,助你避开"沟"中陷阱
本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由...
setState 同步 与异步
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot