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

    1、constructor

    在这个生命周期函数的作用是做初始化工作的,在调用当前函数的时候必须在内部调用super,否则this的指向会发生错误的。

    当前生命周期函数可以用来定义当前组件所需要用到的一些状态值。

    在constructor中如果需要使用props的时候在supers中继承过来。

    2、componentwillMount:挂载前

    当前生命周期函数可以用来接受外部数据,将外部数据转换成内部的数据,在这个生命周期里面尽量不要使用setstate因为当前生命周期执行完毕以后就会执行render。

    3、render渲染

    当this.state/this.props发生改变的时候render函数就会执行render

    用来做最后数据最后的修改

    render函数每次执行的时候都会将虚拟DOM在缓存一份,当下一次render函数执行的时候会与缓存中的虚拟DOM进行对比(这种对比就是diff算法)将发生改变的虚拟DOM进行更新。

    当前生命周期函数在新版本中被废除掉了

    4、componentDidMount:挂载后

    当前生命周期我们可以通过this.ref来获取真实的Dom结构

    this.refs.属性

    一般情况下我们都会在当前周期函数中做数据的请求。

    5、shouldcomponentUpdate数据即将更新

    当前生命周期函数必须有一个返回值,如果返回true则继续执行下面的生命周期函数,如果返回false则不会执行下面的生命周期函数

    在这个生命周期函数中我们可以做性能的优化,如果说当前数据改变后没有必要进行render的渲染我们就可以return false 如果需要进行渲染咋返回true来减少不必要的渲染

    当前生命周期函数中会有两个参数一个是新的props,一个是新的state

    当前生命周期函数决定的是render函数是否渲染而不是数据是否更新

    6、componentwillUpdate

    当前周期函数用来做数据最后的更新处理

    当前生命周期函数中有2个参数一个是新的props,一个是旧的state。

    7、componentDidUpdate

    数据更新完毕,获取到数据更新的Dom结构,当前生命周期函数会接受2个参数,一个旧的props,一个旧的state

    8、componentwillReceiveprops

    当this.props发生改变的时候那么当前生命周期函数就会执行

    当前生命周期中有一个参数新的props

    可以用来做外部数据的处理

    9、componentwillunmount:

    当前生命周期用来做组件的销毁

    一般情况下用来做事件的移除

     由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数

    • componentWillMount
    • componentWillRecieveProps
    • componentWIllUpdate

    新增两个生命周期

    • static getDerivedStateFromProps
      会在初始化和update时触发,用于替换componentWillReceiveProps,可以用来控制 props 更新 state 的过程;它返回一个对象表示新的 state;如果不需要更新,返回 null 即可
    • getSnapshotBeforeUpdate
      用于替换 componentWillUpdate,该函数会在update后 DOM 更新前被调用,用于读取最新的 DOM 数据,返回值将作为 componentDidUpdate 的第三个参数

    组件第一次执行的时候会执行那些生命周期

    constructor

    componentwillmount

    render

    componentDidMount

    那些生命周期函数只会执行一次

    constructor

    componentwillMount

    componentDidMount

    componentwillunmount

    那些生命周期函数会执行多次

    render

    componentwillReceiveprops

    shouldcomponentUpdate

    componentwillUpdate

    componentDidUpdate

  • 相关阅读:
    We need know.
    vue2.x加入fullpage全屏插件
    解决浏览器url带值访问报错URL编码encodeURI
    vue子组件修改父组件的值(子传父 )
    cli3多页面 webpack打包日志记录
    解决vue-cli npm run build之后vendor.js文件过大的方案
    vue使用UEditor富文本编辑器[实用]
    解决 cli3 自定义指令在ie11报错 SCRIPT1002: 语法错误
    cli3搭建项目配置代理跨域
    简易日期联动选择代码demo
  • 原文地址:https://www.cnblogs.com/ray123/p/10896532.html
Copyright © 2011-2022 走看看