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

    一、前言

    问:

      什么是组件的生命周期?

      组件的生命周期中都包含哪些方法,各有什么作用?

      生命周期的方法都在什么时候调用?

     

    生命周期: 顾名思义,一个主体从出生到死亡的整个过程

    学习组件(React的基石、核心),必须先去了解他整个生命的流程,才能掌握组件的使用方法,否则盲目的使用,只是在一次次的碰运气而已。

     

    二、正文

    (一)、先分拆周期(分成3个模块)

    组件装载(Mounting)、组件更新(Updating)、组件卸载(UnMounting)

     

    (二)、再盗图

     

    (三)、再详解生命周期的方法

    1. 组件装载前:

    方法: getDefaultProps()

    作用: 为组件设置默认属性(props),es6使用defaultProps来设置默认属性

    static defaultProps = {
        name: '小明' ,
        age: 22,
        sex: '男'      
    }
    //import PropTypes from 'prop-types'  规定属性类型
    static propTypes = {
        name: PropTypes.string.isRequired,    //isRequired表示该属性必须传入
        age: PropTypes.number,
        sex: PropTypes.string
    }

    2. 组件装载阶段:

    方法: getInitialState() 组件的构造方法

    作用: 为组件初始化状态(state),es6使用constructor()来初始化,此时可获取this.props...

    constructor(props){
        super(props);    //只要组件存在constructor,就必要要写super,否则this指向会错误
        this.state = {
            visible: false,
        }
    }

     

    方法:componentWillMount()

    作用: 组件装载前调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。

     

    方法:render()

    作用: react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。

    概念:

      虚拟DOM(Virtual Dom):组件并不是真正的DOM节点,而是存在于内存中的数据结构(此时即可叫虚拟节点),只有当它插入真正的文档之后,才变成真正的DOM

      diff算法: React的设计就是,所有DOM的变动都会先发生在虚拟DOM上,然后再将实际的DOM变动反映到真实的DOM的节点上。(实际的DOM变动就是通过diff算法来完成)

     

    方法:componentDidMount()

    作用: 组件装载之后调用,只调用一次。

     

    3. 组件的更新阶段(此阶段会根据props和state的改变不断循环)

    方法:componentWillReceiveProps(nextProps)

    作用: 组件初始化时不调用,组件接受新的props时调用。

       即监听组件属性的变化,可以通过此方法来解决props改变组件却不重新渲染的问题

    componentWillReceiveProps(nextProps){
        this.setState({visible: nextProps.visible})
    }

     

    方法:shouldComponentUpdate(nextProps, nextState)

    作用: react性能优化非常重要的一环。

    组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,

    如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候

     

    方法:componentWillUpdate(nextProps, nextState)

    作用: 组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state

     

    方法:render()

    作用: 组件props或state更新,重新渲染

     

    方法:componentDidUpdate()

    作用: 组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。

     

    4. 组件的卸载阶段

    方法:componentWillUnmount()

    作用: 组件将要卸载时调用,一些事件监听和定时器需要在此时清除。

     

    三、结语

    加油!

     

     

  • 相关阅读:
    JAVA课程设计+五子棋(团队博客)
    201521123049 《JAVA程序设计》 第14周学习总结
    201521123049 《JAVA程序设计》 第13周学习总结
    201521123049 《JAVA程序设计》 第12周学习总结
    网络15软工个人作业5——软件工程总结1
    个人作业4--alpha阶段个人总结
    软件工程 个人作业3 案例分析
    软件工程网络15结对编程作业
    软件工程网络15个人阅读作业2
    软件工程网络15个人阅读作业1
  • 原文地址:https://www.cnblogs.com/nangezi/p/9884939.html
Copyright © 2011-2022 走看看