最近入坑React-Native,买了些参考书,撸了一个玩Android的react-native版本,对于参考书里面关于flux和redux是一脸的懵逼,后面在豆瓣上搜了redux相关的书籍,发现一本不错的入坑书深入浅出React和Redux
,里面讲解了原生prop和state在使用过程中的缺点,以及如何一步步演化到redux框架,这里作一下总结。涉及到的知识点:
1. 什么是prop和state
2. 传统prop和state在使用过程中的不足
3. flux
4. redux
prop和state
我们需要先从React组件的数据prop和state开始介绍,这两者无论哪一个发生变化,都可能引起组件的重新渲染,那么它们有什么区别的?prop是组件的对外接口,state是组件的内部状态,对外用prop,内部用state。简单的理解就是React的首要思想是通过组件
来开发应用,state负责管理组件内部的状态,prop负责接收外部传递过来的数据(包含函数等)。
我们以如下的一个简单自定义组件为例:
左侧为文本,右侧为两个按钮,分别实现+、-功能,我们现在通过+、-来修改计数值,左侧文本同步更新,此时我们通过按钮修改计数值,这个组件维护的计数值就属于组件内部管理的状态,即state。那么prop在哪里呢?上面说了prop是组件的对外接口,简单的理解就是外部组件可以通过它向组件内部传递数据(包含回调函数),我们这里就以计数组件的初始值为例,我们允许外部组件通过prop向组件内部传递初始值。
因为我本身是做Android的,所以我的理解就是state相当于一个对象内部的变量,表示着当前对象内部的状态,而prop相当于一个构造,可以通过构造为对象传递初始数据等。
传统prop和state在使用过程中的不足
还是以上面的组件为例,不过现在不是一个,而是有多个,我们现在要统计多个计数组件的总计数。UI大致如下: