React编程思想(未完待续)

前端之家收集整理的这篇文章主要介绍了React编程思想(未完待续)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React, 在我看来, 是使用JavaScript构建大型、快速web应用的一种重要手段。我们已经将其广泛使用在FaceBook和Instagram中。

React有许多重要之处、其中之一就是使用React创建app时的思考方式。下面我将向你展示开发一个可搜索的数据列表产品的思考过程。


从素材开始

假设我们已经已经有了JSON API和来自设计师的素材。我们的设计师显然不够牛,因为素材看起来像这样:


我们的JSON API返回些数据,如下所示:



第1步: 将UI切分程组件层次

你需要做的第一件事就是在素材中的每个组建(还有子组件)的周围画些格子并且给它们命名。如果你在和一个设计师合作,他们也许已经做好了,因此和他们交流下!他们的Photoshop图层名也许最终就是你的React组件名。


但是你如何去划分自己的组件呢?仅仅和你去创建一个方法或者对象的技术一样。其中一种技术叫单一责任原则,意思是,理论上一个组件只做一件事情。如果将来它要扩展,它就需要被分解成一些更小的子组件。


因为你要经常将JSON数据模型展示给用户,你会发现如果你的建模正确了,相应的你的UI(也包括你的组件结构)也会很好。这是因为UI和数据模型倾向于遵循同样的信息结构,这意味把UI分割成组件的工作非常重要。将它分割成那些能够准确展示你的数据模型的组件就行。


这里你能看到,在我们的小应用中有五个组件。我已经列出了每个组件想展示的数据:

1. 产品过滤表(橙色):包含了整个例子

2. 搜索栏(蓝色):接收用户输入

3. 产品列表(绿色): 展示和过滤那些基于用户输入的数据集

4. 产品目录行(青绿色): 展示目录头

5. 产品行: 展示一种产品


如果你在看产品列表,你将会看到表头(包含‘Name’和‘Price’标签)不是它自己的组件。这仅仅是选择的问题,并且无论哪种选择都会有争议。在这个例子中,我把表头作为产品列表的一部分,是因为它也是用来渲染数据集合,而这些集合是产品列表的响应。但是,如果这个头部变得复杂(如果我们需要增加提示用来排序),那么当然应该创建个它自己的“产品列表头”组件。


现在,我们明确了我们素材中的组件,让我们将他们安装结构来排列。这很简单。出现在素材中另一个组件中的组件,在结构中应该被当做子节点。



第2步: 用React建立一个静态版本

JavaScript7

  1. var ProductCategoryRow = React.createClass({
  2. render: function() {
  3. return (<tr><th colSpan="2">{this.props.category}</th></tr>);
  4. }
  5. });
  6.  
  7. var ProductRow = React.createClass({
  8. render: function() {
  9. var name = this.props.product.stocked ?
  10. this.props.product.name :
  11. <span style={{color: 'red'}}>
  12. {this.props.product.name}
  13. </span>;
  14. return (
  15. <tr>
  16. <td>{name}</td>
  17. <td>{this.props.product.price}</td>
  18. </tr>
  19. );
  20. }
  21. });
  22.  
  23. var ProductTable = React.createClass({
  24. render: function() {
  25. var rows = [];
  26. var lastCategory = null;
  27. this.props.products.forEach(function(product) {
  28. if (product.category !== lastCategory) {
  29. rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
  30. }
  31. rows.push(<ProductRow product={product} key={product.name} />);
  32. lastCategory = product.category;
  33. });
  34. return (
  35. <table>
  36. <thead>
  37. <tr>
  38. <th>Name</th>
  39. <th>Price</th>
  40. </tr>
  41. </thead>
  42. <tbody>{rows}</tbody>
  43. </table>
  44. );
  45. }
  46. });
  47.  
  48. var SearchBar = React.createClass({
  49. render: function() {
  50. return (
  51. <form>
  52. <input type="text" placeholder="Search..." />
  53. <p>
  54. <input type="checkBox" />
  55. {' '}
  56. Only show products in stock
  57. </p>
  58. </form>
  59. );
  60. }
  61. });
  62.  
  63. var FilterableProductTable = React.createClass({
  64. render: function() {
  65. return (
  66. <div>
  67. <SearchBar />
  68. <ProductTable products={this.props.products} />
  69. </div>
  70. );
  71. }
  72. });
  73.  
  74.  
  75. var PRODUCTS = [
  76. {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'}
  77. ];
  78. ReactDOM.render(
  79. <FilterableProductTable products={PRODUCTS} />,document.getElementById('container')
  80. );
HTML
  1. <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
  2.  
  3. <div id="container">
  4. <!-- This element's contents will be replaced with your component. -->
  5. </div>
现在你已经有了你的组件结构,是时候来完成你的应用了。最简单的办法是创建一个利用了数据模型并且渲染了UI,但是没有交互的版本。最好的办法就是

猜你在找的React相关文章