初步理解React

Posted 2020-11-07 明潭

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