React生命周期函数理解

一、组件挂载阶段

  1. componentWillMount()

  该方法在首次渲染之前调用,在一个组件挂载到卸载的过程中,仅仅执行这一次。该函数内可以state初始化的工作,与constructor的作用类似。这里也是在render方法调用前最后一次修改state的方法。

  这里不建议使用Ajax获取接口数据,因为是异步的,所以在接下来的第一次render中根本接收不到响应数据。

  willMount中setState还是会多一次渲染

  2. render()

  该方法创建一个虚拟dom,表示组件的输出。(输出可以应用到react-dom,react-native)

  3.componentDidMount()

  该方法调用时,表明已经渲染出真实的dom,可以在该方法中获取任意节点。

二、组件更新阶段

  2.1 父组件状态改变,触发子组件更新(简单说是获取到了新的props)

    2.1.1 componentWillReceiveProps(nextProps)

    当父级组件state或者props发生改变时,子组件会调用该方法。这里的nextProps和this.props需要我们自己判断是否相同来做出相应的操作。比如根据新的props来setState

    2.1.2 shouldComponentUpdate(nextProps, nextState)

    当确定组件的props或者state的某种改变不需要重新渲染时,可以通过这个方法返回false来阻止渲染。

    2.1.3 componentWillUpdate(nextProps, nextState)

    组件得到新的props或者state时,在render前调用该函数。(不要在此方法中更新state)

    如果需要相应props的改变时,可以在componentWillReceiveProps中做出响应操作

    2.1.4 render

    2.1.5 componentDidUpdate(prevProps, prevState)

    可以对更新后的dom进行操作

  2.2 组件内部状态更新

    少了componentWillMount,其他与上面一致

三、卸载

  componentWillUnmount()

  清除定时器,网络请求等

引用:https://moeover.com/2017/01/17/understand-react-lifecycle.html

原文地址:https://www.cnblogs.com/iszhangjin/p/11442340.html

时间: 2024-10-09 14:15:29

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

react生命周期函数

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

react 生命周期函数介绍

constructor():构造函数 执行:组件加载钱最先调用一次,仅调用一次. 作用:定义状态机变量. 注意:第一个语句必须为super(), 否则会报错:'this' is not allowed before super() constructor(props) { super(props); this.state = { content:null, } } componentWillMount() 执行:组件初始渲染(render()被调用前)前调用,仅调用一次. 作用:如果这个函数调用

react 生命周期函数

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

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 学习(四) ---- 生命周期函数

现在我们能修改状态,页面可以进行交互了,但是还有一种状态改变没有解决,那就是倒计时效果,时间一直在变化,组件状态也一直在改变,但我们什么都没有做,如果要实现这样的效果,需要怎么处理? 我们都知道,改变状态用的是setState,  上次讲的加减操作是在把它写到事件处理函数中来改变状态的,但现在没有什么事件供我们调用,因为我们没有做任何操作,它却一直在变化,现在要做的就是找一个机会或入口,来写setState 函数, 这个机会就是组件的生命周期函数. 生命周期也是来源于对我们对现实生活的思考, 对

React组件安装使用和生命周期函数

React安装在使用react时 需要安装 两个模块 react react-dom 初始化时 需要用到react-dom中的render方法 具体如下: import ReactDOM from "react-dom" ReactDOM.render(<div>test</div>,document.getElementById("app"),()=>{ console.log("应用初始化完毕") }) 或者 i