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

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. Uni-app登录态管理（vuex）

    应用中,保持登录状态是常见需求,本文讲解使用uni-app框架时如何保持用户登录状态. 即:初次进入应用为未登录状态------->登录---------->关闭应用,再次打开------ ...

  2. 十年老苹果（A1286）强升Catalina及Win10踩坑记

    前言 手头有一台十年老苹果,MacBook Pro,A1286,连视网膜屏都没有,电池也早就衰减以后直接拆掉了(减重). 早些年用得还挺多,后来家里也弄了台式,用得逐渐少了,再后来时不时Windows ...

  3. pytest框架使用教程

    Pytest框架 一.简介 pytest:基于unittest之上的单元测试框架 有什么特点? 自动发现测试模块和测试方法 断言更加方便,assert + 表达式,例如 assert 1 == 1 灵 ...

  4. python 并发专题（一）：并发基础相关概念，术语等

    一.线程 1.概念 线程是程序执行流的最小执行单位,是行程中的实际运作单位. 进程是一个动态的过程,是一个活动的实体.简单来说,一个应用程序的运行就可以被看做是一个进程,而线程,是运行中的实际的任务执 ...

  5. 数据可视化之powerBI基础（十一）Power BI中的数据如何导出到Excel中？

    https://zhuanlan.zhihu.com/p/64415543 把Excel中数据加载到PowerBI中我们都已经熟悉了,但是怎么把在PowerBI中处理好的数据导出到Excel中呢?毕竟 ...

  6. Spring入门案例

    一.Spring基本介绍 1.什么是Spring Spring 是分层的 Java SE/EE 应用 full-stack 轻量级开源框架,以 IoC(Inverse Of Control: 反转控制 ...

  7. 绘图和可视化知识图谱-《利用Python进行数据分析》

    所有内容整理自<利用Python进行数据分析>,使用MindMaster Pro 7.3制作,emmx格式,源文件已经上传Github,需要的同学转左上角自行下载或者右击保存图片. 其他章 ...

  8. Java设计模式 --- 七大常用设计模式示例归纳

    设计模式分为三种类型,共23种: 创建型模式:单例模式.抽象工厂模式.建造者模式.工厂模式.原型模式 结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式 行为型模式:模 ...

  9. Ethical Hacking - POST EXPLOITATION(3)

    Spying - Capturing Key Strikes & Taking Screen Shots Log all mouse/keyboard events > keyscan- ...

  10. 用前端姿势玩docker【四】基于docker快速构建webpack的开发与生产环境

    目录 用前端姿势玩docker[一]Docker通俗理解常用功能汇总与操作埋坑 用前端姿势玩docker[二]dockerfile定制镜像初体验 用前端姿势玩docker[三]基于nvm的前端环境构建 ...