知乎前端回答合集

[yinguangyao]

飞书文档前端使用了什么技术呢?

打开 F12 开发者工具去源代码里面断点就能大致看出来了。。。

飞书文档 Doc 还是用的 DOM，表格用了自研 Canvas 进行绘制。看了一下多维表格，主要是参考了 Flutter 实现一套基于 Widget 的渲染引擎。

看起来里面有 state 支持数据驱动，应该是模仿的 Flutter。。基于 Widget 的好处在于复用更强，方便多维表格的多视图复用。

除了基础的 richtext、text、icon 这些 Widget，还提供了 Column、Row、Flex、Expanded 这些布局 Widget，在底层实现了一套 Flex 布局。

看起来还实现了一个虚拟列表 Widget，支持用 key 做 diff，还内置支持了离屏渲染。。。

服务端渲染也是基于 Widget，输出了 Widget 的数据结构给浏览器进行 Canvas 渲染，某种程度上接近 React 的 hydrate，比较巧妙。

用 Canvas 实现虚拟列表的难点在哪里？

用 Canvas 实现虚拟列表，意味着要放弃很多 DOM 已经提供好的解决方案。

上面 @Cat Chen 说的排版是一个方面，排版确实难度比较大，除了正常的文本，排版还需要处理各种复杂的场景。比如👪这种通过零宽连接符实现的 emoji 怎么准确判断他的宽度？对一些冷门的文字，比如 "깍" 怎么准确判断宽度？

其次，Canvas 是一个画板，体现在 DOM 里面就只是一个 节点，里面的图形是没有事件的，意味着没办法针对里面的某个元素绑定 click 之类的事件。

如果你需要实现点击列表项跳转，或者 hover 到省略的文本上面 tips 展示全部文本，就需要对事件进行处理，常见的一般就是取色值法和几何计算法。

然后要不要支持搜索功能呢？Canvas 的文本也是绘制的，浏览器自带的搜索无法适用，也需要自行实现对列表数据的查找、背景色高亮等等。那文本的选区又要怎么搞？

这几个问题也并非无解，社区常见的 Canvas 库大都支持了排版和事件，比如 Konva、AntV 等等，但对排版处理大都不够好，没有完全解决上面说的问题。
​

但用 Canvas 也有一定的优势，可以对性能做一定优化，比如通过离屏渲染来减少重复绘制。

之前有人进行了一些实践，可以参考：Canvas 绘制列表的尝试](http://www.alloyteam.com/2015/10/canvas-attempts-to-draw-list/)

有什么react进阶的项目推荐的？

推荐几个和其他回答不一样的，更容易上手学习原理和实践的一些开源项目。

react-starter-kit

这是一个 React SSR 的库，实现上很简单，代码简洁易懂，至少比起 NextJS 要容易的多。可以从这个上手学习 React 服务端渲染，包括样式和路由同构、双端 Webpack 配置、hydrate/dehydrate 等等，可以作为之后学习 NextJS 的辅助。
react-starter-kit

react-fiber-implement

一个实现了 React Fiber 的库，相比 React 里面冗长的源码来说，这个实现也显得很清晰易懂，非常适合入门学习 React Fiber 的实现原理。

[GitHub - tranbathanhtung/react-fiber-implement: re-implement react fiber](​github.com/tranbathanhtung/react-fiber-implement
preact)

如果想学习 React 原理，但是对 React 源码无从下手，完全可以从 preact 上手。尤其是关于虚拟 DOM、Hooks、Diff 算法这部分的，虽然实现上和 React 有差别，但可以知道大致工作原理就够了。

Recoil

Facebook 出品的一个状态管理库，很大程度上利用了 Hook 的能力，以不同于 Mobx 的另一种形式来实现了细粒度的组件更新。可以感受一下比 Redux 更优雅的状态管理。

React-imvc

@工业聚 写的一个同构的 React MVC 框架，支持路由、状态管理、同构、mvc 等等，算是一个集大成的框架。
学习其用法和实现原理，可以提高对 React 项目代码的分层管理能力，怎么在大型项目里面用好 React 技术栈，对状态管理和同构、路由方面也会有更多的认识。

React 技术揭秘

@魔术师卡颂 整理的 React 源码分析教程，是我见过目前讲解 React 源码最好的教程了。要是觉得 preact 和 react-fiber-implement 不够官方，那可以跟着这个教程来一步步学习 React 源码。