app.component.ts import { Component } from '@angular/core'; @Component({selector: 'a"> react 开发过程中的总结/归纳 - 11GX
首页 > react 开发过程中的总结/归纳

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 属性,例如:

  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

更多相关:

  • addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理...

  • 有时候当我们单纯的看 Laravel 手册的时候会有一些疑惑,比如说系统服务下的授权和事件,这些功能服务的应用场景是什么,其实如果没有经历过一定的开发经验有这些疑惑是很正常的事情,但是当我们在工作中多加思考会发现有时候这些服务其实我们一直都见过。下面就事件、事件监听举一个很简单的例子你就会发现。 ​ 这个例子是关于文章的浏览数的实现,...

  • 1. preventDefault:    比如百度,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的默认行为;preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情;...

  • Vue组件使用v-on绑定自定义事件:   可以分为3步理解:     1.在组件模板中按照正常事件机制绑定事件:       template: '',       如上,v-on:click就是用来给子组件绑定点击事件的,这就...

  • 协议36.508 4.5节 有个表格写的很清楚: Table 4.5.2.3-1: UE registration procedure (state 1 to state 2)...

  • 最近的诸多面试经历确实让自己发现内功还不够,还需要持续的学习精进。 实现如下: class RWLock{private:int state;mutex mu;condition_variable cond;public:RWLock():state(0){}void rlock(){mu.lock();while(state <...

  • 使用栈实现四则运算,支持+,-,*,/,(,) 输入为字符串,输出为计算好的数值,如不符合四则运算的规定,则异常退出 这个实现借用了栈以及字符处理状态机的思想: 维护两个栈:一个用于数值,另一个用于存放计算符号字符状态机用于遍历输入的字符串过程中进行对应数值处理和计算符号处理的状态转换 在第一个思想中:符号栈中存在优先级,即*和...

  • kuapingUI 2.2 版本发布,增加了一个比较实用的工具栏web组件,是由分享按钮组 + 联系按钮组构成,分享按钮组包含了 QQ空间、朋友圈、QQ、微信、微博等分享;联系按钮组包含了 微信、QQ、旺旺、Skype、电话等快捷沟通方式。演示地址 跨屏UI框架-响应式前端框架_基于Bootstrap的大组件UI框架​ui.kuapi...

  • 本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。#Vue 实现组件信息的缓存当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-a...

  • 2020年Vue面试题Interview●●●●作者:@烦恼会解决烦恼vue核心知识——理论篇1、对于Vue是一套渐进式框架的理解渐进式代表的含义是:主张最少。Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开...

  • app.component.html

    父组件字号:{{fontSizePx}}px

    app.component.ts ...fontSizePx=12...

  • app.component.html  app.component.ts import { Component } from '@angular/core'; @Component({selector: 'a...