美文网首页
react有状态组件和无状态组件和生命周期函数

react有状态组件和无状态组件和生命周期函数

作者: Sune小叶子 | 来源:发表于2019-02-18 22:01 被阅读0次

    有状态组件

    1.继承自Component类
    2.可以使用state和props,并且都是使用this来调用this.state或this.props
    3.拥有生命周期函数


    无状态组件

    1.就是一个函数
    2.不能使用state,只会接收一个props形参,并且直接使用props参数不需要this
    3.没有生命周期函数

    生命周期函数

    1.constructor
    是es6中的构造函数,在该函数中可以调用当前组建的父级采用super(props),也可以设置state状态(或者说是初始化state的状态,当然react中也提供了一个方法getInitState方法用来初始化state)
    说明:构造函数在对象生成前最先执行的方法就是这constructor方法,这个方法是自动执行的
    2.componentWillMount
    是组件即将要生成,可以修改状态
    3.render
    render函数执行的时候会将jsx语法挂载到dom上并创建虚拟DOM,并转化为浏览器可以识别的HTML文件,更新DOM
    render函数在执行的时候会加载组件需要的子组件(但不是所有子组件都会加载)
    4.componentDidMount
    组件渲染完成,注意不要在这个生命周期函数里面更改组件的状态,不然会形成死循环


    生命周期函数图

    相关文章

      网友评论

          本文标题:react有状态组件和无状态组件和生命周期函数

          本文链接:https://www.haomeiwen.com/subject/qcoaeqtx.html