在使用react 中经常会遇到各种个样的问题,如果对react不熟悉则会对遇到的问题感到莫名其妙而束手无策,接下来分析一下react中容易遇到的问题和注意点。

1、setState()是异步的
this.setState()会调用render方法,但并不会立即改变state的值,state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋值state并不会出发更新,因为没有调用render函数。

2、组件的生命周期
componentWillMount,componentDidMount 只有在初始化的时候才调用。
componentWillReceivePorps,shouldComponentUpdate,componentWillUpdata,componentDidUpdate 只有组件在更新的时候才被调用,初始化时不调用。

3、reducer必须返回一个新的对象才能出发组件的更新
因为在connect函数中会对新旧两个state进行浅对比,如果state只是值改变但是引用地址没有改变,connect会认为它们相同而不触发更新。

4、无论reducer返回的state是否改变,subscribe中注册的所有回调函数都会被触发。

5、组件命名的首字母必须是大写,这是类命名的规范。

6、组件卸载之前,加在dom元素上的监听事件,和定时器需要手动清除,因为这些并不在react的控制范围内,必须手动清除。

7、按需加载时如果组件是通过export default 暴露出去,那么require.ensure时必须加上default。

require.ensure([], require => {
cb(null, require('../Component/saleRecord').default)
},'saleRecord')

8、react的路由有hashHistory和browserHistory,hashHistory由hash#控制跳转,一般用于正式线上部署,browserHistory就是普通的地址跳转,一般用于开发阶段。

9、标签里用到的,for 要写成htmlFor,因为for已经成了关键字。

10、componentWillUpdate中可以直接改变state的值,而不能用setState。

11、如果使用es6class类继承react的component组件,constructor中必须调用super,因为子类需要用super继承component的this,否则实例化的时候会报错。

总结react中遇到的坑和一些小的知识点的更多相关文章

  1. React中innerHTML的坑

    [React中innerHTML的坑] 通过React Ref机制返回的对象,是一个阉割的DOM对象,并非原始DOM对象.比如,这个阉割版的DOM对象没有innerHTML对象. <button ...

  2. 整理下react中常见的坑

    其实有些也不能算是坑,有些是react的规定,或者是react的模式和平常的js处理的方式不同罢了 1.setState()是异步的this.setState()会调用render方法,但并不会立即改 ...

  3. react 中的return 什么时候用小括号,什么时候用大括号啊

    return( <div>....</div> ) return( <Component/> ) return{...} 1:html 2:react 组件 3:j ...

  4. 关于在React中 报Super expression must either be null or a function, not undefined (采坑系列)

    今天突然在联系React中遇到一开始就报    Super expression must either be null or a function, not undefined 百度,各种方法,.. ...

  5. React中Ref 的使用 React-踩坑记_05

    React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...

  6. 【已解决】React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...

  7. React设置宽度的坑

    [React设置宽度的坑] 我们知道通过ref可以获取DOM元素,通过style属性可以给此DOM元素添加样式. 但下面两行的赋值是无效的: this.HomeRootDiv.style.width= ...

  8. 在react中使用intro.js的的一些经验

    react逐渐热了起来,但是新的东西毕竟前辈的经验少一些,前段时间自己在react中用到intro.js时,得到的资料甚少,摸索后便将一些心得记录下来了~ 1 intro.js的引入,这一点请看上一篇 ...

  9. 总结微信小程序开发中遇到的坑

    总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...

随机推荐

  1. Python_高阶函数、装饰器(decorator)

    一.变量: Python支持多种数据类型,在计算机内部,可以把任何数据都看成一个“对象”,而变量就是在程序中用来指向这些数据对象的,对变量赋值就是把数据和变量给关联起来. 对变量赋值x = y是把变量 ...

  2. zookeeper、consul 实现注册中心

    1.Zookeeper 分布式协调工具,可以实现注册中心 所有实现方式基本一致,只需要先开启zookeeper的服务端,然后再打开客户端jar包即可. Zookeeper一开始连接失败,后面又可以了, ...

  3. splice用法解析

    splice()方法算是最强大的数组方法了,它有很多种用法,主要用于删除指定位置的数组项,在指定的位置插入数组项,在指定位置替换数组项,slpice()方法始终都会返回一个数组,该数组包括从原始数组中 ...

  4. jsonP 现在360浏览器竟然阻止本机 jquery load一些html js什么的

    别的浏览器正常可以jquery.load本机文件,但是360浏览器不行了,缺德啊!! jsonP代码 index3.html <!DOCTYPE HTML PUBLIC "-//W3C ...

  5. 03C#数据类型

    C#数据类型 值类型和引用类型区别 在C#语言中,值类型变量存储的是指定数据类型的数据,值类型变量的值(或实例)存储在栈(Stack)中,赋值语句是传递变量的值.引用类型(例如类就是引用类型)的实例, ...

  6. 07CSS表格

    CSS表格 表格边框 如需在 CSS 中设置表格边框,请使用 border 属性. table, th, td { border: 1px solid blue; } 折叠边框 border-coll ...

  7. 第3节 hive高级用法:13、hive的函数

    4.2.Hive参数配置方式 Hive参数大全: https://cwiki.apache.org/confluence/display/Hive/Configuration+Properties 开 ...

  8. html页面比较长,如何用js实现网页一打开显示在网页的中部?

    加入js代码 <style type="text/css"> body { height: 2000px; } </style> <script ty ...

  9. 转:Centos7安装zabbix3.4超详细步骤解析

    安装前准备: 1.1 安装依赖包: yum -y install wget net-snmp-devel OpenIPMI-devel httpd openssl-devel java lrzsz f ...

  10. JavaScript之作用域和闭包

    一.作用域 作用域共有两种主要的工作模型:第一种是最为普遍的,被大多数编程语言所采用的词法作用域,另外一种叫作动态作用域: JavaScript所采用的作用域模式是词法作用域. 1.词法作用域 词法作 ...