react声明周期

constructor(props)

在创建组件实例的时候调用一次。

componentWillMount()

It is called before render(), therefore setting state synchronously in this method will not trigger a re-rendering.

render:

The render() function should be pure, meaning that it does not modify component state. Render is only used for displaying content, we put the code that should handle things like Ajax requests in what React calls lifecycle events.

不能调用setState方法,会导致死循环。

componentDidMount:

Invoked immediately after the component is inserted in the DOM.If we fetch external data from an API, we’ll put it in this lifecycle event.挂载到DOM树后触发,在这里可以用refs访问组件对应的DOM节点。

Setting state in this method will trigger a re-rendering.

componentWillReceiveProps()

invoked before a mounted component receives new props,and react doesn‘t call this method with initial props during mounting.

React may call this method even if the props have not changed,so you need to compare this.props and nextProps, and perform state transitions using this.setState() in this method.

shouldComponentUpdate(nextProps, nextState)

Use this as an opportunity to perform preparation before an update occurs. Note that you cannot call this.setState() here. If you need to update state in response to a prop change, use componentWillReceiveProps() instead.

对于大型组件,如果nextProps/nextState没有变化,可以return false提高应用性能。

componentWillUpdate(prevProps, prevState)

componentWillUpdate() is invoked immediately before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render.

Note that you cannot call this.setState() here. If you need to update state in response to a prop change, use componentWillReceiveProps() instead.

componentDidUpdate(prevProps, prevState)

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props.

componentWillUnmount()

Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any DOM elements that were created in componentDidMount.

forceUpdate()

If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().

Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child.

如果Clock组件的key变化,上述代码每秒都会重新执行从constructor到componenDidMount的方法,还包括ComponentWillUnmount()方法。

如果Clock组件无key属性或固定,则react会复用Clock组件,mouting过程中的方法只会执行一遍,之后每秒会执行componetWillUpdate()及相关方法一次。

同理对于单页应用,页面跳转出去再回来,mounting期间的方法不会再执行。若在同一位置的Dom被替换或移除了,则重新初始化并执行mouting期间的钩子函数。

嵌套组件时,父组件会先运行到render方法,再执行子组件的钩子函数到DidMount/DidUpdate方法,最后父组件触发DidMount/DidUpdate方法。

父组件因为setState/props导致render时,父组件会依次调用生命周期图中的对应方法。因为子组件在父组件的render方法中,所以其嵌套的所有的子组件也会执行相应的生命周期函数,而不论子组件的state/props有无变化。

时间: 2024-10-17 11:58:25

react声明周期的相关文章

前端(九):react生命周期

一.组件渲染 当组件的props或者state发生改变时,组件会自动调用render方法重新渲染.当父组件被重新渲染时,子组件也会被递归渲染.那么组件是如何渲染的呢? # 方案一 1.state数据 2.JSX模板 3.数据 + 模板 生成真实DOM来显示 4.state发生改变 5.JSX模板 6.数据 + 模板重新结合,生成新的真实的DOM,替换掉以前的DOM 缺陷: 第一次生成了完整的DOM片段 第二次生成了完整的DOM片段,替换第一次的DOM片段,比较耗性能 # 方案二 1.state数

Java-Maven(三):Maven相关的概念:Maven坐标、Maven仓库、Maven声明周期

之前通过学习对maven命令有了部分了解,但是只是知道maven是用来做什么.但到目前位置还不足以全面的了解maven,为更全面的了解maven,需要学习以下几个概念:Maven坐标.Maven仓库.Maven生命周期. Maven坐标 maven坐标概念:每个构件都有自己的一个标识(唯一的),它由groupId,artifactId,version等信息组成,因此maven就可以对构件进行版本控制.管理. 备注: groupId :公司名称或者组织名称: artifactId:项目名称: ve

无状态会话bean(2)----声明周期回调(未排版)

与用于应用程序代码的常规Java类不同,服务器管理无状态会话bean的声明周期它在两个方面影响了一个bean的实现. 首先,服务器决定了创建和删除bean实例的时间.应用程序不会控制何时或者甚至创建多少特定的无状态会话bean实例,或者它们将存活多久. 第二,服务器必须在构建之后,但是在调用bean的业务逻辑之前,初始化bean服务.同样,该bean可能必须在使用业务方法之前获得可用的资源,如JDBC数据源.然而,为了使得bean获取资源,服务器必须首先完成初始化bean服务.这限制了类的构造函

Asp.Net原理Version3.0_页面声明周期

Asp.Net原理Version1.0 Asp.Net原理Version2.0 相关源码 页面的Process方法 1 // System.Web.UI.Page 2 private void ProcessRequest(bool includeStagesBeforeAsyncPoint, bool includeStagesAfterAsyncPoint) 3 { 4 if (includeStagesBeforeAsyncPoint) 5 { 6 //调用子类的方法(这是个虚方法),1,

vue与 react 生命周期

Vue vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到的created 实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调.mount挂载阶段还没开始,$el 属性目前不可见,数据并没有在DOM元素上进行渲染beforeMount:在挂载开始之前被调用:相关的 render

react生命周期方法

每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的"生命周期方法".方法中带有前缀 will 的在特定环节之前被调用,而带有前缀 did 的方法则会在特定环节之后被调用. react生命周期可分为三个状态以及对应的方法 Mounting(装配) constructor() React组件的构造函数将会在装配之前被调用. componentWillMount() 在渲染前调用,在客户端也在服务端. render() 所有组件类都必须有自己的 render 方法,用于输出组件.

java基础 第十四章(Servlet声明周期、Servlet向jsp中提供数据、Servlet跳转jsp、jsp中书写java代码)

一.Servlet声明周期 1.Servlet的声明周期一般分为四步:加载.实例化.服务.销毁. 2.实例化在整个生命周期中只执行一次. 二.jsp 1.Servlet向jsp中提供数据 request.setAttribute( , ); 例:request.setAttribute("key" , "Hello"); 2.Servlet跳转jsp (1)同一请求方式:request.getRequestDispatcher("/路径").fo

前端005/React生命周期

ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生命周期函数 (一).初始化阶段 1.设置组件的默认属性 static defaultProps = { name: 'sls', age:23 }; //or Counter.defaltProps={name:'sls'} 复制代码 2.设置组件的初始化状态 constructor() { sup

vue生命周期和react生命周期对比

一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></