美文网首页React.js学习
react性能优化的几个点

react性能优化的几个点

作者: 团猫咪爱吃玉米 | 来源:发表于2018-11-02 17:36 被阅读4次
  1. 关于react的虚拟DOM
  • 虚拟DOM本质上是一个js对象 ,比较js对象,不耗性能 。但是比较真实的DOM, 特别耗性能。
    ( jsx --> createElement --> 虚拟DOM(JS对象) -->真实的DOM )


    微信图片_20181102170755.png
  • react的虚拟DOM是同层比对, 如果一层不满足要求,下面的就不再会做比对了。

diff算法的处理方法,就是对操作前后的DOM树同一层的节点进行对比。一层一层对比。只要发现不同,就会删除操作前的dom节点(包括其子节点)
替换为操作后的dom节点。

  • 在做虚拟DOM节点循环时,给每一个节点加上key值(起个名字),虚拟DOM的比对根据Key值做关联, 极大提高了虚拟DOM比对的性能 。前提是原始和新的虚拟DOM的key值一致 (这个key值是稳定不变的,就和我们的身份证号码一样),所以避免直接用index作为key值。
  1. render函数执行的时机
  • 首次加载
  • 当组件的state或者props发生改变的时候,render函数就会重新执行
  • 当父组件的render函数被运行时,他的所有子组件的render函数都将被重新运行
    由于react的父组件重新渲染会导致所有子组件重新渲染。这个时候我们是不需要所有子组件都跟着重新渲染的,因此需要在该子组件的生命周期shouldComponentUpdate中做判断,来避免无谓的render函数的运行。
    微信图片_20181102172755.png
    ps: 关于其他生命周期函数的用法
    • ajax请求获取 ,放在componentDidMount里。
    • setState是异步函数,获取dom放在setState的第二个参数 ,等待页面更新完再获取DOM。
    • componentWillUnmount和vue的beforeDestroy很像,经常用来clear你在组件中所有的setTimeout,setInterval以及移除所有组件中的事件监听removeEventListener
    • componentWillReceiveProps这个钩子函数执行的时机是:父组件的render函数被重新执行了。
componentWillReceiveProps (nextProps) {
    nextProps.content !== this.props.content && this.setState({
        content :nextProps.content 
    },() => {
      console.log(this.state.content) //将state更新为nextProps
  })
}
  1. render里面尽量减少新建变量和bind函数
  • 函数作用域bind(this)的修改放入constructor函数中 ,这样可以保证整个程序里 ,这个函数的作用域绑定操作只会执行一次 ,而放在render中每次render()的时候都会重新执行一遍函数

相关文章

  • 【React.js 20】React性能优化

    React性能优化 React性能优化主要分三块: React 组件性能优化 属性传递优化针对单组件性能优化,很多...

  • 深入浅出React和Redux学习笔记(五)

    React组建的性能优化 性能优化的方法: 单个React组件的性能优化; 多个React组件的性能优化; 利用r...

  • react性能优化的几个点

    关于react的虚拟DOM 虚拟DOM本质上是一个js对象 ,比较js对象,不耗性能 。但是比较真实的DOM, 特...

  • 05|React组件的性能优化

    本文主要是针对性能优化做介绍,对应的React本身性能就比较不错!要介绍的点如下: 单个React组件的性能优化 ...

  • Redux源码剖析

    前面写了《React组件性能优化》《Redux性能优化》《React-Redux性能优化》,但是都没有从这些框架的...

  • react性能优化

    React 性能优化 React 性能优化 | 包括原理、技巧、Demo、工具使用[https://juejin....

  • React-Redux性能优化

    前面写了两篇文章《React组件性能优化》《Redux性能优化》,分别针对React和Redux在使用上的性能优化...

  • React开发实践7--首页优化的过程

    写在前面 需要说明一点是,关于比较常规的React性能优化,可以看这篇文章:React 16 加载性能优化指南,我...

  • React 组件性能优化

    React 组件性能优化最佳实践 React 组件性能优化的核心是减少渲染真实 DOM 节点的频率,减少 Virt...

  • React 性能优化

    React 性能优化 简单的 todo-list-demo 讲 React 性能优化不能光靠嘴说,得有一个 dem...

网友评论

    本文标题:react性能优化的几个点

    本文链接:https://www.haomeiwen.com/subject/nnpcxqtx.html