标签:接受 界面 tle dom操作 component column 相同 架构 替换
1.组件化
在 MV* 架构出现之前,组件主要分为两种:
就像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.生命周期
*以上内容参考自书目《深入React技术栈》作者 陈屹,建议阅读。
标签:接受 界面 tle dom操作 component column 相同 架构 替换
原文地址:https://www.cnblogs.com/mingtan/p/9033493.html