• React组件生命周期及组件之间的通信


    名词解释

    • state:它是组件的属性,主要用来存储组件自身需要的数据。
    • 虚拟DOM:它是ReactJS中提出的一个概念,是将真实的DOM结构映射成一个JSON数据结构。

    1.组件生命周期

    1.创建阶段

    • getDefaultProps():该方法会返回一个对象,并缓存下来。然后与父组件指定的props对象合并,最后赋值给this.props作为该组件的默认属性。

    2.实例化阶段

    • getInitialState():初始化组件state的值,其返回值会赋值给组件的this.state属性。
    • componentWillMount():业务逻辑的处理都应该放在这里,如对state的操作等。
    • render():渲染并返回一个虚拟DOM。当返回null或false时,表明不需要渲染任何东西。
    • componentDidMount():在该方法中,ReactJS会使用render方法返回的虚拟DOM对象来创建真是的DOM结构。在这里可以对根据虚拟DOM结构而生成的真实DOM进行相应的处理 。

    3.更新阶段

    主要发生在用户操作之后或父组件有更新的时候。

    • componentWillReceiveProps(object nextProps):在该函数中,通常可以调用this.setState方法来完成对state的修改。
    • shouldComponentUpdate(nextProps, nextState):该方法用来拦截新的props或state,然后根据实现设定好的判断逻辑,作出最后要不要更新组件的决定。return一个boolean值。
    • componentWillUpdate(object nextProps, object nextState):当shouldComponentUpdate()返回true时,可以在该方法中做一些更新之前的操作。
    • render:根据一系列的diff算法,生成需要更新的虚拟DOM数据。实践表明,在render中,最后只做数据和模板的组合,不应进行state等逻辑的修改,这样组件结构更清晰。
    • componentDidUpdate:该方法在组件的更新已经同步到DOM中后出发,我们常在该方法中做一些DOM操作。

    4.销毁阶段

    • componentWillUnmount:当组件需要从DOM中移除时,我们通常会做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作。

    2.组件之间的通信

    • 子组件调用父组件的方法:
      只需父组件把要被调用的方法以属性的方式放在子组件上,子组件内部便可以通过“this.props.被调用的方法”这样的方式来获得父组件传过来的方法。
    • 父组件调用子组件的方法:
      子组件被设置为ref之后,父组件就可以通过this.ref.xxx来获取到子组件了。其中xxx为子组件ref的值。

    3.其它tips

    合理使用key属性:
    合理使用key属性有时能减少需要页面渲染时更新的DOM节点。
    如在没有key属性的First和Second组件之间插入一个Third组件,React JS的Diff算法的结果是,First组件不变,先将Second组件进行删除,然后在创建并插入Third组件,最后再创建并插入Second组件。
    如果给上述三个组件都添加上key属性,则算法结果会有所改变:First组件不变,Second组件不变,只是在Second组件之前创建并插入来Third组件。


    最近在学习React Native,重温了一下React组件的生命周期及组件之间的通信。
    以上内容来自《React Native入门与实践》一书的部分读书笔记,BTW,这是一本不错的入门书,讲得很详细。

  • 相关阅读:
    ASP.NET Core 中的管道机制
    常见的 HttpModule
    IIS+Asp.Net Mvc必须知道的事(解决启动/重启/自动回收站点后第一次访问慢问题)
    ASP.NET三剑客 HttpApplication HttpModule HttpHandler 解析
    Js国际化
    MethodImplOptions
    Java守护线程普通线程的例子
    Java启动新线程的几种方式(Runnable、Callable、CompletableFuture)
    Tomcat源码分析(3)-容器Container整体架构
    Tomcat源码分析(2)-连接器Connector整体架构
  • 原文地址:https://www.cnblogs.com/shy-huiying/p/5976442.html
Copyright © 2020-2023  润新知