React学习笔记之四(实例说明React的应用思想|自己觉得很赞)

再说,Reactjs用来创建大型的,高效的Web Apps,具有非常好的扩展性。本文通过一个搜索产品列表的应用来说明,如何在实际的项目中应用Reactjs,在Reactjs的角度思考如何构建一个web应用。

demo原型图为:

 

第一步:将UI分解为各个组件,确定层级关系

最重要的一点:划分组件的依据是什么?如何将一个UI转化为各个不同的组件?

遵循一个原则:单一职责原则

前台从后台接收JSON格式的数据——model,如果model设计的合理,那么就可以非常好的映射到UI上面,前端处理起来就非常简便。所以,在设计后台返回数据model的结构时,尽可能的能够反映出UI的组件结构。针对上面的UI进行划分(颜色区分出5个组件):

具体组件层级如下:

 

第二步:创建静态的组件

确定了这些组件及其层级关系,那么可以开始使用React创建静态的组件。组件编写顺序:对于简单项目可以从上至下进行,对于复杂的大型项目,最好从下往上开始编写,便于测试

这里先创建ProductCategoryRow和ProductRow组件如下:

全部组件静态代码

创建静态代码相对简单,不需要考虑交互,传递数据使用props而不是state,注意从父组件向子组件传递数据使用props,state存在仅仅是为了交互(数据的变化)。

 

第三步:确定最小的UI状态展现(开始交互)

为了是React创建的UI能够交互,需要触发改变底层的数据mode,React给我们提供了state来实现。为了正确的创建web app,需要思考设置哪些必需的state,尽可能没有多余的。遵循DRY(Don’t Repeat Yourself),比如我们需要创建一个TODO list,只需要将TODO的item保存到一个数组中,不需要再使用一个count来保存item的数量,因为可以直接获取数组的Length。

思考这个demo里面需要使用的所有数据对象:

①商品列表数据  ②搜索框输入数据  ③checkbox的值  ④搜索过滤以后的商品列表数据

 

如何确定哪些数据用state来表现?依据是针对每个数据对象提3个问题:

①是否是从父级传递数据(使用props)?如果是,则不是state

②是否会随着时间改变?如果不是,则不是state

③是否可以通过其它的props或state计算出来?如果是,则不是state

 

使用3个提问来分别确认demo中的4个数据对象是不是state

商品列表数据:作为属性从父级组件传递,所以不是state

搜索框数据和checkbox:都是state,不能从父级传递,随着时间变化,而且不能被其它props或state计算出来

过滤以后的商品数据:可以根据原始的商品列表和输入的搜索条件进行计算,所以不是state

这样符合条件的state:搜索框input,checkbox

 

第四步:state应该放在哪个组件里面(策略是什么)?

记住:React是一个单向数据流的(单向绑定)

应用4个策略来确定state应该放在哪个组件里面:

①确认组件使用state呈现的内容

②如果有多个组件需要该state,那么找到在这些组件共同的上层组件

③这个上层组件理应拥有这个state

④如果不能确定哪个组件应该拥有该state,那么就创建一个新的组件来拥有,并且插入到需要这个state的组件的上层位置。

 

应用上面的策略到demo里面,进行分析:

ProductTable需要基于state过滤商品,SearchBar需要基于两个state(search input和checkbox)来展示,它们有一个公共的父级FilterableProductTable,所以从概念上讲:这两个状态需要设置在FilterableProductTable组件里面。

首先,在FilterableProductTable里面添加getInitialState(),返回这两个state

然后,基于单向数据流的思考,上层组件的state赋值给子组件的props进行传递。也就是说,这两个state,作为ProductTable和SearchBar组件的props传递给它们。

最后,ProductTable使用这些props来过滤,SearchBar使用这些属性来设置值

代码修改如下:

 

第五步:添加逆向的数据流

底层的组件需要更新在上层组件的state(FilterableProductTable的state),因为用户输入了search text以及checkbox以后,这时需要改变它们的值了,但是state是属于组件内部的,改变需要通过拥有者来改变state。demo中需要FilterableProductTable来改变,filterText和inStockOnly两个state。怎么做呢?在FilterableProductTable里面传递一个Callback给子组件的属性,当子组件的某些事件触发,比如这里的onChange。子组件的事件里面调用父组件传递过来的Callback,并传递更新的数据,来实现数据的逆行流动。这也是变向的双向数据绑定实现。

修改代码如下:

在父组件FilterableProductTable定义一个Callback:

 

把定义的Callback作为子组件的属性传递下去:

 

在子组件的事件处理函数里面进行调用:

里面出现refs,表示引用到组件,相当于获取到了DOM元素。

 

原文我也是看了3遍才明白了,然后才写了本文。前两遍只是觉得又是一个demo,其实不然。第三遍读完才有点领悟了React组件的思想,相信大家看了本文也会有收获,确实值得学习,有机会一定用上。好了,早点休息吧!

 

本文参考原文:https://facebook.github.io/react/docs/thinking-in-react.html

reactjs
作者:张雪飞
出处:https://zhangxuefei.site/p/1349
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注