zoukankan      html  css  js  c++  java
  • 理解React的组件

    理解React组件

    虽然一直用React写东西,但却不曾从原生去看待react组件的渲染方式,今天就打算深入探讨。有什么理解不对的欢迎指正

    功能上看React组件

    现在有一个web网站,这个网站可以实现很多功能,我们依据功能,把他们分成一个个小功能碎片,每个小功能碎片需要更多逻辑功能,还可以继续细分。这里React组件就是相当于这样一个个可组合的功能单元,可并列,可嵌套。

    从结构上看React组件

    创建

    一个React组件被创建,包含React nodes和其他react组件。React nodes 用于表现Virtual DOM(虚拟DON)的类HTML元素节点,React中最基础的对象类型。所以Virtual DOM就是React节点和组件建构起来的JavaScript树形结构,用于高效的重构HTML中的真实DOM。

    渲染

    如果一个React组件被渲染,就是生成了这个React组件的class的实例,所以才会有this的指向性问题,与此同时,React节点就会渲染到真实的DOM中,组成新的DON树。

    更新

    根据diff算法,当把React nodes渲染进某一真实DOM节点中时,会清除该真实DOM节点的所有子元素。当子节点有改变时,React会重新渲染React nodes到相同的DOM中。

    事件

    1.React实际上并未直接为React nodes添加事件,它使用的是event delegation事件委托机制。

    “简单地说,事件委托是利用事件流程的程序性行为和单个事件侦听器来处理多个事件目标。事件委托的副作用是事件目标不必在DOM中,因为创建事件以使目标响应事件”

    2.React事件默认在事件冒泡阶段(bubbling)触发

    3.想要阻止事件冒泡,需要手动调用e.stopPropagation() 或e.preventDefault(),不要直接使用return false

  • 相关阅读:
    尽可能装满的背包问题
    mysql的下载与安装
    IDEA中安装ibatis插件
    tomcat启动失败,提示信息:Unable to ping server at localhost:1099
    http响应头
    查看电脑的IP地址及配置
    IDEA中不同项目配置不同JDK
    Navicat for mysql的下载及破解
    java中String的equals()和 ==
    BeanUtils出现Java.lang.NoClassDefFoundError解决
  • 原文地址:https://www.cnblogs.com/ZpandaZ/p/7397121.html
Copyright © 2011-2022 走看看