记录下学习历程2

最新生命周期(React-16)

1、Mounting(加载阶段)

2、Updating(更新阶段)

3、Unmounting(卸载阶段)

Mounting加载阶段(涉及6个钩子函数)

constructor()

加载的时候调用一次,可以初始化state;

getDefaultProps()

设置默认的props,也可以用defaultProps设置组件的默认属性。

getInitialState()

初始化state,可以直接在constructor中定义this.state

componentWillMount()

组件加载时只调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state

render()

react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树

componentDidMount

组件渲染之后调用,只调用一次

Updating(更新阶段:涉及5个钩子函数)

componentWillReceiveProps(nextProps)

组件加载时不调用,接收传入新的props

shouldComponentUpdate(nextProps, nextState)

组件接收到新的props或者state时调用,return true就会更新dom(使用diff算法更新),return false能阻止更新(不调用render)

componentWillUpdata(nextProps, nextState)

组件加载时不调用,只有在组件将要更新时才调用,此时可以修改state

render()

创建虚拟dom,进行diff算法

componentDidUpdate()

组件加载时不调用,组件更新完成后调用。

Unmounting(卸载阶段:涉及1个钩子函数)

componentWillUnmount()

组件渲染之后调用,只调用一次

新的生命周期

Mounting(加载阶段:涉及4个钩子函数)

constructor()

加载的时候调用一次,初始化state调用

static getDerivedStateFromProps(props,state)

组件每次被render的时候,包括在组件构建之后(虚拟dom之后,实际dom挂载之前),每次获取新的props或state之后,每次接收新的props之后都会返回一个对象作为新的state,返回null说明不需要更新state;配合componentDidUpdate,可以覆盖componentWillReceiveProps的所有用法。

render()

react最重要的一步,创建虚拟dom,进行diff算法,更新dom树都在此进行。

componentDidMount()

组件渲染之后调用,只调用一次

猜你喜欢

转载自www.cnblogs.com/jiadaxiadedaimashenghuo/p/12421706.html
今日推荐