在使用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. swal用法

    swal({   title: "确认删除?",   text: "Your will not be able to recover this imaginary fil ...

  2. 解决android的键盘弹出时,html页面的高度被压缩

    如果元素的高度是用100%表示,那么,安卓的键盘弹出时,高度会发生变化,导致布局混乱,所以最好给高度设置像素高度 $("html,body").height(window.inne ...

  3. 最小生成树Prim算法 Kruskal算法

    Prim算法(贪心策略)N^2 选定图中任意定点v0,从v0开始生成最小生成树 树中节点Va,树外节点Vb 最开始选一个点为Va,其余Vb, 之后不断加Vb到Va最短距离的点 1.初始化d[v0]=0 ...

  4. 给SVN控制的项目添加忽略文件/文件夹

    忽略目录其实有些像建立一个文件夹,但却不放入版本控制.如果不加入版本控制又会在svn status命令中显示出来,很不方便,所以可以设置本文件夹属性,让它既加入版本控制,又忽略其变化 未加入控制的文件 ...

  5. EZOJ 宝石迷阵 建图+网络流匹配

    题面: 封印恶魔的地方可以看作是一个 n*m 的矩形,包含了 n*m 个祭坛,并且其 中有一些祭坛已经损坏了. 如果 i+j 为偶数,那么第 i 行第 j 列的祭坛只要没有损坏,就一定会封印有一个恶魔 ...

  6. Java核心技术卷1 第三章

    1. Java区分大小写,下一段源代码中,关键字public称为访问修饰符,用于控制程序的其他部分对于这段代码的访问级别,关键字class表明Java程序中的全部内容都包含在类里面. 标准的类名命名规 ...

  7. 每日命令:(13)more

    more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...

  8. phpstorm破解激活码

    一.将“0.0.0.0 account.jetbrains.com”添加到hosts文件中 二.浏览器打开 http://idea.lanyus.com,点击页面中的“获得注册码”,然后在注册时切换至 ...

  9. Centos下PHP7.1打开Oracle扩展

    背景 最近因为项目研究了一下PHP集成Oracle,虽然这个组合很奇葩,但万一用到请勿采坑~ 环境 CentOS Linux release 7.3.1611 (Core) PHP7.1.1 安装or ...

  10. PHP:POST OR GET 请求

    文章来源:http://www.cnblogs.com/hello-tl/p/7685216.html /** * 模拟提交参数,支持https提交 可用于各类api请求 * @param strin ...