• react 生命周期


      React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁;

        初始化:getDefaultProps()、getInitialState()、componentWillMount()、render()、componentDidMount()

        更新:componentWillReceiveProps(nextProps)、shouldComponentUpdate(nextProps、nextState)、componentWillUpdate(nextProps、nextState)、render()、componentDidUpdate()

        销毁:componentWillUnmount()

      getDefaultProps():设置默认的 props,也可以用 defaultProps 设置组件的默认属性;

      getInitialState():使用 es6 的语法的时候没有这个钩子,在 es6 的 class 语法中,对应的是 constructor ,可以在这里定义 this.state ;此时是可以访问 this.props 的;

        在 constructor() 中接收一个 props 参数,props 是从父组件中传入的属性对象,如果父组件中没有传入属性而组件自身定义了默认属性,那么这个 props 指向的就是组件的默认属性;

     

      componentWillMount():组件初始化的时候调用,以后组件更新的时候是不会调用的,整个生命周期也只是调用一次,此时可以修改 state;

        这个方法在组件被挂在到 DOM 前使用,且只会调用一次。这个方法实际上在项目中很少会用到,因为可以在该方法中执行的工作都可以提前到 constructor 中;在这个方法中调用 this.setState 不会引起组件的重新渲染;

      render():在这个钩子中进行虚拟 Dom 的创建,进行 diff 算法,更新 dom 树也在此时进行,在这里就不要进行 state 的更改了,否则会陷入死循环;

        render 并不负责组件的实际渲染工作,它只是返回一个 ui 的描述,真正的渲染出页面 DOM 的工作是由 React 自身负责的;

      

      componentDidMount():组件被挂载到 DOM 之后调用,只调用一次;在这个方法中调用 this.setState 会引起组件的重新渲染;

        componentDidMount 是执行组件与服务器通信的最佳地方的原因由两个:

          1)、在 componentDidMount 中执行与服务器通信可以保证获取到数据中,组件已经处于挂在状态,这时即使要直接操作 DOM 也是安全的,而 componentWillMount 无法保证这一点;

          2)、当组件在服务器端渲染时,componentWillMount 会被调用两次,一次是在服务器端,另一次是在浏览器端,而 componentDidMount 能保证在任何情况下只会被调用一次;

        当然,componentWillMount 会在组件被挂载前调用,因此从时间上,在 conponentWillMount 中执行服务器通信要早于在 componentDidMOunt 中执行,执行的越早意味着服务器数据越能更快的返回组件;但是实际上这个时间差是微乎其微的,完全可以忽略不计。

      componentWillReceiveProps(nextProps):组件初始化的时候是不调用的,组件接收新的 props 的时候去调用;

      shouldComponentUpdate(nextProps, nextState):此钩子可以进行性能的优化;组件接收新的 state 或者  props 时调用,可以在此时进行前后两个 props 和 state 的对比,看看是不是相同,如果是相同的,则返回 false 阻值更新;

      componentWillUpDate(nextProps, nextState):组件初始化时不调用,只有在组件将要更新的时候才调用,此时可以进行 state 的修改;

      componentDidUpdate():组件初始化时不调用,组件更新完成后调用,此时可以获得 Dom 节点;

        在 componmentWillREceiveProps 中调用 setState,只有在组件 render 及其的方法中,this.state 指向的才是更新后的 state;在 render 之前的方法 shouldComponentUpdate、componentWillUpdate 中,this.state 依然指向的是更新前的 state。

  • 相关阅读:
    【Matlab】把一年中的某一天(从1月1日起)换算成日期
    【工具】用hexo搭建博客
    【工具】文献分析工具histcite的简单使用
    【工具】用PPT排版打印海报时图片分辨率问题
    【工具】PPT插入高清图片保存后图片变模糊的解决方法
    【工具】排版软件TeX Live 2016的简单使用
    【工具】文字识别软件(OCR) ABBYY Finereader 11简单使用
    【Matlab】编程风格摘录
    【信号】用matlab实现一维信号的高斯滤波
    【GMT5】用GMT绘制测高卫星Topex_Poseidon_Jason的地面轨迹
  • 原文地址:https://www.cnblogs.com/mufc/p/11236899.html
Copyright © 2020-2023  润新知