使用react容易犯错的点

总结react中遇到的坑和一些小的知识点。

  • reducer必须返回一个新的对象才能触发组件的更新,因为在connect()中会对新旧两个state进行浅对比,如果state只是值改变但是引用地址没有改变,connect会认为它们相同而不触发更新。无论reducer返回的state是否改变,subscribe中注册的所有回调函数都会被触发。
  • setState操作是异步的,不会立即被执行,在极短时间内连续调用三次setState,并不会进行三次DOM渲染,而会合并成一次渲染,setState提供了第二个参数,是回调函数,当setState被异步的执行好之后,会运行回调函数。
  • 组件命名的首字母必须是大写,这是类命名的规范。
  • 组件卸载之前,加在dom元素上的监听事件,和定时器需要手动清除,因为这些并不在react的控制范围内,必须手动清除。
  • componentWillUpdate中可以直接改变state的值,而不能用setState
  • 组件内只能通过setState触发render,像this.state.xxx=xxx是不能触发render的,并且直接对props进行赋值也是不被允许的。组件props改变是指从父组件那里拿到的属性改变了。
  • 如果使用es6中的class继承react的component组件,constructor中必须调用super,因为子类需要用super继承component的this,否则实例化的时候会报错。
  • 父组件的render函数被运行时,它的子组件的render都将被重新运行,如果子组件的内容并没有发生改变,这会带来性能上的损耗。可以在子组件中写shouldComponentUpdate中的return false,强制子组件不更新,这样可以避免组件做没必要的render操作,也可以省去diff比较,提高react的性能。
  • ajax请求,render函数会反复的执行,不适合放ajax,要放在


  • react16版本之后提供的Fragment占位符,它不会被渲染成任何元素


  • 纯函数指的是,给定固定的输入,就一定会有固定的输出,而且不会有任何副作用。



    受到new Date()的影响,这不是纯函数。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容