热爱web前端
技术分享平台

分享一个 react + redux 完整的项目,同时写一下个人感悟

react的项目我总共做了两个,并不算多。第一次做react的项目的时候对react这是略微有点了解,但是只限于了解。

当时因为react+redux很火就盲目的在第一次做react项目的时候就用上redux,结果惨不忍睹。本身对react就不熟悉,redux文档看了一遍后,更是一脸懵逼,完全不知道怎么写,然后在网上找攻略,看了半天似乎看懂了,还是不知道怎么写。后来时间实在来不及,就在github上复制一位大腿的代码,把内容去掉换成自己的,但还是踩了无数个坑,加了好多班,终于算是完成了。rnrn因为整个项目组我是第一个用react做项目的,遇到问题只能自己解决,如果不是在github上下载了别人的代码,我觉得自己是不可能按时完成任务的,它让我少走了很多弯路。写一个已经被写烂的todo demo和写一个完整的项目完全是两回事,所以我非常欣赏和感谢那些愿意分享自己代码的人,也会将自己的代码分享出来,希望对大家有帮助。rnrn项目源码地址:https://github.com/bailicangdu/pxqrnrnrn

做react需要会什么?rn刚开始做项目的时候以为会来react和redux就足够了,可是事实总是喜欢打脸。之前我一直用angular,它的特点是大而全,只需要用到angular,就能进行开发,有一种葵花在手,天下我有的感觉。但是react就不一样了,他就负责ui渲染,想要做好一个项目,得会用redux来管理数据,还得会es6,webpack还得懂一点,要想提高性能,需要按需加载,immutable.js也得学一点,还有单元测试。。。。。

rnrnreact 是什么鬼?rn用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript各自想象为一个岛屿,它们之间用收费桥梁连接,js每次访问DOM,都要途径这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高。 因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上。因为这个原因react的虚拟dom就显得难能可贵了。目前所有的框架都是走的数据决定视图的路线,react也是这样,Dom的状态由props和state的值决定,不过它创造了虚拟dom并且将它们储存起来,每当状态发生变化的时候就会创造新的虚拟节点和以前的进行对比,让变化的部分进行渲染。整个过程没有了获取、操作dom节点的步骤,只有一个渲染的过程,所以react就是一个ui框架。

rnrnreact的组件化rnreact的一个组件很明显的由dom视图和state数据组成,两个部分泾渭分明。state是数据中心,它的状态决定着视图的状态。这时候发现似乎和我们一直推崇的MVC开发模式有点区别,没了Controller控制器,那用户交互怎么处理,数据变化谁来管理?然而这并不是react所要关心的事情,它只负责ui的渲染。与其他框架监听数据动态改变dom不同,react采用setState来控制视图的更新。setState会自动调用render函数,触发视图的重新渲染,如果仅仅只是state数据的变化而没有调用setState,并不会触发更新。 组件就是拥有独立功能的视图模块,许多小的组件组成一个大的组件,整个页面就是由一个个组件组合而成。它的好处是利于重复利用和维护。

rnrnreact的 Diff算法rnreact的diff算法用在什么地方呢?当组件更新的时候,react会创建一个新的虚拟dom树并且会和之前储存的dom树进行比较,这个比较多过程就用到了diff算法,所以组件初始化的时候是用不到的。react提出了一种假设,相同的组件具有类似的结构,而不同的组件具有不同的结构。在这种假设之上进行逐层的比较,如果发现对应的节点是不同的,那就直接删除旧的节点以及它所包含的所有子节点然后替换成新的节点。如果是相同的节点,则只进行属性的更改。rn对于列表的diff算法稍有不同,因为列表通常具有相同的结构,在对列表节点进行删除,插入,排序的时候,单个节点的整体操作远比一个个对比一个个替换要好得多,所以在创建列表的时候需要设置key值,这样react才能分清谁是谁。当然不写key值也可以,但这样通常会报出警告,通知我们加上key值以提高react的性能。

rnrnreact组件是怎么来的rn组件的创造方法为React.createClass() ——创造一个类,react系统内部设计了一套类系统,利用它来创造react组件。但这并不是必须的,我们还可以用es6的class类来创造组件,这也是Facebook官方推荐的写法。rnrnrn这两种写法实现的功能一样但是原理却是不同,es6的class类可以看作是构造函数的一个语法糖,可以把它当成构造函数来看,extends实现了类之间的继承 —— 定义一个类Main 继承React.Component所有的属性和方法,组件的生命周期函数就是从这来的。

constructor是构造器,在实例化对象时调用,super调用了父类的constructor创造了父类的实例对象this,然后用子类的构造函数进行修改。这和es5的原型继承是不同的,原型继承是先创造一个实例化对象this,然后再继承父级的原型方法。了解了这些之后我们在看组件的时候就清楚很多。rnrn当我们使用组件时,其实是对Main类的实例化——new Main,只不过react对这个过程进行了封装,让它看起来更像是标签。

rnrn有三点值得注意:

1、定义类名字的首字母必须大写

2、因为class变成了关键字,类选择器需要用className来代替。

3、类和模块内部默认使用严格模式,所以不需要用use strict指定运行模式。

来源:http://react-china.org/t/react-redux/9072

未经允许不得转载:前端网(w3cvip) » 分享一个 react + redux 完整的项目,同时写一下个人感悟

分享到:更多 ()

评论 2

评论前必须登录!

 

  1. #1

    博主的文章不分段的?看起来头晕

    • 琴歌

      已进行分段更新,谢谢提醒~~

      琴歌3周前 (12-14)