钩子函数的状态有4个阶段:

<p>1.初始化阶段  (componentWillMount() || componentDidMount()) </p>
                      <p>2.更新阶段 (componentWillUpdate() || componentDidUpdate())</p>
                      <p>3.卸载阶段 (componentWillUnmount())</p>
                      <p>4.异常处理阶段 (componentWillCatch()) </p>

“钩子”就是在某个阶段给你一个做某些处理的机会。生命周期钩子函数就是在组件预备、创建、使用和销毁的过程中的函数监听。

React 组件生命周期:

componentWillMount :在渲染前调用,在客户端也在服务端。

componentDidMount:在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。

componentWillReceiveProps:在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate:返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用,可以在你确认不需要更新组件时使用。

componentWillUpdate:在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate:在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。

React---钩子函数的更多相关文章

  1. 【学而思】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性

    凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...

  2. 【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性

    凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...

  3. react生命周期钩子函数

    render在更新阶段和挂在阶段都会执行 class App extends Component { render() { return ( <div> <h1>reacet生 ...

  4. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  5. vue - 过滤器-钩子函数路由

    一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...

  6. vue-(过滤器,钩子函数,路由)

    1.局部过滤器 在当前组件内部使用过滤器,修饰一些数据 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } // ...

  7. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  8. Vue2.X的路由管理记录之 钩子函数(切割流水线)

    $route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生 ...

  9. 【Mocha.js 101】钩子函数

    前情提要 在上一篇文章<[Mocha.js 101]同步.异步与 Promise>中,我们学会了如何对同步方法.异步回调方法以及 Promise 进行测试. 在本篇文章中,我们将了解到 M ...

  10. wordpress钩子和钩子函数

    ccc,看了很多博客,无法理解,还是自己来写吧. wordpress 在wordpress中有很多钩子,还有很多钩子函数,在什么地方用什么钩子,用什么钩子函数, 需要明白两个问题: 1:什么是钩子,钩 ...

随机推荐

  1. [Vue CLI 3] Uglify 相关的应用和设计

    在本文开始之前,先留一个问题? 如果在新版本我想加一个 drop_console 的配置呢? 在老版本的脚手架生成的配置中,对于线上环境的文件:webpack.prod.conf.js 使用了插件:u ...

  2. java jsp j2ee

    1. JavaScript用于编写嵌入在网页文档中的程序,它由浏览器负责解释和执行,可以在网页上产生动态的显示效果和实现与用户交互的功能,譬如,让一串文字跟着鼠标移动,让一个图标在网页漂浮移动,验证用 ...

  3. pymysql.err.OperationalError: (2013, 'Lost connection to MySQL server during query')

    pymysql错误: pymysql.err.OperationalError: (2013, 'Lost connection to MySQL server during query') pymy ...

  4. 【SPOJ 220】 PHRASES - Relevant Phrases of Annihilation

    [链接]h在这里写链接 [题意]     给你n(n<=10)个字符串.     每个字符串长度最大为1e4;     问你能不能找到一个子串.     使得这个子串,在每个字符串里面都不想交出 ...

  5. PHP学习(数据类型)

    PHP中,支持8种原始类型,其中包括四种标量类型.两种复合类型和两种特殊类型.PHP是一门松散类型的语言,不必向PHP声明变量的数据类型,PHP会自动把变量转换为自动的数据类型,一定程度降低了学习PH ...

  6. jreble for eclipse配置

    1 下载安装jrebel for eclipse  安装方法不再赘述.常规方式Install via Eclipse Marketplace->earch for JRebel 2 安装之后替换 ...

  7. 2019-8-31-dotnet-方法名-To-和-As-有什么不同

    title author date CreateTime categories dotnet 方法名 To 和 As 有什么不同 lindexi 2019-08-31 16:55:58 +0800 2 ...

  8. oracle如何回收空间?

    ALTER TABLE 名称 DEALLOCATE UNUSED [KEEP 4[M|K]] 1.当空间分配过大时,可以使用本命令 2.如果没有加KEEP,回收到水线 3.如果水线<MINEXT ...

  9. 初探postman

    第一种:安装postman 扩展程序 第二种:本地 安装postman 登陆进来postman的界面 发送第一个postman请求 将请求保存到集合 未完,待续...

  10. js不停地触发按钮的事件

    例子:不断地发匿名邮件 http://tool.chacuo.net/mailsend 在控制台写:setInterval('$(".convert :input[arg]").t ...