事情的起因是，有一天，突然看到一个贼吃我颜的 UI 组件库 shadcn/ui，实在是太喜欢了 😍。

于是，打算用这个 UI 库做个东西，刚好最近要做一个词云相关的网站，起初是打算用 Vue 实现来着，但是看了看这个 UI 库不支持 Vue ，但支持 React ，但我还从未使用 React 开发过任何东西，上次学习还是 3 年前的事了。然后，我做了一个决定就用 React 来实现啦！边学习边实现！

但中途，又发现了一个问题，我想要一个多选的下拉框，但是这个 UI 库里没有，我真的是……，只能弃船转向 Antd 了。不得不说，Antd 组件的功能是真的多～

然后就一步一步开发功能，功能也不多，开发起来还算容易。中途接触到了 styled-components 用来在 React 写 CSS ，挺有意思的，而且支持动态属性传值，这点比 Vue 方便不少。还有就是 TS 的支持，React 的生态还是强大！开发起来实在是方便至极！

有一个功能需要跨组件通信，然后就去接触到了 Redux ，翻了翻文档，发现了好多 Vuex 的 “影子” ，哈哈哈。搭配官方推荐的 react-redux ，着实不错。然后叭，遇到一个问题，在一个组件内通过 dispatch 更新 store 中的数据，这里组件内部也用到了这个数据，就导致组件循环更新，死循环了…

然后，就去了解了一下 React 的更新机制：每当组件上的属性发生变化时，都会从当前组件开始，自上而下，重新渲染一遍。store 里的数据更新后，触发当前组件重新渲染，然后又调用了 dispatch ，然后又更新 store ，然后又重新渲染… 结果就陷入更新死循环了。我想出的解决方案就是，把更新 store 的操作放在父组件里，效果果然不错。其中还涉及到几个 hook 的使用：useEffect、useCallback 和 useMemo。useEffect 用作在生命周期的挂载和卸载阶段使用，其他俩用作缓存函数计算值，可以有效提高超大耗时函数带来的性能问题。

最后一个难点是，解析词法的时候，如果文本过大会导致页面卡死。想出来的解决方案是，按 1w 个字符进行分段解析，解析文本内容长度与解析速度的关系大约是 35:1，也即每 35 个字符的解析时间大约需要 1ms 。然后用一个函数封装一个异步队列，每分析完一段后，延时 200ms 后再接着分析。速度快多了，而且页面不会卡死了，我真是一个小天才！嘿嘿 😁

最后的效果如下：

对于 React 的看法：对于我这个初学者而言，还不算把 React 用到出神入化叭，但是能明显的感知到，如果你接触过组件式的开发，突然上手 React 是很容易的。而且没有像 Vue 里提供了过多的 API 需要记，基本都是一些和原生 JS 类型的语法，本质还是 JS 。之前总听说 React 的学习曲线比较陡峭，比 Vue 难些，但是在学完 Vue 后，再看 React ，会发现好多 Vue 的 “影子”。我觉得这些类似的库，不讨论借鉴与抄袭，对于开发者而言是很有利的。如果让你从 Vue 转到 React ，还是不难的。后续可以再学习些 React 底层原理相关的知识，争取也能把 React 整个渲染机制摸透，这样简历里又能多写一项技术栈了，哦耶 ✌️。