React中生命周期的讲解(react生命周期执行顺序)

什么是生命周期？ 从出生到成长，最后到死亡，这个过程的时间可以理解为生命周期。 React中的组件也是这么一个过程。 React的生命周期分为三个阶段：挂载期（也叫实例化期）、更新期（也叫存在期）、卸载期（也叫销毁期）。 在每个周期中React都提供了一些钩子函数。 生命周期的描述如下： 挂载期：一 ... 什么是生命周期？从出生到成长，最后到死亡，这个过程的时间可以理解为生命周期。React中的组件也是这么一个过程。React的生命周期分为三个阶段：挂载期（也叫实例化期）、更新期（也叫存在期）、卸载期（也叫销毁期）。在每个周期中React都提供了一些钩子函数。生命周期的描述如下：挂载期：一个组件实例初次北创建的过程。更新期：组件在创建后再次渲染的过程。卸载期：组件在使用完后被销毁的过程。创建阶段（挂载阶段）创建阶段（挂载阶段）1==> constructor(){}<!-- 触发时机:创建组件，作用：初始化state中的数据， 可以为事件绑定this -->2==>render(){}<!-- 触发时机：每次组件渲染(初次渲染组件和更新组件)都会被触发，；作用是渲染UI; 注意不能够调用 setState为什么不能够在 render中使用 setState；因为setState会更新数据，这样会导致递归渲染数据。-->3==>componentDidMount(){}<!-- DOM已经渲染完成了；可以进行DOM操作和网络请求如果你在 constructor 和 render中获取DOM节点，得到的结果是null; -->

推荐整理分享React中生命周期的讲解(react生命周期执行顺序)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:react生命周期shouldcomponentupdate,react生命周期有哪些,react生命周期图解,react生命周期钩子函数,react生命周期有哪些,react生命周期三个阶段,react生命周期函数,react生命周期执行顺序,内容如对您有帮助，希望把文章链接给更多的朋友！

更新阶段更新阶段有三种情况会导致组件的更新-触发render函数；1. 组件接收到一个新的属性，会进行渲染。-触发render函数2. 调用setState()组件会跟新。-触发render函数3. 调用forceUpdate()方法会跟新组件。-触发render函数上面这三种方法会触发render(){}函数更新阶段先触发1==> render函数 2==> 然后就是componentDidUpdate[当组件中的数据跟新完成后会触发]

第一种[组件接收到一个新的属性]-触发render函数下面这个例子是，我们给组件赋值了props；组件触发了render函数这个生命周期父组件import React from 'react';import ReactDOM from 'react-dom'; import ClassCom from "./components/ClassCom"class Father extends React.Component{ state = { num:1 } addHandler = () => { this.setState({ num:10 }) } render() { return ( <div> <button onClick={this.addHandler}>大豆豆</button> <ClassCom showNum={this.state.num}></ClassCom> </div> ) }}ReactDOM.render( <Father></Father>, document.getElementById('root'))子组件import React from "react";class ClassCom extends React.Component{ constructor(props) { super(props) console.warn('子组件-