react生命周期方法

每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的“生命周期方法”。方法中带有前缀 will 的在特定环节之前被调用，而带有前缀 did 的方法则会在特定环节之后被调用。

react生命周期可分为三个状态以及对应的方法

Mounting（装配）

constructor()

React组件的构造函数将会在装配之前被调用。

componentWillMount()

在渲染前调用,在客户端也在服务端。

render()

所有组件类都必须有自己的 render 方法，用于输出组件。

componentDidMount()

在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。

Updating（更新）

componenWillReceiveProps()

在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate()

返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。

componentWillUpdate()

在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

render()

同上

componentDidUpdate()

在组件完成更新后立即调用。在初始化时不会被调用。

Unmounting（卸载）

componentDidUnmount()

在组件从 DOM 中移除的时候立刻被调用。

想了解更多请参考官方中文文档关于生命周期的详解

转载于:https://www.cnblogs.com/hutaoblog/p/8436621.html

react生命周期方法相关推荐

如何通俗易懂地向别人解释React生命周期方法？
什么是生命周期方法?新的React16+生命周期方法是怎样的?你该如何直观地理解它们,以及为什么它们很有用? 生命周期方法到底是什么? React组件都有自己的阶段. 如果要你"构建一个He ...
react生命周期方法介绍
react生命周期 react生命周期主要包括三个阶段:初始化阶段.运行中阶段.销毁阶段 react在不同的生命周期会触发不同的钩子函数初始化阶段 getDefaultProps() 设置组件默认的 ...
react生命周期（自己的方式理解）
react生命周期(自己的方式理解) react的生命周期函数有:挂载,渲染/更新,卸载首先要知道react生命周期最初始的要有哪些?最后生命中出现的又有哪些?我本人喜欢把react比作是一个人的一 ...
React 生命周期
生命周期方法组件的生命周期分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM React 为每个状态都提供了两种处理函数 ...
ES6中的React生命周期详解
太长时间没写react了,有点生.重新捡起来练练手. import React,{ Component } from 'react';class Demo extends Component {con ...
react生命周期详细介绍
目录挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...
vue生命周期和react生命周期对比。
生命周期指的是组件从初始化开始到结束的过程或者是生命周期是描述组件从开始到结束的过程,每个组件都具有生命周期,都对组件通过生命周期给予的钩子函数进行管理. 钩子函数指的是系统某些状态和参数发生改 ...
React、react生命周期、react生命周期运行过程、shouldComponentUpdate的用法
React.react生命周期.react生命周期运行过程 1.创建阶段 constructor(){super()console.log('执行构造函数')this.state={num:1}}UN ...
【React生命周期】
React 生命周期从图上可以知道react 生命周期可以分为三个状态挂载时更新时卸载时挂载阶段 constructor :初始化阶段可以接受来自super(props)或者父组件传递的p ...

react生命周期方法

react生命周期方法相关推荐

最新文章

热门文章