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

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. MyBatis-Plus 用起来真的很舒服

    一.MyBatis-Plus 1.简介 MyBatis-Plus 是一个 Mybatis 增强版工具,在 MyBatis 上扩充了其他功能没有改变其基本功能,为了简化开发提交效率而存在. 官网文档地址 ...

  2. 攻防世界-Web-ics-05

    根据题目提示直接进入设备维护中心 点击云平台设备维护中心发现page=index LFI漏洞的黑盒判断方法: 单纯的从URL判断的话,URL中path.dir.file.pag.page.archiv ...

  3. scala 数据结构（三）：元组Tuple

    1 元组Tuple-元组的基本使用 基本介绍 元组也是可以理解为一个容器,可以存放各种相同或不同类型的数据. 说的简单点,就是将多个无关的数据封装为一个整体,称为元组, 最多的特点灵活,对数据没有过多 ...

  4. java 基本语法（十六）Lambda （三）函数式接口

    方法引用1.理解:方法引用可以看做是Lambda表达式深层次的表达.换句话说,方法引用就是Lambda表达式,也就是函数式接口的一个实例,通过方法的名字来指向一个方法. 2.使用情境:当要传递给Lam ...

  5. 数据可视化基础专题（六）：Pandas基础（五） 索引和数据选择器（查找）

    1.序言 如何切片,切块,以及通常获取和设置pandas对象的子集 2.索引的不同选择 对象选择已经有许多用户请求的添加,以支持更明确的基于位置的索引.Pandas现在支持三种类型的多轴索引. .lo ...

  6. 数据可视化之powerBI入门（三）财务人员必学，使用Powerquery是一种什么体验？

    https://zhuanlan.zhihu.com/p/54700574 财务人员必学,使用Powerquery是一种什么体验? 你和Excel高手的距离只差了一个Power Query!!! 先思 ...

  7. Apache Avro & Avro Schema简介

    为什么需要schema registry? 首先我们知道: Kafka将字节作为输入并发布 没有数据验证 但是: 如果Producer发送了bad data怎么办? 如果字段被重命名怎么办? 如果数据 ...

  8. disconf原理解析

    前有了解过disconf,也知道它是基于zookeeper来做的,特意写了文章记录下自己的见解.如有错误,欢迎指正. 1.disconf-web会在启动时,将自身的host和配置文件注册到zookee ...

  9. three.js 绘制3d地图

    通过地图数据配合three可以做出非常酷炫的地图,在大数据展示中十分常见. 这篇郭先生就来说说使用three.js几何体制作3D地图.在线案例点击原文地址. 地图的数据是各个地图块的点数组,通过THR ...

  10. Trie——解决字符串搜索、异或最值问题

    Trie--解决字符串搜索.异或最值问题 在说到Trie之前,我们设想如下问题: 给我们1e5个由小写字母构成的不重复的字符串,每个字符串长度不超过6,之后是1e5次查询操作,每次给我们一个字符串,要 ...