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

react 开发过程中的总结/归纳相关推荐

  1. 嵌入式系统开发过程中遇到的——volatile

    嵌入式 系统开发过程中遇到的-- volatile 对于不同的计算机体系结构,设备可能是端口映射,也可能是内存映射的 .如果系统结构支持独立的 I/O 地址空间,并且是端口映射,就必须使用汇编语言完成 ...

  2. 移动应用开发过程中的迭代式原型设计

    \ 主要结论 \ 移动应用原型创建过程中采用迭代式快速开发方法的重要性. \ 可以从对手身上学到什么,如何从他们的失误中获益. \ 如何为你的应用定义USP,如何通过故事板(Storyboarding ...

  3. 如何在React框架中使用ECharts图库表制图?

    在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何 ...

  4. 浅谈Taro和Apollo在开发过程中的实践

    一.什么是Taro Taro是凹凸实验室研发的一套遵循React语法规范的多端开发的解决方案.使用Taro,可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度 ...

  5. ReactJS 开发过程中的一些使用心得

    ReactJS作为目前最火的构建用户界面的前端框架,为什么有那么多的前端工程师去追逐它,不仅因为它简单,而且它提供了一系列强大的API让我们摆脱以前繁琐的DOM操作,使我们的逻辑更加清晰,代码更加简单 ...

  6. react本地储存_如何在React项目中利用本地存储

    react本地储存 以及为什么要这么做. 本地存储是现代Web浏览器固有的Web API. 它允许网站/应用程序在浏览器中存储数据(简单和有限),从而使数据在以后的浏览器会话中可用. 在开始学习本教程 ...

  7. net开发过程中,错误集锦

    2007年 6月 移动项目: 1:vs2005上安装vss2005后,不能够显示源代码管理 (http://www.cnblogs.com/SGSoft/archive/2007/06/12/7803 ...

  8. .net开发过程中,错误集锦

    2007年7月10日 开发过程中,错误集锦. 写这个东东的目的,主要是上班那不能够上网,回家后总结出来弄到日志本里面的.顺便鄙视下移动,对厂家这么刻薄,不能上网,不能带水进去喝,最气人的是,进出大楼, ...

  9. 汽车安全及计算机辅助工程,汽车平台架构开发过程中安全性能的设计和仿真

    摘要:为实现汽车平台化开发策略,在平台内不同车型间最大程度共用底盘.下部车身.动力总成.电器架构和内饰骨架等部件,探索碰撞安全平台化设计的思路和方法.在对国内外安全法规和标准发展趋势分析的基础上,制定 ...

最新文章

  1. 为 protocol 中属性添加默认值
  2. Linux捕捉信号机制之(signal,kill)、(sigaction,sigqueue)
  3. Sql Server 关于整表插入另一个表部分列的语法以及select 语句直接插入临时表的语法...
  4. [Swift]快速反向平方根 | Fast inverse square root
  5. 日出时的画面_如何拍摄日出日落,老摄影家近30年创作经验分享
  6. 谷歌浏览器外贸版_做外贸没有单怎么办?找客户 供应商的小技巧-跨境电商
  7. Java字符串流学习
  8. php curl keep alive,php curl 保持长连接
  9. 【C++】用sort函数产生的段错误问题
  10. 详解网易有道AI战略,智能硬件、教育、办公三大解决方案
  11. 基于Python的人脸识别(68个识别点)和焦点人物检测
  12. 什么是进程,进程与程序的主要区别是什么?
  13. 个人隐私保护条例_史上最严的个人数据保护条例来了!看完你就明白GDPR是什么了...
  14. CC2530 CC2530F256RHAR 一款ZigBee SOC芯片
  15. matlab获取图像某点RGB值、灰度值的方法
  16. 福州古刹梅林尽染 林阳赏梅成闽都新俗
  17. SaltStack安装踩坑之路
  18. 【问题记录】tp5文件上传$_FILES有值request中file却为空
  19. 阿里旺旺发送文件以保存服务器,使用阿里旺旺收发文件
  20. 介绍一款免费的会员管理系统

热门文章

  1. As与强制类型转换的区别以及Is运算符的使用
  2. 型人格 disc测试_3号,成就型人格的专业和职业选择@九型人格测试
  3. python 特征选择卡方_特征选择
  4. 蠕虫mysql_警惕!MySQL蠕虫再度对Windows发动攻击
  5. 计算机网络实验可变长子网掩码,计算机网络实验3-子网掩码与划分子网实验报告.docx...
  6. python wait_window_pywinauto客户端自动化---窗口等待方法
  7. android5多窗口,教程 开启 Nexus5 Android M 的多窗口模式。
  8. java反射最佳实践,java反射性能测试分析
  9. 核爆rpg手机版_好嗨游戏:不玩吃亏 ,20款全世界最佳移动RPG角色扮演游戏(上)...
  10. Grasp2Vec:通过自我监督式抓取学习物体表征