zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    二维码
    文件下载
    相对路径使用的特殊符号
    Httpclient的使用
    MySQL比like语句更高效的写法
    jQuery中turn.js(翻页效果)学习笔记
    如何在忘记mysql的登录密码时更改mysql登录的密码(window及linux)
    详细介绍svn在eclipse中的使用(附图解说明)
    Xshell6远程访问linux及Xftp6远程针对linux系统中文件操作(附图文详解)
    利用workbench对linux/Ubuntu系统中的mysql数据库进行操作
  • 原文地址:https://www.cnblogs.com/mufc/p/11236899.html
Copyright © 2011-2022 走看看