美文网首页全栈记
3 React组件的生命周期

3 React组件的生命周期

作者: 官清岁月 | 来源:发表于2019-05-13 08:28 被阅读0次

    1、生命周期 -> 16.3版本前

    (1).默认属性/属性校验 -> constructor(){} -> 组件挂载前 -> render(); -> 组件挂载完成 -> 组件运行时 

    状态更新:state改变 -> showComponentUpdate(); -> return true -> 组件更新前 -> render(); -> 组件更新完成;

    父向子组件传值:props改变 -> componentWillReceiveProps();//子组件接收props函数 -> 判断 -> xx

    组件卸载:componentWillUnmount();//组件将要卸载的时候触发;

    (2).componentDidMount(){}; -> 状态state、发送ajax获取数据;

    [1].componentWillMount();//可以操作state,ajax,但是其与更高级的库、React Native共同使用会有冲突,官方不建议使用;

    [2].componentWillUpdate();//其操作state, ajax,下面还有render();函数,其会进行循环操作,最终导致栈溢出;同理render();函数也不能操作state,ajax;主要有两个地法用到了,也会导致栈溢出;

    [3].componentWillReceiveProps();//第一次被挂载的时候不执行,之后才执行 -> 官方也不建议;

    (3).React 16.3版本 -> 重要节点:16.3版本后生命周期进行了修改,但是还没完全实施,17版本后就全部使用了新的生命周期; -> 建议16.3前使用旧的,16.3版本后使用新的即可;

    新版生命周期废弃掉了:componentWillMount();componentWillUpdate();componentWillReceiveProps();

    补充:constructor(){};类里面的构造函数,很多人都认为其不是生命周期钩子函数 -> 官方认可其是生命周期的一部分,React.component是一个抽象类;

    2、新版生命周期:

    相关文章

      网友评论

        本文标题:3 React组件的生命周期

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