react 生命周期函数介绍

constructor():构造函数

执行:组件加载钱最先调用一次,仅调用一次。

作用:定义状态机变量。

注意:第一个语句必须为super(), 否则会报错:‘this‘ is not allowed before super()

constructor(props) {
    super(props);
    this.state = {
      content:null,
    }
}     


componentWillMount()

执行:组件初始渲染(render()被调用前)前调用,仅调用一次。

作用:如果这个函数调用的setState改变了组件的某些状态,react会等待setState完成后再渲染组件。

注意:子组件也有componentWillMount函数,在父组件的该函数调用后再调用。



render()

执行:componentWillMount调用之后, componentDidMount调用之前。

作用:渲染挂载组件。

触发:1、初始化加载页面,2、状态机改变setState,3、接收新的props(父组件更新)

注意:组件必要函数,不能在函数内使用setState改变状态机。



componentDidMount()

时间:render之后被调用,仅调用一次。

作用:渲染挂载组件,可以使用refs(react支持的一个特殊属性,可以将它加在render函数返回的组件元素上,起一个标记作用,方便定位。)

注意:子组件也有该函数,在父组件调用前调用;如果该函数内有setState改变状态机,将会重新渲染组件,如果需要在页面初始化之后才改变状态机的,可以将网络请求放在该函数内。



componentWillReceiveProps(nextProps)

时间:组件渲染后,当组件接收新的nextProps时被调用。函数接收一个新的nextProps对象,nextProps是父组件传给子组件的。父组件render之后就会被调用。

作用:渲染挂载组件,可以使用refs(react支持的一个特殊属性,可以将它加在render函数返回的组件元素上,起一个标记作用,方便定位。)

注意:react初次渲染时不会被调用。



shouldComponentUpdata(nextProps, nextState)

时间:组件执行render函数之后,接收新的props或state时被调用,即每次执行setState都会执行该函数,来判断是否重新渲染组件,默认返回true,接收两个参数。

作用:如果有些变化不需要执行渲染组件,可在该函数内阻止。

注意:不能在该函数内使用setState来改变状态机,如需要,请在componentWillReciveProps中改变。



componentDidUpdata()

时间:组件重新渲染后调用,在初始化渲染的时候该方法不会被调用。

作用:使用该方法可以在组件更新之后操作DOM元素。



componentWillUnmount()

时间:组件卸载之前调用。

作用:在该方法中执行必要的清理,比如无效的定时器后者在componentDidMount中创建的DOM元素。



注意

当一个页面中存在父子组件的时候,要特别注意componentDidMount的使用,因为子组件的componentDidMount会比父组件先调用,从而会引起父子组件传参错误。

原文地址:https://www.cnblogs.com/kdcg/p/9182393.html

时间: 2024-11-01 15:29:46

react 生命周期函数介绍的相关文章

React生命周期函数的使用场景

使用shouldComponentUpdate( ) 生命周期函数,减少render函数的执行,减少对未发生改变的DOM结点的重复渲染. shouldComponentUpdate(nextProps, nextState) { if(nextProps.content !== this.props.content) { return true }else { return false } } render() { console.log('child render') const { cont

Cocos2d-x场景生命周期函数介绍

层(Layer)的生命周期函数有例如以下: init().初始化层调用. onEnter().进入层时候调用. onEnterTransitionDidFinish().进入层并且过渡动画结束时候调用. onExit().退出层时候调用. onExitTransitionDidStart(). 退出层并且開始过渡动画时候调用. cleanup(). 层对象被清除时候调用. 提示  层(Layer)继承于节点(Node),这些生命周期函数根本上是从Node继承而来.其实全部Node对象(包含:场景

react生命周期函数

<div> <p> constructor() //组件创建的瞬间执行</p> <p>componentWillMount() //组件将要被挂载</p> <p> render() //计算页面怎么渲染,数据一改变就会执行</p> <p>componentDidMount() //组件挂载完成</p> <p> componentWwillUnmount() //组件将要被销毁</p

react 生命周期函数

Mounting:已插入真实DOM. Updating:正在重新渲染. Unmounting:已移除真实DOM. componentWillMount();   组件将要被渲染到DOM节点. componentDidMount();   组件已经被渲染到Dom节点. componentWillUpdate();   组件将要被重新渲染. componentDidUpdate();    组件已经被重新渲染. componentWillUpdate();  组件将要被卸载方法. component

React生命周期函数理解

一.组件挂载阶段 1. componentWillMount() 该方法在首次渲染之前调用,在一个组件挂载到卸载的过程中,仅仅执行这一次.该函数内可以state初始化的工作,与constructor的作用类似.这里也是在render方法调用前最后一次修改state的方法. 这里不建议使用Ajax获取接口数据,因为是异步的,所以在接下来的第一次render中根本接收不到响应数据. willMount中setState还是会多一次渲染 2. render() 该方法创建一个虚拟dom,表示组件的输出

React之生命周期函数

1.新增知识点 /* https://reactjs.org/docs/react-component.html React生命周期函数: 组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触发的一系列的方法 ,这就是组件的生命周期函数 组件加载的时候触发的函数: 顺序:constructor -> componentWillMount -> render -> componentDidMount 组件数据更新的时候触发的生命周期函数: shouldComponentUpdate

10秒钟理解react生命周期

慎点!这是一篇很水很水的文章, 抄自react中文文档, 本文详细介绍了react生命周期函数执行顺序, 以及各生命周期函数的含义和具体作用. 不同阶段生命周期函数执行顺序 挂载(Mounting) 挂载指的是组件被实例化并插入到dom中 顺序如下: constructor -> getDerivedStateFromProps -> render -> componentDidMount 更新(Updating) 当state变化或者props变化会引起更新 顺序如下: getDeri

React生命周期详解

首先当组件第一次渲染的时候会执行哪些生命周期函数? constructor--->componentWillMount--->render--->componentDidMount constructor: 初始化 当前生命周期函数可以用来定义当前组件所需要的一些状态 当前生命周期里面必须要写super如果不写会报错/或者this的指向可能发生改变 如果在super和constructor中没有传递props这个参数的话是访问不到this.props属性的,反之可以进行访问 compon

react教程(一)JSX语法、组件概念、生命周期介绍

JSX React中,推出了一种新的语法取名为JSX,它给了JS中写HTML标签的能力,不需要加引号.JSX的语法看起来是一种模板,然而它在编译以后,会转成JS语法,只是书写过程中的语法糖. JSX的解析器会帮我们读取这种语法并加以处理. 下面是一个简单的例子. const element = <h1 className="greeting">Hello, world!</h1>; 其实相当于如下的代码: const element = React.create