React生命周期总结

生命周期可能会经历如下三个过程:
装载过程:把组件第一次在DOM树中渲染的过程
更新过程:当组件被重新渲染的过程
卸载过程:组件从DOM中删除的过程

装载过程:
当组件第一次被渲染的时候,依次调用的函数如下:
constructor
一个React组件需要构造函数,往往是为了如下目的:
初始化state
绑定成员函数的this环境

getIniteState
初始化组件的this.state 只有用React.createClass方法创造出来的组件才会发生作用,es6语法中无此方法

getDefaultProps
初始化组件的this.state 只有用React.createClass方法创造出来的组件才会发生作用,es6语法中无此方法

componentWillMount
既可以在服务器端被调用,也可以在浏览器端被调用

render
一个React组件可以忽略其他所有函数都不实现,但是一定要实现render函数,因为React组件的父类React.Component类对除了render之外的其它生命周期函数都有默认实现
render函数不做实际的渲染动作,它只是返回一个jsx结构的描述,最终由React来操作渲染过程
不需要渲染任何DOM元素的时候,可以让render函数返回一个null 或者 是false
render函数是一个纯函数,完全根据this.state和this.props来决定返回的结果,不要产生任何的副作用

componentDidMount
只能在浏览器端被调用,在服务器端被调用的时候,不会执行
因为“装载”是一个创建组件并放到DOM树上的过程,服务器端是无法产生DOM树的,只是一段字符串而已。所以无法再服务器端执行
此阶段,组件已经被装载在DOM树上了,可以放心获取渲染出来的任何DOM

更新过程:
当props或者state被修改的时候,就会触发组件的更新过程
componentWillReceiveProps(nextProps)
只要父组件的render函数被调用,在render函数里被渲染的子组件,都会经历更新的过程,不管父组件传给子组件的props有没有改变,都会触发componentWillReciveProps
注意 this.setState触发的更新,是不会调用这个方法的。这个方法是根据nextProps计算是否更新内部状态的state,如果this.setState的调用 触发了componentWillReciveProps,则会导致死循环
nextProps代表这一次渲染传入的props,this.props代表上一次渲染的props,两者有变化的时候,才会调用this.setState来更新组件内部的state

shouldComponentUpdate(nextProps,nextState)
决定了一个组件什么时候不需要渲染
使用恰当 可以提升性能
如果返回true,则会调用componentWillUpdate,render,componentDidUpdate,否则不会有后续的方法调用

componentWillUpdate
render
componentDidUpdate
无论更新过程发生在浏览器端还是服务器端,此函数都会被执行
实际上,在React做服务器端渲染的时候,基本上不会经历更新过程,因为服务端渲染,只需要产出HTML的字符串就好了,而装载过程就可以达到此目的,所以正常情况下,服务器端是不会调用compentDidUpdate方法,如果调用了,说明程序出错了,需要改进。

卸载过程:
componentWillUnMount:
当React组件要从DOM树上清掉之前调用,这个函数适合做一些请理性的工作
往往和componentDidMount有关,如果componentDidMount中,通过非React方法,创建了一些DOM元素,如果不删除的话,可能导致内存溢出,所以需要在componentWillUnMount中把这些DOM元素清理掉

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值