知识点1:每次render其实就会将jax的模板生成一个虚拟dom,跟上一个虚拟dom进行比对,通过diff算法找出不同,再更新到真实dom上去。
1性能优化
每次父组件render一次(除了第一次初始化),子组件同样进入更新过程,但是若父组件给子组件传递的属性值没有变化,那么子组件render函数执行便没有意义,更消耗性能。我们可以通过周期函数
shouldCOmponentUpdate来避免重新render导致虚拟dom比对。
// 判断只有跟该组件相关数据变化时候,才让组件进入更新过程
shouldComponentUpdate(nextProps,nextState){
// 判断子组件传递过来的属性值和当前属性值是否相同
if(nextProps.content !== this.props.content){
return true;
}else {
return false;
}
}
react考虑到,每个组件都要自定义shouldComponentUpdate麻烦,就内置了PureComponet,原理还是通过shouldComponentUpdate,当组件的相关数据变化时,才让组件进入更新过程。
但是注意用PureComponent一定要配合immutable管理数据,否则会遇到一些坑,这点偏底层,就不详细说了。只要记住PureCompont是和immutable搭配使用就好。
如果没有用immutable,就自己定义shouldComponentUpdate就好
import React,{PureComponent} from 'react'
class Home extends PureComponent {}
2.发送ajax请求
请求服务器ajax操作,放在render函数中,会导致反复请求数据,所以在componentDidMount中,这个函数只在组件挂载后执行,且在生命周期中只执行一次。