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

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

【本文源址：http://blog.csdn.net/q1056843325/article/details/54755521 转载请添加该地址】

今天就是春节了，祝各位鸡年大吉，心想事成
感觉这两天错过了好几个亿
净往外赔钱了~马云爸爸才给了我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", 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"}
];

category是产品类别
price是产品价格
stocked是有无库存
name是产品名称
#拆分UI视图
首先我们要做的第一项工作就是拆分UI
把它们拆解成一个个组件，组件中还有子组件
并且赋给它们名字
这个UI可以拆分成五个组件

FilterableProductTable (黄色)
完整的产品表
SearchBar (深蓝色)
用户输入部分
ProductTable (绿色)
产品完整展示部分
ProductCategoryRow (天蓝色)
产品类别标头
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', 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'}
];
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});}, //输入框字符改变状态随之改变，但是还不能获取输入框中字符，所以设置一个参数testrender: 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', 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'}
];
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});},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的组件化、单向数据流的特点

主页传送门

React组件开发流程——利用React构建简单的可检索产品数据表相关推荐

从零开始的 React 组件开发之路 (一)：表格篇
React 下的表格狂想曲 0. 前言欢迎大家阅读「从零开始的 React 组件开发之路」系列第一篇,表格篇.本系列的特色是从需求分析.API 设计和代码设计三个递进的过程中,由简到繁地开发一个 ...
【天赢金创】我是如何看待React 组件开发
从 auto-ellipsis 看 React 组件开发 auto-ellipsis 是一个用于解决文本超长溢出截断并加 ... 的 React 组件. 关于 React 随着 React 的火热,随 ...
Vite + React 组件开发实践
简介: 毫不夸张的说,Vite 给前端带来的绝对是一次革命性的变化.或者也可以说是 Vite 背后整合的 esbuild . Browser es modules.HMR.Pre-Bundling 等 ...
react复习总结（1）--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
用 SOLID 原则保驾 React 组件开发
概述本世纪初,美国计算机专家和作者 Robert Cecil Martin 针对 OOP 编程,提出了可以很好配合的五个独立模式:后由重构等领域的专家 Michael Feathers 根据其首字母 ...
react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述本节课将从React的特点.如何使用React.JSX语 ...
React组件库实践：React + Typescript + Less + Rollup + Storybook
背景原先在做低代码平台的时候,刚好有搭载React组件库的需求,所以就搞了一套通用的React组件库模版.目前通过这套模板也搭建过好几个组件库. 为了让这个模板更干净和通用,我把所有和低代码相关的代 ...
Vue.js的复用组件开发流程
本文由蔡述雄发表接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...

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

React组件开发流程——利用React构建简单的可检索产品数据表相关推荐

最新文章

热门文章