请问rn中一个组件从渲染到完全显示到界面上的生命周期方法有哪些?



  • 如题,比如我有一个组件如下:
    class AsyncStorageDemo extends Component {
    constructor(props){
    super(props);
    this.state={
    messages:[],
    };
    }
    //组件挂载之后回调方法
    componentDidMount(){
    ...
    }
    render(){

    return null;
    }
    }
    像上面这种情况,我有如下几个问题;
    1.组件渲染时默认调用的是哪个构造函数.?
    2.如果我声明了一个有参数的构造函数,那组件在渲染时它的无参构造函数还会执行吗.?
    3.ES6里面的类是不是和java一样,如果自己声明了一个有参数的构造函数,那么默认的无参构造函数就没有了.?
    4.一个组件生命周期所有必定执行的方法有哪些.?



  • 1.初始化:

    getDefaultProps:实例之间共享默认属性
    getInitialState:初始化状态
    componentDidMount:render出来之前最后一次做修改的机会
    render:渲染出组件,只可以返回一个顶层组件,访问this.state & this.props
    componentWillMount:渲染出组件之后触发的函数
    

    2.运行时:

    componentWillReceiveProrps:父组件修改属性时触发,可以修改props&state
    shouldComponenetUpdate:返回false会阻止render的调用
    componentWillUpdate:不能修改属性和状态
    render:于初始化的render一致
    componentDidUpdate:可以操作dom
    

    3.销毁时:

    componentWillUnmount:在删除组件前执行,做清理工作,如计时器,监听事件


  • @Timson 说:

    getDefaultProps:实例之间共享默认属性
    getInitialState:初始化状态

    es6里上面这两个由constructor代替

    React组件的构造函数都是只有props参数(你没法直接调用构造函数,所以你不需要操心参数)

    至于非React组件的构造函数,你说的问题我没有尝试过



  • @Timson getInitialState这个在es6中貌似不行吧,主要是想问如果用es6写的话,默认调用的是哪个构造函数?



  • @sunnylqm 谢谢解答,这个语法貌似在向java靠拢?还有关于react组件在es6中和es5中的变化文档在官网上面有相关说明吗?



  • @sunnylqm 貌似构造函数的调用好像是如下:
    ** 1.new Foo();这个调用无参构造函数。
    2.new Foo(props) 这个调用一个参数的构造函数。**

    不知道我理解的对不对,望大神解答,谢谢。