内蒙古森川园林设计有限公司

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 809|回复: 0

React 个人学习感悟(五)

[复制链接]

92

主题

0

帖子

20

积分

实习版主

Rank: 7Rank: 7Rank: 7

积分
20
发表于 2018-3-13 22:07:27 | 显示全部楼层 |阅读模式
您的域名(iba.me)未获得授权,部分功能受到影响!


尊敬的用户:

  您好!非常感谢您能安装和关注本产品,为了产品的可持续发展和升级,众大云采集已经开始收费。

  向用户收费是为了给用户更可靠的保障和服务,所收取的费用主要用于产品的正常运作、研发和改进,希望各位能够理解和支持。

  另外,为了答谢新老客户,众大云采集3折优惠,原价980元,现在购买仅需290元,给您节省了690元。

  官方QQ群:23530791  客服QQ:155120699

  购买域名授权请打开下面的网址:

http://www.0762home.com/zt/csdn123_news/pay_url.php?url=iba.me

  购买域名授权之后所有的未授权提示将自动消失,图片也正常显示,域名授权永久有效终身可用,后续的升级更新也是免费的,一次购买一辈子都能用,无后顾之忧!

提示:为了您网站的内容安全,请不要发布违反国家法律法规的内容,您目前使用的是免费试用版,可以手动删除上面的未购买授权的提示,发布这篇文章!


组件之间的通信

        react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级,子级可以直接调用函数从而和父级通信。
        父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理。父组件还可以通过子组件的 ref 属性,调用子组件的方法。
        父组件将一个函数作为 props 传递给子组件,子组件调用该回调函数,处理父组件中的事件方法,便可以向父组件通信。
        组件层级嵌套到比较深,可以使用上下文getChildContext来传递信息,这样在不需要将函数一层层往下传,任何一层的子级都可以通过this.context直接访问。上级组件要声明自己支持 context,并提供一个函数来返回相应的 context 对象。子组件要声明自己需要使用 context。
        兄弟关系的组件之间无法直接通信,它们只能利用同一层的上级作为中转站。而如果兄弟组件都是最高层的组件,为了能够让它们进行通信,必须在它们外层再套一层组件,这个外层的组件起着保存数据,传递信息的作用,这时就是redux出场了,这其实就是redux所做的事情。
        组件之间的信息还可以通过全局事件来传递。不同页面可以通过参数传递数据,下个页面可以用location.param来获取。其实react本身很简单,难的在于如何优雅高效的实现组件之间数据的交流。
        组件之间的通信方法很多,再次也推荐一下,events 包,pubsub.js等 
Redux

        首先,redux并不是必须的,它的作用相当于在顶层组件之上又加了一个组件,作用是进行逻辑运算、储存数据和实现组件尤其是顶层组件的通信。如果组件之间的交流不多,逻辑不复杂,只是单纯的进行视图的渲染,这时候用回调,context就行,没必要用redux,用了反而影响开发速度。但是如果组件交流特别频繁,逻辑很复杂,那redux的优势就特别明显了。我第一次做react项目的时候并没有用redux,所有的逻辑都是在组件内部实现。
        先简单说一下redux和react是怎么配合的。react-redux提供了connect和Provider两个好基友,它们一个将组件与redux关联起来,一个将store传给组件。组件通过dispatch发出action,store根据action的type属性调用对应的reducer并传入state和这个action,reducer对state进行处理并返回一个新的state放入store,connect监听到store发生变化,调用setState更新组件,此时组件的props也就跟着变化。
        流程图如下:


        
值得注意的是connect,Provider,mapStateToProps,mapDispatchToProps是react-redux提供的,redux本身和react没有半毛钱关系,它只是数据处理中心,没有和react产生任何耦合,是react-redux让它们联系在一起。

接下来具体分析一下,redux以及react-redux到底是怎么实现的,看图:



看图说话:redux主要由三部分组成:store,action,reducer。

store是一个对象,它有四个主要的方法:

1、dispatch:
用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造,比如当action传入dispatch会立即触发reducer,有些时候我们不希望它立即触发,而是等待异步操作完成之后再触发,这时候用redux-thunk对dispatch进行改造,以前只能传入一个对象,改造完成后可以传入一个函数,在这个函数里我们手动dispatch一个action对象,这个过程是可控的,就实现了异步。
2、subscribe:
监听state的变化——这个函数在store调用dispatch时会注册一个listener监听state变化,当我们需要知道state是否变化时可以调用,它返回一个函数,调用这个返回的函数可以注销监听。 
let unsubscribe = store.subscribe(() => {console.log('state发生了变化')})
3、getState:
获取store中的state——当我们用action触发reducer改变了state时,需要再拿到新的state里的数据,毕竟数据才是我们想要的。getState主要在两个地方需要用到,一是在dispatch拿到action后store需要用它来获取state里的数据,并把这个数据传给reducer,这个过程是自动执行的,二是在我们利用subscribe监听到state发生变化后调用它来获取新的state数据。
4、replaceReducer:
替换reducer,改变state修改的逻辑。
store可以通过createStore()方法创建,接受三个参数,经过combineReducers合并的reducer和state的初始状态以及改变dispatch的中间件,后两个参数并不是必须的。store的主要作用是将action和reducer联系起来并改变state。
action:
action是一个对象,其中type属性是必须的,同时可以传入一些数据。action可以用actionCreactor进行创造。dispatch就是把action对象发送出去。
reducer:
reducer是一个函数,它接受一个state和一个action,根据action的type返回一个新的state。根据业务逻辑可以分为很多个reducer,然后通过combineReducers将它们合并,state树中有很多对象,每个state对象对应一个reducer,state对象的名字可以在合并时定义。

combineReducers:
其实它也是一个reducer,它接受整个state和一个action,然后将整个state拆分发送给对应的reducer进行处理,所有的reducer会收到相同的action,不过它们会根据action的type进行判断,有这个type就进行处理然后返回新的state,没有就返回默认值,然后这些分散的state又会整合在一起返回一个新的state树。
        接下来分析一下整体的流程,首先调用store.dispatch将action作为参数传入,同时用getState获取当前的状态树state并注册subscribe的listener监听state变化,再调用combineReducers并将获取的state和action传入。combineReducers会将传入的state和action传给所有reducer,并根据action的type返回新的state,触发state树的更新,我们调用subscribe监听到state发生变化后用getState获取新的state数据。
其实redux的state和react的state两者完全没有关系,除了名字一样。
本期就到这,下期更新 react-redux到底做了什么?敬请期待!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|内蒙古森川园林设计有限公司

GMT+8, 2018-9-19 13:39 , Processed in 0.092314 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表