最后，转述从Preact回到React的故事
首先
这是 KWC Advent Calendar 2022 的文章。
我是住在冲绳县且负责 KWC 前端开发的 @kwc_sunagawa。
虽然我在2019年4月搬到东京并加入了KWC，但由于远程工作成为了标准化，我目前回到冲绳全职远程工作。
在本文中，我将讲述选择 Preact 进行新开发时遇到了各种问题，最终决定回到 React 的经过。
Preact 是什么？
Preact 是一个旨在提高性能的库，通过仅提取 React 的主要 API 并减小包的大小。
包裹的大小是4KB1，与React的44.5KB2相比，不到十分之一的大小。
此外，由于使用了React的主要API，可以利用React生态系统中的UI组件库和测试库等。
这里详细记录了与React的区别。
听到这些，如果有接触过React的人，会觉得这是一个无需额外知识就能开发高性能单页面应用程序的梦幻工具。然而，由于在引入过程中仍然存在困难，我将为您介绍一下。
采用Preact的项目概述和选择原因。
这个引入了Preact的项目是为了开发一个新的注册表单，实现一个比较简单的单页面应用（SPA），只是将用户输入内容发送到后端API。
我们有两名前端工程师，都有React的经验。
因此，我們根據當時的npm趨勢增長率、學習成本、基準測試和文檔豐富程度等方面進行比較，並決定選擇 Preact 這個輕量級的前端框架。
如果遇到任何问题，方便转向有经验的 React，这也是一个重要的优点。
使用Preact时遇到的问题。
在实际进行开发时，我们一开始进行了PoC测试，并且一切进展顺利，没有出现大问题。然而，由于出现了以下细小的Bug，我们不得不重新回到React。
SVG导入失败
使用React，你可以将SVG文件作为ReactComponent进行导入，
但是Preact中没有这个功能，因此你需要直接使用标签进行编写。
import { ReactComponent as HomeIcon } from "../public/images/Circle.svg"
const Example = () => {
return <HomeIcon />
}
const Example = () => {
return (
// Reactでは属性をキャメルケースで書くが、Preactではケバブケース(SVGの属性そのまま)になる
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<circle fill="#000" stroke-width="2" stroke-linejoin="round" cx="24" cy="24" r="20" />
</svg>
)
}
由于这个规范的差异，我们无法直接使用以前使用的图标组件，不得不进行一些工作，比如使用Webpack的loader等。然而，由于本次项目还使用了Storybook和Jest，因此它们的构建配置和兼容性并不很好，导致应用程序中的图标能够正常显示，但在Storybook中却无法显示，而且单元测试也无法通过等问题出现了。关于那时的应对措施，我将在另一篇文章中介绍。
选择错误的生态系统
要在 Preact 上使用 React 生态系统，需要使用一个名为 preact-compat 的库。但是，即使使用 preact-compat 进行兼容处理，也不能完全保证与 React 的行为相同，可能会导致调试变得困难。因此，我使用了 Preact 提供的 preact-router 而不是平常使用的 react-router。
这是完全的调查不足，但preact-router只具备基本的路由功能，不能很好地处理屏幕滚动控制和中间件使用等稍微复杂的实现。
? 注意：这不是一个与 React Router 兼容的 Preact 版本。preact-router 只是一个简单的 URL 路由，不为您进行协调。
如果您正在寻找更复杂的解决方案，如嵌套路由和视图组合，只要在 preact/compat 中进行别名设置，react-router 与 preact 配合得很好。
技能不足
在使用Preact过程中，我遇到了许多困难，但主要问题是生态系统之间的兼容性问题。
对于使用Preact，我认为需要更谨慎地选择生态系统。
此外，我认为如果有足够的前端技能，在遇到任何问题时都能够自行解决，就能更好地利用它。
我将继续努力提升。m(_ _)m
从Preact迁移到React
由于Preact相关调查所花费的时间成为了负担，所以我们决定转向React。
过渡的时期
我们之前开发的表单共有12个页面，但由于它基本上是按照React的写法完成的，我们只花了大约两周的时间就成功进行了迁移。
在进行迁移过程中，我们选择了Vite作为构建工具，并将路由库改为React Router。
在转向React时遇到了困难
在这次从Preact迁移到React的过程中，我们选择采用了React版本v17。
截至2022年12月，因为Preact反映了React v15和v16的变化，
所以在迁移的时候，useEffect发生了破坏性变更，导致了一些bug的产生。
由于需要逐个修复处理，所以这个修复工作花费了一些时间。
关于React的重大变更，请参考每个版本发布的文章。
如果要从现在开始使用 Preact
这次由于技能不足，无法充分发挥 Preact 的优势，但是通过这次挑战，我认为我能够加深对 React 的了解。
由於 Preact 的開發目標是與 React 相容，因此，如果能夠熟練地使用它，就有可能以較低的導入成本來建立具有高性能的應用程式。為了能夠實現這一點，我認為在開發過程中需要注意版本和生態系統之間的相容性。
最后
希望这篇文章能对任何人有所帮助。
如果发现错误或者有任何更好的建议，非常欢迎在评论中提出。谢谢！
KWC 2022 年圣诞倒数日历仍在继续！请期待明天的投稿！
