反应,回来的,react-redux三者的关系是什么

　　介绍

这期内容当中小编将会给大家带来有关反应,回来的,react-redux三者的关系是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

对

一些小型项目,只使用反应完全够用了,数据管理使用道具、状态即可,那什么时候需要引入回来的呢?当渲染一个组件的数据是通过道具从父组件中获取时,通常情况下是一个——比;B,但随着业务复杂度的增加,有可能是这样的:——比;B——比;C——比;D——比;E, E需要的数据需要从一个那里通过道具传递过来,以及对应的E——比;一个逆向传递回调。组件BCD是不需要这些数据的,但是又必须经由它们来传递,这确实有点不爽,而且传递的道具以及回调对BCD组件的复用也会造成影响。或者兄弟组件之间想要共享某些数据,也不是很方便传递,获取等。诸如此类的情况,就有必要引入回来的了。

其实——比;B——比;C——比;D——比;E这种情况,反应不使用道具层层传递也是能拿到数据的,使用上下文即可。后面要讲到的react-redux就是通过上下文让各个子组件拿到商店中的数据的。

回来的

其实我们只是想找个地方存放一些共享数据而已,大家都可以获取到,也都可以进行修改,仅此而已。那放在一个全部变量里面行不行吗?行,当然行,但是太不优雅,也不安全,因为是全局变量嘛,谁都能访问,谁都能修改,有可能一不小心被哪个小伙伴覆盖了也说不定。那全局变量不行就用私有变量呗,私有变量,不能轻易被修改,是不是立马就想到闭包了……

现在要写这样一个函数,其满足:

<李>

存放一个数据对象

<李>

外界能访问到这个数据

<李>

外界也能修改这个数据

<李>

当数据有变化的时候,通知订阅者

function  createStore(减速器,initialState), { 　　,//现状后就是那个数据 　　,let  currentState =, initialState; 　　,let  listener =,(),=祝辞,{}; 　　 　　,function  getState (), { 　　,return 现状后; 　　,} 　　,function 调度(行动),{=,currentState 减速器(现状后,,行动);,//,更新数据 　　,侦听器();//,执行订阅函数 　　,return 行动; 　　,} 　　,function 订阅(newListener), {=,,listener  newListener; 　　,//取消订阅函数 　　,return  function 退订(),{ 　　listener 才能=,(),=祝辞,{}; 　　,}; 　　,} 　　,return  { 　　,getState, 　　调度, 　　,订阅 　　,}; 　　} 　　 　　const  store =, createStore(减速器); 　　store.getState();,//,获取数据 　　store.dispatch({类型:& # 39;ADD_TODO& # 39;});,//,更新数据 　　store.subscribe((),=祝辞,{/*,update  UI  */});,//,注册订阅函数

更新数据执行的步骤:

<李>

什么:想干什么——调度(行动)

<李>

如何:怎么干,干的结果- - -减速器(oldState、动作)=比;李newState

<李>

呢?:重新执行订阅函数(比如重新渲染UI等)

这样就实现了一个商店,提供一个数据存储中心,可以供外部访问,修改等,这就是终极版的主要思想。所以,回来的确实和没反应有什么本质关系,回来的可以结合其他库正常使用。只不过回来的这种数据管理方式,跟反应的数据驱动视图理念很合拍,它俩结合在一起,开发非常便利。

现在既然有了一个安全的地方存取数据,怎么结合到反应里面呢?我们可以在应用初始化的时候,创建一个窗口。商店=createStore(减速器),然后在需要的地方通过store.getState()去获取数据,通过store.dispatch去更新数据,通过store.subscribe去订阅数据变化然后进行设置状态……如果很多地方都这样做一遍,实在是不堪其重,而且,还是没有避免掉全局变量的不优雅。

React-Redux

由于全局变量有诸多的缺点,那就换个思路,把商店直接集成到反应应用的顶层道具里面,只要各个子组件能访问到顶层道具就行了,比如这样:

& lt; TopWrapComponent 商店={商店}比; 　　,& lt; App /比; 　　& lt;/TopWrapComponent>

反应恰好提供了这么一个钩子,上下文,用法很简单,看一下官方演示就明了。现在各个子组件已经能够轻易地访问到商店了,接下来就是子组件把商店中用到的数据取出来,修改,以及订阅更新UI等。每个子组件都需要这样做一遍,显然,肯定有更便利的方法:高阶组件。通过高阶组件把store.getState (), store.dispatch,商店。订阅封装起来,子组件对商店就无感知了,子组件正常使用道具获取数据以及正常使用回调触发回调,相当于没存有商店在一样。

反应,回来的,react-redux三者的关系是什么