最近新人加入了项目,遇到了一个很奇怪的问题。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问题的更多相关文章

  1. React生命周期函数详解

    React生命周期函数 生命周期函数是指在某一个周期自动执行的函数. React中的生命周期执行过程 以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行 ...

  2. 十二、React 生命周期函数

    React生命周期函数: [官方文档]:https://reactjs.org/docs/react-component.html [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...

  3. 2.React 生命周期函数

    什么是生命周期函数:在某一时刻组件会自动调用执行的函数. import React,{ Component,Fragment } from 'react' class Note extends Com ...

  4. Vue之生命周期函数和钩子函数详解

    在学习vue几天后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...

  5. react生命周期函数

      如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组 ...

  6. react es6语法 之 => 箭头函数

    参考:https://www.cnblogs.com/secretAngel/p/9699356.html (1).只有一个参数且只有一句表达式语句的,函数表达式的花括号可以不写let test = ...

  7. react生命周期函数的应用-----1性能优化 2发ajax请求

    知识点1:每次render其实就会将jax的模板生成一个虚拟dom,跟上一个虚拟dom进行比对,通过diff算法找出不同,再更新到真实dom上去. 1性能优化 每次父组件render一次(除了第一次初 ...

  8. react 生命周期函数介绍

    constructor():构造函数 执行:组件加载钱最先调用一次,仅调用一次. 作用:定义状态机变量. 注意:第一个语句必须为super(), 否则会报错:'this' is not allowed ...

  9. react 生命周期函数的一些心得体会

    一.理论 组件本质上是状态机,输入确定,输出一定确定 生命周期的三个阶段,三者时间是不固定的,只是在逻辑上的分类: 二.初始化阶段: getDefaultProps:获取实例的默认属性(即使没有生成实 ...

随机推荐

  1. python多进程之Process

    由于fork创建进程不能在windows系统上使用,所以产生了multiprocessing.Process Process可以直接实例化然后用start调用,需要指定新的进程执行的函数,用元组的方式 ...

  2. Update SSM agent to each EC2 via Bat and bash script

    1. copy the instance id from aws console to file 2. remove the , from file sed -i 's/,//g' file 3. g ...

  3. 用Apache Spark和TensorFlow进行的深度学习

    原文:https://databricks.com/blog/2016/01/25/deep-learning-with-apache-spark-and-tensorflow.html by Tim ...

  4. javascript实现购物车思路

    /* 思路: 第一步:获取所要操作的节点对象 第二步:当页面加载完后,需要计算本地cookie存了多少[个]商品,把个数赋值给count 第三步:为每一个商品对应的添加购物车按钮绑定一个点击事件onc ...

  5. 通过eclipse mybatis generater代码生成插件自动生成代码

    Mybatis属于半自动ORM,在使用这个框架中,工作量最大的就是书写Mapping的映射文件,由于手动书写很容易出错,我们可以利用Mybatis-Generator来帮我们自动生成文件.通过在Ecl ...

  6. vijos 1464 积木游戏 DP

    描述 积木游戏 SERCOI 最近设计了一种积木游戏.每个游戏者有N块编号依次为1 ,2,…,N的长方体积木.对于每块积木,它的三条不同的边分别称为"a边"."b边&qu ...

  7. 2015/9/19 Python基础(15):变量作用域及生成器

    变量作用域标识符的作用域是定义为其声明的可应用范围,或者即是我们所说的变量可见性.也就是,我们可以在程序的那个部分去访问一个制定的标识符.全局变量与局部变量定义在函数内的变量有局部作用域,在一个模块中 ...

  8. WPF 添加Adminstrator 权限

    在WPF应用开发中,需要WPF操作后台注册的Windows Service,可是WIX打包的安装程序不具备赋予WPF App默认管理员权限. 因此,需要我们手工在WPF项目中添加管理员权限: 1.右击 ...

  9. 【hdu3033】分组背包(每组最少选一个)

    [题意] 有S款运动鞋,一个n件,总钱数为m,求不超过总钱数且每款鞋子至少买一双的情况下,使价值最大.如果有一款买不到,就输出“Impossible". 1<=N<=100  1 ...

  10. 【BZOJ】1500: [NOI2005]维修数列

    [算法]splay [题解]数据结构 感谢Occult的模板>_<:HYSBZ 1500 维修数列 #include<cstdio> #include<cctype> ...