学习React系列2-[解读]Thinking in React
[解读]Thinking in React
前言
这是放置在官方的 本文并非为了翻译,而是注重表达自己学习过程中的解读,加深对 原文的翻译有点坑,个人觉得译文有些地方并没有准确地表达原文的意思,甚至有些错误 理解React的组件化开发假如我们要构建一个这样的应用
后台已经有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"} ]; 接下来,我们分为5步来构建这样的一个商品搜索的应用。 步骤1:将UI拆分成组件树在此步骤,我们要完成这样的一个过程:
那么问题来了,如何划分组件?文章给出了两个思考这个问题的角度。 1. 单一功能原则 举例来说,在写程序的时候,通常为了实现某一单一的功能而创建一个函数或者一个对象,划分组件也是类似的一个思路。 > 扩展:单一职责原则(SRP:Single responsibility principle)又称单一功能原则,面向对象五个基本原则(SOLID)之一。它规定一个类应该只有一个发生变化的原因。该原则由罗伯特·C·马丁(Robert C. Martin)于《敏捷软件开发:原则、模式和实践》一书中给出的。马丁表示此原则是基于汤姆·狄马克(Tom DeMarco)和Meilir Page-Jones的著作中的内聚性原则发展出的。 笔者认为,运用这一原则可以定位到应用的最小功能模块,从而划分出最低层的组件。然而,这一原则并不能完全概况组件化开发的理念,单一职责原则实质上提供的是模块化的思想,指导开发者编写低耦合、高内聚的代码。组件化则是一个更为复杂的概念:组件有层级关系,父子组件之间还会涉及数据传递(有时候是双向的)。如图所示:
2. 数据与UI的对应关系 用户的界面和数据模型在 知道了如何划分组件,我们就对原型进行划分
在这个APP中,有5个组件,他们分别是
实际上对 这样,我们也可以很容易得到组件树:
步骤2:创建静态的版本为了节省篇幅,就不在此处贴出代码了,如果需要可以参照原文中的代码或者参照本人自己写的demo 按照步骤1的分析,我们可以很快地建立应用的静态版本,每个组件目前只有一个
props vs state 首先,这两个指的都是数据(类似于数据驱动的思想)。关于这两个,在这里做一个简单的分辨。 1.我们在初始化组件的时候,使用的是
在顶层组件 2.
明确组件的状态的改变,是编写组件的核心部分,在接下来的步骤3就做这样一件事情。 步骤3:识别出最小(但是完整的)代表UI的状态集构建一个正确的应用,首先需要做的就是找出应用的最小的状态集。 何谓 回到我们的应用中来,在我们的例子中有这么些数据(state和props都是数据)
理解了
分析
到这里,我们得到了应用的状态集
步骤4:确认state存在哪个组件中拥有了状态集之后,接下来就要确认哪些组件拥有哪些 这里是译文的一个错误的地方,并非确认 我们可以从几个方面来解决这个问题:
回到我们的应用中来:
步骤5:添加反向的数据流这里可以思考3个问题:
首先,在React中,数据是从顶层传递到底层的。如果是底层的组件通过某种方式更新了上层的组件的 结合我们的应用来讲为什么要有反向的数据流。在步骤4中,我们得出了组件
“理都懂”之后,来谈谈实现。我们结合一下代码来讲解一下(代码只是大致的实现): var FilterableProductTable = React.createClass({ handleSearch : function(search) { //searchText为输入框的值,在此函数内可以改变state this.setState(search) //之后的逻辑省略 } render : function () { return ( <div className="wrapper"> <SearchBar onSearch={this.handleSearch} /> <ProductTable productList={this.data} /> </div> ); } }); var SearchBar = React.createClass({ handleEnter : function(e) { //...省略前面的判断逻辑 /*获取到输入框和checkbox的值之后,利用props传递到父组件, 在这里实现了反向的数据流 */ this.props.onSearch({searchText : searchText,isChecked : false}) },handleChange : function(e) { },render : function() { return ( <form> <input type="text" onKeyPress={this.handleEnter} /><br/> <input type="checkbox" onChange={this.handleChange} /> <label>only show in stock</label> </form> ); } }); 写在最后到此结束。在发布这篇博客的时候,demo并没有全部完成,估计要过些日子才能完成了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |