Vue vs React

Vue 和 React 的优点分别是什么？

生命周期

constructor -> getDerivedStateFromProps -> componentDidMount -> shouldComponentUpdate -> getSnapshotBeforeUpdate -> componentDidUpdate -> componentWillUnmount

运行实例：

DOM
    真实DOM节点
-------
effect
    每个workInProgress tree节点上都有一个effect list
    用来存放diff结果
    当前节点更新完毕会向上merge effect list（queue收集diff结果）
- - - -
workInProgress
    workInProgress tree是reconcile过程中从fiber tree建立的当前进度快照，用于断点恢复
- - - -
fiber
    fiber tree与vDOM tree类似，用来描述增量更新所需的上下文信息
-------
elements
    描述UI长什么样子（type, props）

执行阶段： React setState 之后，将会运行 differ 算法创建更新，将更新任务推入更新队列。Fiber 负责调度任务，如果有优先级较高的任务插入，将生成 workInProgress tree 保存快照，可以继续执行时则恢复快照继续执行。

// 第1阶段 render/reconciliation，可中断
componentWillMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate

// 第2阶段 commit，不可中断
componentDidMount
componentDidUpdate
componentWillUnmount

React 运行过程

Fiber

React在一些响应体验要求较高的场景不适用，比如动画，布局和手势。根本原因是渲染/更新过程一旦开始无法中断，持续占用主线程，主线程忙于执行 JS，无暇他顾（布局、动画），造成掉帧、延迟响应（甚至无响应）等不佳体验。React Fiber 能够解决主线程长时间占用的问题。Fiber 把渲染/更新过程拆分为小块任务，通过合理的调度机制来控制时间（更细粒度、更强的控制力）。

对开发者的影响

• componentWillMount,componentWillReceiveProps,componentWillUpdate几个生命周期方法不再安全，由于任务执行过程可以被打断，这几个生命周期可能会执行多次，如果它们包含副作用(比如Ajax)，会有意想不到的bug。React团队提供了替换的生命周期方法。建议如果使用以上方法，尽量使用纯函数，避免以后踩坑。
• 需要关注react为任务片设置的优先级，特别是页面用动画的情况。避免出现低优先级任务延迟太久执行或永不执行的 bug。优先级大概是：文本框输入 > 本次调度结束需完成的任务 > 动画过渡 > 交互反馈 > 数据更新 > 不会显示但以防将来会显示的任务

完全理解React Fiber

React Fiber

React Fiber是什么

Portal

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

React.createPortal 及 Modal 的新实现方式

Mixins、HOC、React Hooks

从Mixins到HOC再到React Hooks

Hooks

useState

可以用 useEffect 模拟 setState 的回调

useEffect

• 与 class 组件不同的是，useEffect 允许你把相关的业务逻辑放在一个 effect 函数里，而不是散落在各个生命周期中
• 浅比较，当依赖数组含函数、数组、对象等引用类型时，旧值比对时，总会返回 true。这时需要借助 useCallback 或 useMemo 去缓存旧值。

useCallback

当需要缓存组件时，配合 React.memo（当 props 改变时才重新渲染）使用

更新机制

setXXX 触发组件更新，函数被重新执行，

useRef

组件间通信

• 父子间：props
• 子父间：往子组件传回调函数
• 其他：store、context（生成/消费）

key 的作用

key 是给每一个 vnode 的唯一 id,可以依靠 key,更准确, 更快的拿到 oldVnode 中对应的 vnode 节点，高效和准确的更新节点。