zoukankan      html  css  js  c++  java
  • react 生命周期函数

    什么是生命周期函数呢?

    生命周期函数指的是某一时刻组件会自动调用执行的函数,比如render函数,当props或state发生改变的时候,render函数就会自动被调用重新执行。

    1)组件初始化(Initialization)阶段

    对于react组件来说,它会经历一些过程,Initialization指的是初始化过程,这个时候组件会初始化自己的一些数据,比如在constructor定义state,接收props。

    2) 组件挂载(Mounting)阶段

    组件初始化之后,会被渲染,再挂载到页面上。从图中我们可以看到,mounting阶段有三个生命周期函数,componentWillMount,render,componentDidMount。组件即将被挂载到页面时,会自动执行componentWillMount函数;组件挂载到页面之后,componentDidMount函数会自动执行,这两个生命周期函数只会执行一次。render函数在state、props发生改变时就会自动执行,可以执行多次。

    3) 组件更新(Updation)阶段

    在数据发生变化的时候,组件就会被更新。如果是props发生了变化,componentWillReceiveProps生命周期函数会被自动执行。当组件没有props参数时,不会被执行。组件若是要从父组件接收参数,只要父组件的render函数被重新执行了,子组件的componentWillReceiveProps函数就会被执行。注意:react初次渲染时这个函数不会被执行。

    shouldComponentUpdate函数,在组件更新之前会被自动执行,它返回的是一个布尔值,判断是否重新渲染组件,默认返回true。作用是有些变化不需要重新渲染组件,可以在该函数内阻止。

    componentWillUpdate函数,也是在组件更新之前会被执行,但是在componentShouldUpdate执行并返回true之后才会被执行。

    当componentWillUpdate执行之后,render函数会被执行。当render函数执行完成以后,componentDidUpdate会被执行。componentDidUpdate的主要作用是,在组件更新之后操作DOM元素。

    4)组件卸载(Unmounting)阶段

    componentWillUnmount函数在组件从页面卸载之前被调用。作用是,在该方法中执行必要的清理,比如无效的定时器或者在componentDidMount中创建的DOM元素。

  • 相关阅读:
    第一篇 HTML5打包APP之VMware15安装MAC(MAC OS 10.13)(OS X 10.14)原版可升级最新可解锁macOS Unlocker3.0(OS X 10.13)
    phpcms V9 网站域名变更后,刷新所有缓存后,栏目链接总是改不过
    ECShop——给商品详情页添加字段
    java webcontroller访问时报415错误
    SVN设置忽略上传属性
    Eclipse的Servers视图中无法添加Tomcat6/Tomcat7
    jquery $.each遍历json数组方法
    jquery 中json数组的操作 增删改
    JQuery获取input type="text"中的值的各种方式
    eclipse下把所有的文件都转换为UTF-8的方法
  • 原文地址:https://www.cnblogs.com/ly2019/p/11228613.html
Copyright © 2011-2022 走看看