首页 > 其他分享 >React - 31 redux和react-redux的归纳梳理

React - 31 redux和react-redux的归纳梳理

时间:2023-06-20 17:32:04浏览次数:34  
标签:状态 执行 派发 31 reducer react 组件 redux

如果使用redux

1.把reducer/状态按照模块进行划分和管理;把所有模块的reducer合并为一个即可! !

React - 31 redux和react-redux的归纳梳理_react

2.每一次任务派发,都会把所有模块的reducer,依次去执行,派发时候传递的行为对象(行为标识)是统一的!! 所以我们要保证各个模块之间,派发的行为标识的唯一性!!>派发行为标识的统一管理! !

React - 31 redux和react-redux的归纳梳理_react_02

3.需要派发的组件

  • store.dispatch(actionCreator)


如果使用react-redux(react-redux就是帮助我们简化redux在组件中的应用)

1.提供的Provider组件,可以自己在内部创建上下文对象,把store放在根组件的上下文中!

React - 31 redux和react-redux的归纳梳理_react_03

2.提供的connect函数,在函数内部,可以获取到上下文中的store,然后快速的把公共状态以及需要派发的操作,基于属性传递给组件!!connect(mapStateloProps,mapDispatchToProps)(渲染的组件)

React - 31 redux和react-redux的归纳梳理_react_04

3.派发

React - 31 redux和react-redux的归纳梳理_react_05

此阶段讲课中,我们涉及的原理和源码redux

  • createStore
  • combineReducers bindActionCreators +..
  • redux在设计上,是存在一些不好的地方的

①我们基于getState获取的公共状态,是直接和redux中的公共状态,共用相同的堆地址,这样导致,是可以直接修改公共状态信息的!!

React - 31 redux和react-redux的归纳梳理_react_06

②我们会把让组件更新的办法,放在事件池中,当公共状态改变.,会通知事件池中的所有方法执行!!此操作:放置方法的时候,没有办法设置状态的依赖,这样,后期不论哪个状态被修改,事件池中所有的方法都要执行(相关的组件都要进行更新)

React - 31 redux和react-redux的归纳梳理_react_07

React - 31 redux和react-redux的归纳梳理_react_08

如果要优化,我们在向事件池中加入方法的时候,把依赖的信息也设置了!!在每一次执行reducer修改状态之前,把之前的状态存储一份 prev] ,修改后的最新状态也获取到 TnextJ ! !

通知事件池中方法执行的时候,拿出来的某个方法是否会执行,就可以prev和next中,此方法依赖的状态是否改变!!

真实项目中,如果都这样去优化这个操作,每一次事件池中方法执行,也会有一套计算的逻辑(多多少少消耗一点点性能) ;

而往往,我们配合react-router操作的时候,虽然按照原有的操作逻辑,不论啥状态改变,事件池中的方法都会触发执行,但是react-router会让很多组件释放掉,只展示当前模块的组件TSPAJ ,这样即便组件更新的方法执行,但是因为组件都释放了,所以也不会产生太大的影响!! 而且我们还可以在组件释放的时候,把对应更新的方法,从事件池中移除掉! ! 

③所有reducer的合并,其实不是代码的合并,而是创建一个总的reducer出来,每一次派发,都是让总的reducer执行,而在这里,会把每个模块的reducer都完完整整执行一遍,即便中间已经发现匹配的逻辑了,也会继续把其它模块中的reducer执行!!

React - 31 redux和react-redux的归纳梳理_react_09

优化思路: 在某个模块的reducer中,如果派发的行为标识有匹配了【因为行为标识是统一管理的,所以遇到匹配的,说明后面不可能再匹配了】,则停止执行后面的reducer! !

标签:状态,执行,派发,31,reducer,react,组件,redux
From: https://blog.51cto.com/u_12207234/6524048

相关文章

  • React 性能優化:使用 memo、useCallback、useMemo
    在寫網頁時,我們通常習慣把一個頁面切割成很多的元件(Component),讓我們容易組織與管理頁面的組成。但是在React中複雜的元件關係,如果沒有經過優化,將有可能會造成性能上的問題。在FunctionComponent中,重新渲染(re-render)很輕易就會被觸發,少量的元件時還不會發生太大的問......
  • 最完美WIN11_Pro_22H2.22631.1900软件选装纯净版VIP50.3
    【系统简介】=============================================================1.本次更新母盘来自UUP_WIN11_PRO_22H2.22631.1900。进一步精简优化调整。2.只为呈现最好的作品,手工精简优化部分较多。3.OS版本号为22631.1900。个别要求高的就下MSDN吧,里面啥功能都有。4.集成《DrvCeo......
  • Java面试题集(131-135)
    131、请对以下JavaEE中的名词进行解释答:容器:容器为JavaEE应用程序组件提供了运行时支持。容器提供了一份从底层JavaEEAPI到应用程序组件的联合视图。JavaEE应用程序组件不能直接地与其它JavaEE应用程序组件交互。它们通过容器的协议和方法来达成它们之间以及它们与平台服......
  • react-native 调用系统原生分享
    调用手机系统原生分享如下图 使用: react-native-sharereact-native-share官网......
  • 20230313 java.util.LinkedList
    简介java.util.LinkedListLinkedList相对ArrayList要复杂一些,不是因为链表操作比数组操作复杂,而是LinkedList实现了更多接口LinkedList除了实现List接口外,还实现了Queue和Deque接口,也就意味着可以作为队列或双向队列使用对链表的学习非常有帮助感悟对于接口的认......
  • react经典面试题解析--持续更新--day02
    二十一、高阶组件的使用场景1、数据获取:高阶组件可以在组件挂载时自动获取数据,并将数据通过props传递给被包装组件。2、权限控制:高阶组件可以检查用户是否有访问该组件的权限,从而决定是否渲染该组件。3、代码重用:高阶组件可以通过封装一些常见的逻辑,来提高代码的复用性。4、......
  • LTV-5314-ASEMI代理光宝IGBT驱动器LTV-5314
    编辑:llLTV-5314-ASEMI代理光宝IGBT驱动器LTV-5314型号:LTV-5314品牌:台湾光宝封装:SOP-5工作温度:-40°C~110°CLTV-5314特性:1.5A最大峰值输出电流1.0A最小峰值输出电流轨对轨输出电压150ns最大传播延迟100ns最大传播延迟差带滞后的欠压锁定保护(UVLO)VCM=1000V时的35kV/us最小共模......
  • LTV-5314-ASEMI代理光宝IGBT驱动器LTV-5314
    编辑:llLTV-5314-ASEMI代理光宝IGBT驱动器LTV-5314型号:LTV-5314品牌:台湾光宝封装:SOP-5工作温度:-40°C~110°CLTV-5314特性:1.5A最大峰值输出电流1.0A最小峰值输出电流轨对轨输出电压150ns最大传播延迟100ns最大传播延迟差带滞后的欠压锁定保护(UVLO)VCM=1000V时的35......
  • 三菱FX3U-485ADP-MB通讯三种变频器程序 已实现测试的变频器:施耐德ATV312,
    三菱FX3U-485ADP-MB通讯三种变频器程序已实现测试的变频器:施耐德ATV312,三菱E700,台达VFD-M三款变频器,支持rtu的协议的变频器都可实现。需要硬件:FX3UPLC,FX3U-485ADP-MB通信扩展模块,施耐德ATV312变频器或台达vfd-m变频器或三菱E700变频器,fx3u-cnv-bd。通过modbusrtu通讯方式,可......
  • 运动控制,数控系统所需要的各种插补以及加减速的文献 用FPGA开发了款类似MCX314跟pcl6
    运动控制,数控系统所需要的各种插补以及加减速的文献用FPGA开发了款类似MCX314跟pcl6045的运动控制IC,在开发的过程中,大量参考了文献.现在将这些文献出,可以缩短你的开发时间.整个资料压缩后有1G大小运动控制是指通过控制系统对机械设备的运动进行精确控制的过程。它在各种工......