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技术栈》作者 陈屹,建议阅读。