位置: IT常识 - 正文

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

编辑：rootadmin

什么是生命周期？从出生到成长，最后到死亡，这个过程的时间可以理解为生命周期。 React中的组件也是这么一个过程。 React的生命周期分为三个阶段：挂载期（也叫实例化期）、更新期（也叫存在期）、卸载期（也叫销毁期）。在每个周期中React都提供了一些钩子函数。生命周期的描述如下：挂载期：一 ... 什么是生命周期？从出生到成长，最后到死亡，这个过程的时间可以理解为生命周期。React中的组件也是这么一个过程。React的生命周期分为三个阶段：挂载期（也叫实例化期）、更新期（也叫存在期）、卸载期（也叫销毁期）。在每个周期中React都提供了一些钩子函数。生命周期的描述如下：挂载期：一个组件实例初次北创建的过程。更新期：组件在创建后再次渲染的过程。卸载期：组件在使用完后被销毁的过程。创建阶段（挂载阶段）创建阶段（挂载阶段）1==> constructor(){}2==>render(){}3==>componentDidMount(){}

推荐整理分享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('子组件-