zoukankan      html  css  js  c++  java
  • 初步理解React

    1.组件化

    在 MV* 架构出现之前,组件主要分为两种:

    • 狭义上的组件,又称为 UI 组件,比如 Tabs 组件、Dropdown 组件。组件主要围绕在交互 动作上的抽象,针对这些交互动作,利用 JavaScript 操作 DOM 结构或 style 样式来控制。
    • 广义上的组件,即带有业务含义和数据的 UI 组件组合。这类组件不仅有交互动作,更重 要的是有数据与界面之间的交互。
    就像React官网上的描述一样:“每个组件都是独立包装好的,这样也就方便你像搭积木一样组合各种组件来构建复杂的UI界面。”

    2.虚拟DOM

    为了减少消耗性能的DOM操作,React 把真实 DOM 树转换成js对象树,也就是 Virtual DOM。每次数据更新后,重新计算 Virtual DOM,并和上一次生成的 Virtual DOM 做Diff计算对比,对发生 变化的部分做批量更新。

    3.props和setState

    state 与 props 是 React 组件中最重要的概念。如果顶层组件初始化 props,那么 React 会向下 遍历整棵组件树,重新尝试渲染所有相关的子组件。而 state 只关心每个组件自己内部的状态, 这些状态只能在组件内改变。把组件看成一个函数,那么它接受了 props 作为参数,内部由 state 作为函数的内部参数,返回一个 Virtual DOM 的实现。

    4.Diff算法

    Tree Diff:只会对相同层级的 DOM 节点进行比较,即同一个父节点下的所有子节点。

    Component Diff:如果是同一类型的组件,按照原策略继续比较 Virtual DOM 树即可。如果不是,则将该组件判断为 dirty component,从而替换整个组件下的所有子节点。

    Element Diff:当节点处于同一层级时,diff 提供了 3 种节点操作,分别为插入/移动/删除。

    5.生命周期

    • 当首次挂载组件时,按顺序执行 getDefaultProps、getInitialState、componentWillMount、 render 和 componentDidMount。
    • 当卸载组件时,执行 componentWillUnmount。
    • 当重新挂载组件时,此时按顺序执行 getInitialState、componentWillMount、render 和componentDidMount,但并不执行 getDefaultProps。
    • 当再次渲染组件时,组件接受到更新状态,此时按顺序执行 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。

    *以上内容参考自书目《深入React技术栈》作者 陈屹,建议阅读。

    危楼高百尺,手可摘星辰。不敢高声语,恐惊天上人。
  • 相关阅读:
    网络爬虫的基本原理(一)
    灵光一闪-软件应用
    sql语句变量定义和样例
    windows+linux环境部署搭建
    jdk1.6安装
    系统部署
    tomcat部署
    maven各种插件在总结
    maven项目tomcat部署问题
    两种数据源
  • 原文地址:https://www.cnblogs.com/mingtan/p/9033493.html
Copyright © 2011-2022 走看看