react性能优化的几个点

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值。

2. 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
  })
}

3. render里面尽量减少新建变量和bind函数

• 函数作用域bind(this)的修改放入constructor函数中 ，这样可以保证整个程序里 ，这个函数的作用域绑定操作只会执行一次 ，而放在render中每次render()的时候都会重新执行一遍函数