如果自己开发一个类 react 框架，需要做什么

[shaozj]

如果自己开发一个类 react 框架，需要做什么

特性：

• 组件式
• 声明式
• 函数式

核心功能：

• virtual dom 模型
• 生命周期管理
• hooks
• setState 机制
• diff 算法
• react patch（将 diff 出来的差异更新到 dom 上）
• 事件系统
• fiber
• jsx

react fiber 笔记

fiber 是为了增强 react 对动画、布局、手势的支持。它的首要特性是增量渲染。将渲染工作分割为多个 chunk，让后将其放在多个 frame 中渲染。其他特性包括当更新来时，暂停、终止、重用 work；对不同类型的更新赋予不同优先级；新的并发基元。

• scheduling
  • the process of determining when work should be performed.
• work
  • any computations that must be performed. Work is usually the result of an update (e.g. setState).

fiber 是为了让 react 能发挥调度的优势：

• 暂停 work 并能在之后恢复
• 对不同类型的 work 赋予不同的优先级
• 重用之前完成的 work
• 终止 work 如果不再需要它了

为了完成以上功能，需要把 work 分割为一个个单元。一个 fiber 就是一个 work 单元。
react 组件可以看做一个数据的函数：

v = f(d)

requestIdleCallback 在空闲时间调度低优先级的函数。requestAnimationFrame在下一帧渲染前调度高优先级的函数。需要把渲染工作分割为增量的计算单元，而调用栈是一旦执行就会一直执行到栈为空的，所以不能依赖于调用栈。

将 fiber 看做是一个个尾调用函数，fiber 是一种虚拟栈帧，react 可以控制其执行和暂停。

• fiber 的基础概念看这篇，和下一篇对照着看：https://github.com/acdlite/react-fiber-architecture
• react fiber 参考文章：
  • https://zhuanlan.zhihu.com/p/57346388
  • https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/
  • https://indepth.dev/in-depth-explanation-of-state-and-props-update-in-react/
  • patch 对应 react 中的 effects 或者 effects list
• diff 后的 patch 也可以参考下这篇：https://www.zhihu.com/question/29504639

解决 react 未能很好解决的问题

• 自带状态管理，组件间通信机制
• 更好的异步处理

参考文献

hooks 的原理