[Note] 关于 React 的一些疑点思考

[ddzy]

写在前面

对于 React, 有一些比较难理解的知识点, 在通过阅读源码时, 都可以大概了解.

这里将常见的问题归纳起来(仅代表个人思考)

问题总结

什么是虚拟 DOM?

虚拟 DOM, 实际上就是使用 JS 在其内部维护了一个对象, 是真正的 DOM 对象到 JS 对象的映射. 比如说一个 div 标签可以这么表示:

{
  tag: 'div',
  attr: [],
  children: [
    {
      tag: xxx,
    }
  ],
}

诸如 React、Vue 这样的库, 都在内部维护了一个虚拟 DOM 树, 每次发生更改, 都会使用 diff 算法比对新老 DOM 树之间的差异, 找出更新的部分, 在 commit 阶段应用到真正的 DOM 上. 但是需要注意, React16 之后的 diff 算法比对的是 Fiber.

React 组件的生命周期?

受控组件 & 非受控组件?

• 受控组件, 就是说一个组件的数据、行为都由框架本身来管控
• 就拿最基本的 Input 输入框组件, 如果通过 onChange、onInput 等事件钩子来获取输入框的值, 并且将值保存到 state 中维护, 这时就是受控的; 反之, 直接通过 document.querySelector('input').value 的形式来获取值, 则是非受控的
• React 推荐使用受控组件

shouldComponentUpdate 的作用?

• 在 ClassComponent 类组件进行更新之前, 通过该生命周期来判断当前组件是否需要进行更新
• React 提供了 PureComponent 和 memo 两个方法, 可以实现和 shouldComponentUpdate 一样的功能, 底层都是通过一个浅比较函数来实现的

ref 和 forwardRef 的作用?

• 通过 ref 可以获取到某个组件的实例(ReactElement => ReactElement 实例、DOM => DOM 元素实例)
• 由于 FunctionComponent 是无状态组件, 并且不能被实例化, 所以可以使用 forwardRef 去强制传递一个 ref

key 属性的作用?

• React 在渲染一个列表元素的时候, 需要给每个列表元素添加一个唯一的 key 属性
• 这个 key 会在创建 React 组件实例的时候变为 ReactElement 上的一个属性字段
• 本质上就是为了 diff 算法, 如果组件指定了一个 key 属性, 那么 React 会将这个 key 当作当前组件的匹配标识. 在下次进行 Fiber-Diff 的时候, 如果老的 Fiber 上具有 key 属性, 并且和新的 key 相同, 那么就不会销毁并创建组件

组件通信方式?

setState 是同步还是异步的?