react生命周期方法介绍

react生命周期

react生命周期主要包括三个阶段：初始化阶段、运行中阶段、销毁阶段

react在不同的生命周期会触发不同的钩子函数

初始化阶段

getDefaultProps() 设置组件默认的属性，注意这个钩子函数只会在组件第一次实例化的时候被调用，多次实例化的组件会共享同一份props

getInitialState() 组件的初始化状态，可以通过用户的操作来更改组件自身的状态

componentWillMount() 在组件即将被渲染到页面(组件还没有真正渲染)

render() 组件渲染

componentDidMount() 组件被渲染到页面上，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM

运行中阶段

componentWillReceiveProps() 组件接收到属性的时候调用，当组件的属性发生变化的时候，并将其作为参数nextProps使用，此时可以更改组件props及state

componentWillReceiveProps: function(nextProps) {if (nextProps.bool) {this.setState({bool: true});}
}

shouldComponentUpdate() 当组件接收到新的属性或者新的状态发生变化的时候执行(在某些情况下当属性或者状态不发生变化的时候可以手动return false)

组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化

在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用

componentWillUpdate() 组件即将要被更新的时候调用（接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state）

render() 组件渲染

componentDidUpdate() 组件被更新完成之后调用，此时可以访问到新的DOM元素

销毁阶段

componentWillUnmount() 组件被销毁的时候被调用，给开发者最后的机会进行一些清理操作，比如对定时器的操作等等…

react生命周期方法介绍相关推荐

如何通俗易懂地向别人解释React生命周期方法？
什么是生命周期方法?新的React16+生命周期方法是怎样的?你该如何直观地理解它们,以及为什么它们很有用? 生命周期方法到底是什么? React组件都有自己的阶段. 如果要你"构建一个He ...
react生命周期详细介绍
目录挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...
java applet的生命周期_Java Applet的生命周期是什么？生命周期方法介绍
Java Applet的生命周期是什么?本篇文章就给大家介绍一下Applet的生命周期,让大家了解Applet的生命周期中5种状态及其对应的方法分别是什么,希望对你们有所帮助. Java Applet ...
react生命周期方法
每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的"生命周期方法".方法中带有前缀 will 的在特定环节之前被调用,而带有前缀 did 的方法则会在特定环节之后被调用 ...
React生命周期理解
前言如果将React的生命周期比喻成一只蚂蚁爬过一根吊绳,那么这只蚂蚁从绳头爬到绳尾,就会依次触动不同的卡片挂钩.在React每一个生命周期中,也有类似卡片挂钩的存在,我们把它称之为'钩子函数'.那 ...
前端React教程第二课 React生命周期设计思想
02 为什么 React 16 要更改组件的生命周期?(上) React 生命周期已经是一个老生常谈的话题了,几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍.然而,入门教材在设计上往往 ...
react生命周期的基本用法
转载于:https://www.jianshu.com/p/c9bc994933d5 首先,看一下一个组件的构造 import React,{ Component } from 'react';cla ...
浅谈 React 生命周期
浅谈 React 生命周期浅谈 React 生命周期旧版的生命周期新版的生命周期详解各个生命周期函数 constructor getDerivedStateFromProps render c ...
React 生命周期钩子函数
React15 挂载过程 // 完成了React数据的初始化. props.state constructor() // 组件已经完成初始化数据,但是还未渲染DOM时执行的逻辑 componentWi ...

react生命周期方法介绍

react生命周期方法介绍相关推荐

最新文章

热门文章