react生命周期函数的应用-----1性能优化 2发ajax请求

知识点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中,这个函数只在组件挂载后执行,且在生命周期中只执行一次。

 

 

 

 

posted @ 2019-12-17 10:50  盛俊勇  阅读(289)  评论(0)    收藏  举报