react生命周期钩子函数

下面我从constructor构造函数开始,从参数、作用、用法各方面总结

1、constructor

	constructor参数接受两个参数props,context
	可以获取到父组件传下来的props,context,如果你想在constructor构造函数内部使用props或者context,则需要传入,并传入super对象。如果你只需要在构造函数内使用props或者context,那么只传入一个参数即可。
	ES6的class constructor 和super
	只要组件岑仔constructor,就必须要写super,否则this指向会错误

2、componentWillMount 组件将要挂载

	(1)组件刚经历consturctor,初始完数据
	(2)组件还未进入render,组件还未渲染完成,dom还未渲染
	componentWillMount  一般用的比较少,更多的是用在服务端渲染。
	ajax请求可以写在componentWillMount里,但是不推荐
	原因:虽然有些情况并不会出错,但是如果ajax请求过来的数据是空,那么会影响页面的渲染,可能看到的就是空白。
	不利于服务端渲染,在同构的情况下,生命周期会到componentWillmount,这样使用ajax就会出错

3、componentDidMount 组件渲染完成

	组件第一次渲染完成,此时的dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会二次渲染

4、componentWillReceiveProps(nextProps)

	componentWillReceiveProps在接受父组件改变后的props需要重新渲染组件时用到的比较多
	他接受一个参数 nextProps
	通过对比nextProps和this.props,将nextProps setState为当前组件的state,从而重新渲染组件

5、shouldComponentUpdate(nextProps,nextState)

	唯一用于控制组件重新渲染的生命周期,由于react中,setState以后,state发生变化,组件会进入重新渲染的流程,(暂时这么理解,有时候setState以后并不会重新渲染,比如数组引用不变)在这里return false可以阻止组件的更新
	因为react父组件的重新渲染会导致其所有子组件的重新渲染,这个时候其实我们是不要所有子组件都跟着重新渲染的,因此需要在子组件的该生命周期中做判断
	(对于初学者来说,用这个钩子函数比较少,如果注重性能优化,就会必须用到这个生命周期)

6、componentWillUpdate(nextProps,nextState)

	shouldComponentUpdate返回true以后,组件进入重新渲染的流程,进入componentWillUpdate,这里同样可以拿到nextProps和nextState

7、render函数

	render函数会插入jsx生成的dom结构,react会生成一份虚拟dom树,在每一次组件更新时,在次react会通过其diff算法比较更新前后的新旧dom树,比较以后,找到最小的有差异的dom节点,并重新渲染
	react16中render函数允许返回一个数组,单个字符串等,不在只限制为一个顶级的dom节点,可以减少很多不必要的div(淡然注意升级你的react版本,将现有的项目升到react16并不会出现什么bug,卫衣注意的是proTypes类型检测换了名字)

8、componentDidUpdate(prevProps,prevState)

	组件更新完毕后,react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期,这里可以拿到prevProps和prevState,即更新前的props和state。

9、componentWillUnmount()

	componentWillUnmount也是会经常用到的一个生命周期,初学者可能用到的比较少,但是用好这个很重要
	(a)clear你在组件中所有的setTimeout,setInterval
	(b)移出所有组件中的监听removeEventlistener
发布了44 篇原创文章 · 获赞 24 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_43634982/article/details/84259870