ReactJS组件的生命周期

  1. 创建阶段：在ReactDom.render()启动之前被调用

    getDefaultProps：获取默认的属性值，处理props的默认值，在React.createClass调用。

  2. 实例化阶段：

    在ReactDom.render()启动之后，会调用下面一系列方法

    1. getInitialState：初始化组件的state值，其返回值会赋给组件的this.state属性
    2. componentWillMount：该方法在render方法之前调用，业务逻辑放在这里去处理
    3. render：根据state值，渲染并返回一个虚拟的DOM
    4. componentDidMount：该方法在render方法之后调用，在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构，组件内部可以通过this.getDOMNode()来获取当前组件的节点
    • state：组建的属性，主要用来存储组件自身需要的数据，每次数据更新都是通过修改state属性的值，ReactJS内部会监听state属性的变化，一旦发生变化，就会主动触发组件的render方法来更新虚拟DOM的结构
    • 虚拟DOM：将真实的DOM结构映射城一个Json数据结构
  3. 更新阶段：主要发生在用户操作之后或父组件有更新的时候，此时会根据用户的操作行为进行相应的页面的调整
    1. componentWillReceiveProps：该方法发生在this.props被修改或父组件调用setProps()方法之后

    调用this.setSate方法来完成对state的修改

    1. shouldComponentUpdate：用来拦截新的props或state，根据逻辑来判断是否需要更新

    返回值为true，需要跟新；false，则不需更新

    1. componentWillUpdate：shouldComponentUpdate返回true的时候执行
    2. render：渲染组件，进行更新

    注意：这里的render并不是将所有的组件都进行更新，而是根据底层的diff算法，生成需要更新的虚拟DOM数据。在该方法中最好不要对state进行修改

    1. componentDidUpdate：组件更新完毕
  4. 销毁阶段：

    componentWillUnmount：销毁时被调用，通常做一些取消事件的绑定、移除虚拟DOM中对应的数据结构、销毁一些无用的定时器等工作

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容