react生命周期函数使用箭头函数,导致mobx-react问题
最近新人加入了项目,遇到了一个很奇怪的问题。mobx observable 属性,onChange的时候就是页面不会刷新。
试来试去,就是不知道什么原因,后来其他同事查到是因为componentWillMount写成了箭头函数,真的是防不胜防啊。
错误代码如下,componentWillMount的箭头函数去掉就妥妥的对的

whyRun函数运行的结果如下,显示的意思是没有在收集依赖的函数中运行
whyRun() can only be used if a derivation is active, or by passing an computed value / reaction explicitly.
If you invoked whyRun from inside a computation;
the computation is currently suspended but re-evaluating because somebody requested its value.
但是为什么呢??那只能看看mobx-react源代码了,下面observer方法的截图,删除了几行,通过mixinLifecycleEvents对react组件的生命周期函数进行了扩展

下面是patch方法的实现,是不是有种切面编程,函数after,before的影子

具体"componentWillMount", "componentDidMount", "componentWillUnmount", "componentDidUpdate"方法进行了哪些扩展,不是今天的重点(我也不是很清楚)。
componentWillMount的扩展比较重要,
主要做了下面几件事
props,state 通过 Atom 对象封装
定义方法initialRender,创建 Reaction对象(当可监听依赖变化的时候,触发组件forceUpdate),跟踪收集 原render函数 里面的依赖
用initialRender覆盖原render函数
当组件componentWillMount函数,使用了箭头函数,就会在组件 constructor 方法中,bind this并直接覆盖方法,使得mobx-react都白干了,
所以whyRun也会提示没有在收集跟踪方法中运行了。
在代码中箭头函数还是不能滥用啊~~
react生命周期函数使用箭头函数,导致mobx-react问题的更多相关文章
- React生命周期函数详解
React生命周期函数 生命周期函数是指在某一个周期自动执行的函数. React中的生命周期执行过程 以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行 ...
- 十二、React 生命周期函数
React生命周期函数: [官方文档]:https://reactjs.org/docs/react-component.html [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...
- 2.React 生命周期函数
什么是生命周期函数:在某一时刻组件会自动调用执行的函数. import React,{ Component,Fragment } from 'react' class Note extends Com ...
- Vue之生命周期函数和钩子函数详解
在学习vue几天后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...
- react生命周期函数
如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组 ...
- react es6语法 之 => 箭头函数
参考:https://www.cnblogs.com/secretAngel/p/9699356.html (1).只有一个参数且只有一句表达式语句的,函数表达式的花括号可以不写let test = ...
- react生命周期函数的应用-----1性能优化 2发ajax请求
知识点1:每次render其实就会将jax的模板生成一个虚拟dom,跟上一个虚拟dom进行比对,通过diff算法找出不同,再更新到真实dom上去. 1性能优化 每次父组件render一次(除了第一次初 ...
- react 生命周期函数介绍
constructor():构造函数 执行:组件加载钱最先调用一次,仅调用一次. 作用:定义状态机变量. 注意:第一个语句必须为super(), 否则会报错:'this' is not allowed ...
- react 生命周期函数的一些心得体会
一.理论 组件本质上是状态机,输入确定,输出一定确定 生命周期的三个阶段,三者时间是不固定的,只是在逻辑上的分类: 二.初始化阶段: getDefaultProps:获取实例的默认属性(即使没有生成实 ...
随机推荐
- Navicat新建查询快捷键
在Navicat中,我们选中一个表,双击打开,这是如果要新建查询这个表的sql语句,可以直接用快捷键 ctrl+q 会自动打开查询窗口,并直接写好 sql:select * from (当前打开的表 ...
- Magic FZU - 2280 无脑HASH暴力
Kim is a magician, he can use n kinds of magic, number from 1 to n. We use string Si to describe mag ...
- [技巧篇]08.Struts2拦截器中获取Servlet API方法
讲课中遇到的解决Session拦截器的后腿问题,还有如何在拦截器中获取Servlet API,这里留一个备注,方便学生查找
- HDU 5961 传递 BFS
题意:中文题,就是判断一个竞赛图拆成两个图,判断是否都传递 思路:分别BFS判深度即可,用这种方法注意要进行读入优化. /** @Date : 2016-11-18-20.00 * @Author : ...
- 查找一个String中存储的多个数据
String类型字符串currVal中, 以“,”分隔单个数据,以“|”分隔每组数据: 代码: var tempuseridstart = String.indexOf( ",", ...
- PowerDesigner16 活动图
活动是某件事情正在进行的状态.活动在状态机中表现为一个由一系列动作组成 的非原子的执行过程. 活动图是一种描述系统行为的图,它用于展现 参与行为的实体所进行的各种活动的顺序关系.活动图(Activit ...
- spring怎么实现单例模式?
Spring学习之路——单例模式和多例模式 在Spring中,bean可以被定义为两种模式:prototype(多例)和singleton(单例) singleton(单例):只有一个共享的实例存 ...
- 常见XSD问题
< xs:elementname="status"> < xs:complexType> < xs:sequence> < xs:elem ...
- 【STSRM10】数学上来先打表
[算法]DP+数学计数 [题意]给出n个点(不同点之间有区别),求出满足下列条件的连边(双向边)方案(对1004535809取模): 1.每条边连接两个不同的点,每两个点之间至多有一条边. 2.不存在 ...
- 多线程---iOS-Apple苹果官方文档翻译
本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址(2013年12月29日更新版) 多线程 技术博客http://www.cnblo ...