react性能优化的几个点
- 关于react的虚拟DOM
- 虚拟DOM本质上是一个js对象 ，比较js对象，不耗性能 。但是比较真实的DOM， 特别耗性能。
( jsx –> createElement –> 虚拟DOM(JS对象) –>真实的DOM )
- react的虚拟DOM是同层比对， 如果一层不满足要求，下面的就不再会做比对了。
diff算法的处理方法，就是对操作前后的DOM树同一层的节点进行对比。一层一层对比。只要发现不同，就会删除操作前的dom节点（包括其子节点）
替换为操作后的dom节点。 - 在做虚拟DOM节点循环时，给每一个节点加上key值（起个名字），虚拟DOM的比对根据Key值做关联， 极大提高了虚拟DOM比对的性能 。前提是原始和新的虚拟DOM的key值一致 （这个key值是稳定不变的，就和我们的身份证号码一样），所以避免直接用index作为key值。
- render函数执行的时机
- 首次加载
- 当组件的state或者props发生改变的时候，render函数就会重新执行
- 当父组件的render函数被运行时，他的所有子组件的render函数都将被重新运行
由于react的父组件重新渲染会导致所有子组件重新渲染。这个时候我们是不需要所有子组件都跟着重新渲染的，因此需要在该子组件的生命周期shouldComponentUpdate中做判断，来避免无谓的render函数的运行。
ps: ajax请求获取 ，放在componentDidMount里。setState是异步函数，获取dom放在setState的第二个参数 ，等待页面更新完再获取DOM
- render里面尽量减少新建变量和bind函数
- 函数作用域bind(this)的修改放入constructor函数中 ，这样可以保证整个程序里 ，这个函数的作用域绑定操作只会执行一次 ，而放在render中每次render()的时候都会重新执行一遍函数
- 如果一个组件只有render函数，建议使用无状态组件来定义
- 无状态组件比ui组件性能要高，因为无状态组件只是一个函数。当一个普通组件只有render函数时，我们可以用无状态组件替换掉这个普通组件。普通组件是一个类，这个类生成的对象除了有render函数还有生命周期等。他既要执行render还要执行生命周期函数。