react生命周期

---

title: react生命周期
abbrlink: 24037
date: 2021-07-12 20:05:18
tags:

React生命周期

   来啦来啦,今天在学习react的生命周期，那我就来总结一下吧！！

首先我们先了解一下旧版本的生命周期

旧

初始化阶段:

由ReactDOM.render()触发—初次渲染

• constructor()
• componentlWillMount()
• render()
• componentDidMount( ) =====>常用
  在这个钩子中做一些初始化的事，例如:开启定时器、发送网络请求、订阅消息

更新阶段:

由组件内部this.setState()或父组件render触发

• shouldComponentUpdate()
• componentWillUpdate()
• render() =====>必须使用的一个
• componentDidUpdate()

卸载组件:

由ReactDOM. unmountComponentAtNode()触发

• componentWillUnmount()=====>常用
  在这个钩子中做一些收尾的事，例如:关闭定时器、取消订阅消息

新

初始化阶段:

由ReactDOM.render()触发—初次渲染

• constructor()
• getDeriledstateFromProps
• render()
• componentDidMount()

更新阶段:

由组件内部this.setState()或父组件重新render触发

• getDerivedStateFromProps
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate
• componentDidUpdate()

卸载组件:

由ReactDOM.unmountComponentAtNode()触发

• componentWillUnmount()

重要的钩子

• render() 初始化渲染或更新渲染调用
• componentDidMount() 开启监听，发送ajax请求
• componentWillUnmount() 做一些收尾工作 如：清理定时器

即将废弃的钩子

• componentWillMounte
• componentWillReceivePropse
• componentWillUpdate
  现在使用以上三个会出现警告，下一个大版本需要机上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

以上就是我对react生命周期的一些总结。