具体代码可以查看我的代码仓库

https://gitee.com/haomYGH/Web20/tree/master/010-React/014-redux-immutable

页面展示

要处理的问题：操作上面的组件影响到了下面的组件？？？

解决方法：

.........................................................................................................

如果页面需要使用相同的组件，我们需要保证两点不同，
1.组件名
2.actiion.type不同
这样当点击页面派发action的时候，才不会相互影响

......................................................................................................

具体实现：修改组件派发的action中的type

就是当我们使用redux-redux管理数据时

这一步相当于把所有子组件的reducer放在了同一个文件下。

所以当派发action时，如果里面的type相同，程序就会走到对应的判断语句里，从而修改各个组件的state

最后注意：组件获取的是自己组件的数据

react引入相同组件时互不影响的更多相关文章

  1. react 项目实战（十）引入AntDesign组件库

    本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm ...

  2. 小程序 components 下的组件引入字体图标时样式不生效

    在组件内的样式在引入一遍 字体图标样式, pages 下的组件不受影响,全局引入字体图标样式即刻,不需要再次引入

  3. 纯粹极简的react状态管理组件unstated

    简介 unstated是一个极简的状态管理组件 看它的简介:State so simple, it goes without saying 对比 对比redux: 更加灵活(相对的缺点是缺少规则,需要 ...

  4. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  5. React Native交互组件之Touchable

    React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...

  6. react - 解刨组件的多种写法

    一,原始的createClass写法 对于写react组件,很多人第一印象往往是createClass,这是因为createClass是react组件最原始的写法,基本每个学react的人都是接触这种 ...

  7. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  8. React笔记：组件（3）

    1. 组件定义 组件是React的核心概念,组件将应用的UI拆分成独立的.可复用的模块. 定义组件的两种方式: (1)类组件:使用ES6 class (2)函数组件:使用函数 使用class定义组件的 ...

  9. 从 0 到 1 实现 React 系列 —— 2.组件和 state|props

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

随机推荐

  1. The Shortest Statement CodeForces - 1051F 最小生成树+并查集+LCA

    题目描述 You are given a weighed undirected connected graph, consisting of n vertices and mm edges. You ...

  2. Python——assert、isinstance的用法

    1.assert 函数说明: assert语句是一种插入调试断点到程序的一种便捷的方式. 使用范例 assert 3 == 3 assert 1 == True assert (4 == 4) pri ...

  3. TKCTF-学校内部的校赛

    *Reverse easy_C easy_re1.exe 在网络百度到解决逆向需要用到软件IDA 然后用IDA打开一条条的找我找到了一条很怪的ZmxhZ3s1ZWU1ZjYyOC1mMzVhLTQxN ...

  4. 测试必备工具之抓包神器 Charles 如何抓取 https 数据包？

    之前发过一篇文章讲解了Charles抓包工具的基本使用(有需要的小伙伴可以去看上一篇文章),  讲的数据包主要是http协议,大家可以看到数据包并直接显示具体详细的内容: 但是如果抓到的是https的 ...

  5. day78 通过axios实现数据请求

    目录 一.axios提供http请求的两个常用方法 二.json 1.json数据的语法 2 js中提供json数据转化的方式 三 ajax 1 数据接口 2 ajax在jq和vue的不同使用 3 同 ...

  6. 基于.NetCore3.1系列 —— 认证授权方案之授权揭秘 (下篇)

    一.前言 回顾:基于.NetCore3.1系列 -- 认证授权方案之授权揭秘 (上篇) 在上一篇中,主要讲解了授权在配置方面的源码,从添加授权配置开始,我们引入了需要的授权配置选项,而不同的授权要求构 ...

  7. Scala 面向对象（六）：面向对象的特征二：继承 （一）

    1 Scala继承的基本语法 class 子类名 extends 父类名 { 类体 } class Person { var name : String = _ var age : Int = _ d ...

  8. Python之爬虫（十四） Scrapy框架的架构和原理

    这一篇文章主要是为了对scrapy框架的工作流程以及各个组件功能的介绍 Scrapy目前已经可以很好的在python3上运行Scrapy使用了Twisted作为框架,Twisted有些特殊的地方是它是 ...

  9. linux 安装superset

    背景说明 公司数据分析人员需要将日常监控分析数据进行可视化,在踩了一些坑之后,终于在业务环境中搭建成功superset,后续复现两次流程也是成功的,分享一波... 业务环境说明 操作系统:centos ...

  10. [Qt插件]-01Qt插件&&提升部件(自定义控件)

    本篇的文档为:How to Create Qt Plugins https://doc.qt.io/qt-5/plugins-howto.html   前言 Qt插件(Qt Plugin)就是一个共享 ...