React生命周期函数的使用场景

所有的生命周期函数都可以不存在,但是render这个生命周期函数必须要有。我们的组件是从react的Component类继承,React的Component类里面默认内置了其它所有的生命周期函数,唯独没有内置render的默认实现,所以对于我们自己定义的组件render函数是一定要存在的。
在这里插入图片描述
对于一个组件,当这个组件的父组件的render函数被重新执行时,父组件里的子组件的render函数也会重新执行,但是当子组件从父组件接收的数据没有被改变但依然反复的被重新渲染就会造成性能上的损耗,因为子组件的数据没有改变就不需要重新渲染,这种机制会导致子组件做一些无谓的渲染。此时就可以在子组件里用shouldComponentUpdate生命周期函数来询问我是否需要更新
在这里插入图片描述
当一个组件要被更新的时候,nextProps是接下来props会变成什么样,nextState是接下来state会变成什么样。这样通过shouldComponentUpdate生命周期函数来判断组件是否要更新来减少不必要的更新来提高性能。
当从后台获取ajax数据时,我们会把ajax请求数据放在componentDidMount生命周期函数里。这个生命周期函数只会执行一次,在组件被挂载到页面时执行一次,之后就不会重新重复地执行了。
把ajax请求数据放在componentWillMount命周期函数也是没问题的,但是当我们去写react native或者用react做服务器端的同构以及更深的技术时可能会和以后更高端的技术产生冲突。为了以后避免冲突,就约定把ajax请求放在componentDidMount生命周期函数里。放在constructor构造函数里也OK,constructor也是只执行一次的函数,在组件被初始化的时候执行。但是还是按大家约定俗成的来做比较好。
放在render函数里会造成死循环,render函数会反复执行,比如在input里面输入内容,就要再次ajax请求,本来只需要获取一次的请求就会获取很多次,这是不合理的。
总结:
用生命周期函数做性能上的优化,用axios这个框架向后台发送请求。

猜你喜欢

转载自blog.csdn.net/u013565133/article/details/88716396