当前位置: 首页 > 编程日记 > 正文

react 开发过程中的总结/归纳

1、点击元素,获取绑定该事件的父级元素,使用 e.currentTarget。e.target 获取的是,出发该事件的元素,该元素有可能是所绑定事件的元素的子元素。

2、使用 react router4

history 只能传递给儿子组件,不能传递给孙子组件

如果孙子组件需要,可以通过 props 传递过去

3、关于 react-router 不同页面 根据地址栏标识的不同请求渲染不同的内容

this.props.history.push({pathname:'',state:{}
});

把页面跳转时要传递的参数放到 state 里面,这样页面刷新的时候通过 location.state 也能读取到该值

4、昨天突然想重构下代码,整理下 state,结果碰到了一个调试好久没找到的问题

问题代码:

1 // metric 是一个数组,保存在 store 里面,通过 mapStateToProps 传递的
2 that.props.metric.map((val)=>{
3    // addColorSelect 根据 metric 每个值添加相应的设置
4     configureStore.dispatch(addColorSelect(val));
5 })

问题:触发相应的操作,发现怎么样,dispatch 里面的函数没有相应的执行结果。然后由于思维太发散,一度找错了解决方向

今天早上冷静的调试了下,发现了问题所在

由于我的 val 直接用的是 store 中 metric 的值,在 action 返回值中,metric 的每个值都携带了 type 字段。这与 addColorSelect 对应 action 的 type 产生了冲突,所以没有想要的效果

解决问题代码:

1 that.props.metric.map((val)=>{
2     delete val.type;//删除val中携带的action.type即可
3     configureStore.dispatch(addColorSelect(val));
4 })

总结:看来找错误一定不要病急乱投医,认真看值传递的方向以及特定属性内容还是很重要的

5、不要随便使用 state 的状态来进行判断,因为 state 更改是需要经过声明周期函数的,如果修改state后,一味根据 state 状态进行判断,有时会出现臆想不到的错误。

合理的做法是,根据某个值更新 state 状态,然后根据该值进行下一步操作,判断.....

今天就遇到一个坑,就是明明可以通过 flag 标示来判断元素该是隐藏还是显示,却偏偏用了 state,这样导致我的显示状态总是滞后一步,用了好长时间才找到问题所在,我内心也是呜呜呜呜的。如果使用 flag 直接判断的话,然后修改 state,我就不需要去管 state 在执行流程,任他怎么执行,我的显示状态是正确的即可

6、在进行写一个功能比较多的项目的时候,学会借助思维导图,进行逻辑梳理。因为做公司项目的时候,一次行评完需求进行开发,导致需求太多越做越混乱,所以开发时花费一部分事件进行逻辑梳理会起到事半功倍的作用。小伙伴们学起来哦~

7、获取真实的DOM元素方法:

a1、首先给组件的元素添加 ref 属性,例如:<div ref='thisDom'><div/>

a2、在 componentDidMount 函数中通过 this.refs.thisDom 就可以获取到。之所以是在 componentDidMount 中获取是因为,在组件第一次 render 的时候才会读取到 ref ,并赋值给                  this的 refs 属性。

8、某个组件的操作,触发另外一个组件内容的更改。可以通过借助 PubSub-js 来解决,具体做法如下:

a1、首先在一个组件中注册一个 pubsub 方法,例如:在组件A的 constructer中注册,this.tocken = PubSub.subscribe('事件名称', 触发事件的回调函数)

a2、为防止事件多次被注册,在组件 componentWillUnmount 函数中需要销毁事件 PubSub.unsubscribe(this.token)

a3、在需要触发该事件的地方写 PubSub.sublish('对应的事件名称','要传入回调函数中的内容')

a4、⚠️需要注意的是,无论回调函数传入什么,第一个参数永远是 '事件名称'

转载于:https://www.cnblogs.com/z-one/p/9100785.html

相关文章:

kvm虚拟机--存储池配置梳理(转)

1.创建基于文件夹的存储池&#xff08;目录&#xff09; 2.定义存储池与其目录 1 # virsh pool-define-as vmdisk --type dir --target /data/vmfs 3.创建已定义的存储池 (1)创建已定义的存储池 1 # virsh pool-build vmdisk (2)查看已定义的存储池&#xff0c;存储池不激活无法…

区块链概况:什么是区块链

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 区块链技术自身仍然在飞速发展中&#xff0c;目前还缺乏统一的规范和标准。 wikipedia 给出的定义为&#xff1a; A blockchain —originally, b…

drx功能开启后_简单实用!小米手机中这些新功能真香

小米手机作为国产机热销品牌之一&#xff0c;它除了有好看的外观&#xff0c;还有很多隐藏的实用功能&#xff0c;今天小编就来和大家分享5个小米手机里你不知道的功能。Al电话助理看到陌生号码时&#xff0c;很多人第一反应就是挂掉&#xff0c;不想接听&#xff0c;但又担心自…

Ubuntu 8.04嵌入式交叉编译环境arm-linux-gcc搭建过程图解

Linux版本&#xff1a;Ubuntu8.04 内核版本&#xff1a;Linux 2.6.24 交叉编译器版本&#xff1a;arm-linux-gcc-3.4.1 交叉编译器下载链接&#xff1a; https://share.weiyun.com/5oxlS6X &#xff08;密码&#xff1a;36R7&#xff09; 前言 1、搭建交叉编译环境 安装、配置交…

Installshield 2015 实现检测某安装文件是否存在并运行安装

最近在用installshiled 2015做安装包&#xff0c;用了很长时间研究明白了怎样实现在安装成功界面显示一个checkbox&#xff0c;选中该checkbox&#xff0c;就会安装选中的安装包。 首先我们要有一个installshield的工程。 其次是判断是否要显示这个checkbox。我的需求是根据某个…

区块链概况:从数字货币说起

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 从数字货币说起 货币是人类文明发展过程中的一大发明&#xff0c;最重要的职能包括价值尺度、流通手段、贮藏手段。很难想象离开了货币&#xff0c…

Android RecyclerView 基本使用

Android RecyclerView 基本使用 概述 RecyclerView出现已经有一段时间了&#xff0c;相信大家肯定不陌生了&#xff0c;大家可以通过导入support-v7对其进行使用。 据官方的介绍&#xff0c;该控件用于在有限的窗口中展示大量数据集&#xff0c;其实这样功能的控件我们并不陌生…

lisp语言cond和if套用_在'if'语句中设置多行条件的样式?

Harley Holco..679您不需要在第二个条件行上使用4个空格.也许用:if (cond1 val1 and cond2 val2 andcond3 val3 and cond4 val4):do_something另外,不要忘记空格比您想象的更灵活:if (cond1 val1 and cond2 val2 andcond3 val3 and cond4 val4):do_somethingif (cond1 …

jvm七种垃圾收集器

JVM_七种垃圾收集器介绍 本文中的垃圾收集器研究背景为&#xff1a;HotSpotJDK7一、垃圾收集器概述如上图所示&#xff0c;垃圾回收算法一共有7个&#xff0c;3个属于年轻代、三个属于年老代&#xff0c;G1属于横跨年轻代和年老代的算法。JVM会从年轻代和年老代各选出一个算法进…

新手怎么学以太坊区块链开发?

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 在学习以太坊应用开发时&#xff0c;除了学习solidity开发智能合约&#xff0c;一个小白还应该补充 哪些知识&#xff1f;文本将给出相关的学习资源…

【题解】 bzoj1260: [CQOI2007]涂色paint (区间dp)

bzoj1260&#xff0c;懒得复制&#xff0c;戳我戳我 Solution: 这种题目我不会做qwq&#xff0c;太菜了区间打牌(dp) 用f[l][r]表示从l到r最少需要染几次色。状态转移方程&#xff1a; 1.\(f[l][r]min(f[l][i],f[i1][r]) (l<i<r)\) 这段染色等于俩段分别染色&#xff0c;…

[deviceone开发]-组件功能演示示例

一、简介 这个是官方比较早期对组件功能的展示集合&#xff0c;因为发布的比较早&#xff0c;只包含了部分组件&#xff0c;但是常用的组件和常用的功能都包含了。初学者推荐。二、效果图 三、相关下载 https://github.com/do-project/code4do/tree/master/demo四、相关讨论 ht…

联想g510升级换什么cpu好_老兵不死,十年前的联想 Y450 笔记本复活记

如果你是一个接触笔记本电脑比较早的用户&#xff0c;那么联想小Y的大名你一定不会陌生&#xff0c;作为联想旗下较为成功的产品线&#xff0c;彪悍的小Y在几年前就打出了名堂&#xff0c;而小Y系列笔记本里面又以 Y450 最为经典&#xff0c;Y450 引入 NVIDIA GT240M 中端移动显…

区块链和数据库

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 区块链技术是一种不依赖第三方、通过自身分散式节点进行网路数据的存储、验证、传递和交流的一种技术方案。因此&#xff0c;有人从金融会计的角度…

普通粒子群算法和优化方法

粒子群优化(PSO, particle swarm optimization) 是由Kennedy和Eberhart在1995年提出的一 种群智能优化方法。 优点&#xff1a;好理解容易实现&#xff0c;适合解决极值问题 缺点&#xff1a;容易过早收敛&#xff0c;容易陷入局部最优解&#xff0c;&#xff08;如果初始点选的…

古人怎么称呼年龄

来自为知笔记(Wiz)转载于:https://www.cnblogs.com/sanyuanempire/p/6154780.html

vue变量传值_vue组件与组件之间传值

目录一、父组件向子组件传值二、子组件向父组件传值三、兄弟组件之间的传值如上图所示&#xff0c;2是1的子组件&#xff0c;1是3的父组件&#xff0c;2和3是兄弟组件一、父组件向子组件传值&#xff1a;html代码:<div id"app"><v-app><!-- 用:xxxx&q…

区块链技术背后的运行逻辑

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 区块链技术可能是自互联网技术以来最伟大的发明。区块链可以在不需要有中央权威机构的情况下或不需要双方信任的情况下交换价值或财富。想像一下你…

scp遇到路径中有空格

sudo scp root1.1.1.1:/test/soft/123/Microsoft SQL Server 2000.iso . 错误&#xff01; sudo scp root1.1.1.1:"/test/soft/123/Microsoft SQL Server 2000.iso" . 错误&#xff01; sudo scp root1.1.1.1:/test/soft/123/Microsoft\ SQL\ Server\ 2000.…

bzoj 3262 陌上花开

本质是一个三维偏序&#xff0c;一位排序后cdq分治&#xff0c;一维在子函数里排序&#xff0c;一维用树状数组维护。 把三维相等的合并到一个里面。 1 #include<iostream>2 #include<cstdio>3 #include<algorithm>4 #include<cstring>5 #define N 100…

jspstudy启动mysql失败_MySql启动数据库设置初始密码

这一小节介绍在Mac OS、Linux、Windows上启动关闭重启MySQL服务&#xff0c;以及部分图形化界面对服务的操控。安装完成后&#xff0c;可以使用 service 命令启动 mysql 服务&#xff0c;在Mac上service命令不存在。命令行启动关闭重启MySQL服务在命令行终端启动 MySQL 非常方便…

区块链技术产生数字货币时代

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 比特币是一种革命性的数字货币&#xff0c;更是一种颠覆性的创新技术。比特币最大的贡献是创造了信用&#xff0c;解决了困扰互联网进一步发展的拜…

软件构造 第二章 第一节 软件生命周期和版本控制

软件构造第二章 第一节 软件生命周期和版本控制 基本内容 Software Development Lifecycle (SDLC) Traditional software process models (waterfall, incremental, V- model, prototyping, spiral) Agile development and eXtreme Programming (XP) Collaborative software de…

三极管在ad中的原理图库_555时基电路内部结构及其工作原理

555时基电路特点时基电路是一种常用的模数混合型集成电路。由它组成的振荡器、单稳态触发器、双稳态触发器和各类电子开关等都被十分广泛地应用在各类电路之中。它具有定时精度高、响应速度快、温漂小、输出驱动电流大、结构简单等优点。555时基电路型号命名555时基芯片由其内部…

Mac下导出chrome插件

Mac下导出chrome插件 chrome最强大的功能之一就是插件&#xff0c;有时候需要给小伙伴们共享一些插件&#xff0c;所以需要将自己chrome中的插件打包&#xff0c;在mac下打包插件还是挺费劲的&#xff0c;在此记录。 打开chrome的扩展程序&#xff0c;找到要导出的插件&#xf…

区块链技术的本质是分布式数据库

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 区块链技术是基于比特币应用提出的一个概念&#xff0c;他是一个融合了多种技术的一个集成式创新。目前区块链的应用早已不仅仅局限在比特币上。人…

sql数据库系统表和mysql系统表

sql数据库系统表,常用的(sysobjects,sysindexes,sysindexkeys,SYSCOLUMNS,SYSTYPES 及更多解释说明): https://docs.microsoft.com/zh-tw/previous-versions/sql/sql-server-2012/ms177596(v%3dsql.110) 系统存储过程sp_spaceused: 执行sp_spaceused存储过程的时候可以不用带参…

交换机启用光口命令_如何在思科交换机上查询光模块状态?

本篇文章易天光通信(ETU-LINK)将为大家介绍下怎么在思科交换机上查询光模块的信息。 第一步,我们需要连接网络,然后登陆思科交换机的管理平台,用户名和密码默认是cisco/cisco。 第二步,在交换机的特权EXEC模式,通过输入以下使用显示光纤端口光纤收发器命令:show光纤端口…

深入浅出谈以太坊智能合约

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 1什么是合约? 合约是代码&#xff08;它的功能&#xff09;和数据&#xff08;它的状态&#xff09;的集合&#xff0c;存在于以太坊区块链的特定…

人机猜拳(这是最近的一个总结)

人机猜拳是我自己原创的一段代码&#xff0c;我刚学完do-while&#xff0c;知识有限&#xff0c;但自己感觉写的这段代码是我的一个小巅峰&#xff0c;发出来让大家看看&#xff0c;新手能学到东西的话是极好的&#xff0c;然后更多的是想让一些老鸟给点建议。这个写代码很枯燥…