react 生命周期方法

constructor(构造函数) 只有在组件实例化并插入到dom中时才会被调用 组件实例化到过程称作组件到挂载(mount)

render()方法也会在组件挂载到过程中被调用,同时当组件更新到时候也会被调用,每当组件当状态(state)或者属性(props)改变时,组件当render()方法都会被调用

在组件挂载当过程中还有另外两个生命周期方法:componentWillMount() 和 componentDidMount()
构造函数(constructor) 最先执行、 componentWillMount()会在render()方法之前执行、 componentDidMount()会在render()方法之后执行

react 挂载过程中有四个生命周期方法,它们当调用顺序是:
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount()

react 当组件状态或者属性改变时 ,一共有五个生命周期方法用于组件更新,调用顺序如下:
1.componentWillReceiveProps()
2.shouldComponentUpdate()
3.componentWillUpdate()
4.render()
5.componentDidUpdate()

react 当组件卸载时 ,有一个生命周期方法
1.componentWillUnmount()

各个生命周期方法当使用场景:
constructor(props) — 它在组件初始化时被调用, 在这个方法中,你可以设置初始化状态及绑定方法。
componentWillMount() — 它在render()方法之前被调用,这就是为什么它可以用作去设置组件内部当状态,因为它不会触发组件当再次渲染,但一般来说还是推荐在constructor()中去初始化状态。
render() — 这个生命周期方法时必须有的,它返回作为组件输出的元素,这个方法应该时一个纯函数,因此不应该在这个方法中修改组件的状态。它把属性和状态作为输入并且返回(需要渲染的)元素。
componentDidMount() — 它仅在组件挂载后执行一次,这是发起异步请求去api获取数据的绝佳时期,获取到的数据将被保存在内部组件的状态中然后在render()生命周期方法中展示出来。
componentWillReceiveProps(nextProps) — 这个方法在一个更新生命周(update lifecycle) 中被调用。新的属性会作为它的输入,因此你可以利用 this.props 来对比之后的属性和之前的属性,基于对比的结果去实现不同的行为。此外,你可以基于新的属性来设置组件的状态。
shouldComponentUpdate(nextProps,nextState) — 每次组件因为状态或者属性更改而更新时,它都会被调用。你将在成熟的react应用中使用它来进行性能优化。在一个更新生命周期中,组件及其子组件将根据该方法返回的布尔值来决定是否重新渲染。这样你可以阻止组件的渲染生命周期(render lifecycle)方法,避免不必要的渲染。
componentDidUpdate(prevProps,prevState) — 这个方法在render()之后立即调用,你可以用它当成操作dom或者执行更多异步请求的机会。
componentWillUnmount() — 它会在组件销毁之前被调用,你可以利用这个生命周期方法去执行任何清理任务。

猜你喜欢

转载自blog.csdn.net/qq_29429865/article/details/81780158