我使用 React、React Native 和 NextJS 构建了我的应用程序。吸取了教训。

我开发了一款名为Brisqi的离线优先个人看板应用，并将其发布到 5 个不同的平台上。我启动这个项目有两个目的：学习 React 以及构建一个我一直想要的离线看板应用。我从去年六月开始就一直在开发 Brisqi。

如果你好奇的话，这是我使用的技术栈：

• ReactJS + BlueprintJS + 桌面应用程序的自定义样式。
• React Native + React Native 元素 + Android/iOS 应用的自定义样式。
• 网站采用 NextJS + BulmaCSS。
• Firebase Auth 用于身份验证 + Firestore 用于数据库。
• Google 云功能——处理后端操作。

Electron 框架是实现跨平台的明显选择，因为它周围有良好的生态系统，所以我继续使用它作为底层框架。

以下是我学习并遵循的有关 React 的具体内容，希望对您有所帮助：

• 如果您的应用规模较小，请先从 Context API 开始进行状态管理，并了解其工作原理。这将帮助您熟悉 React 中的 Reducer 模式。一开始不必担心性能，React 足够智能，会为您优化渲染。优化性能或仅在性能成为问题时重新渲染。只有当您觉得应用需要的不仅仅是简单的状态管理时，才迁移到 Redux。

• 了解 Immer 及其工作原理。它是一个以不可变方式修改状态的优秀库。如果状态由嵌套对象组成，它可以直接修改状态的“草稿”，而无需使用展开运算符，从而大大简化了工作。在使用 Context API 实现 Reducer 时，它也非常有用。

• 如果你要迁移到 Redux，请使用Redux Toolkit。它是一款非常棒的工具包，由开发/维护 Redux 的人员开发。

  其官网声明如下：
  “Redux Toolkit 是我们官方推出的、功能齐全的高效 Redux 开发工具集。它旨在成为编写 Redux 逻辑的标准方法，我们强烈建议您使用它。”

• 我觉得这一点比较主观。学习如何有效地使用函数式组件和 Hooks。我所有的应用都是用函数式组件和 Hooks 编写的。我个人觉得它们更容易阅读和理解，而且确实有助于避免使用 HOC 或渲染 props，这对我来说是个加分项。如果你正在启动新项目，不妨开始使用函数式组件和 Hooks。

• 如果有大量数据需要显示，优化 React Native 的性能可能会很棘手。如果您使用列表，请使用 FlatList，而不是使用 map 函数或类似的函数来迭代值。使用 Redux 可以避免不必要的重新渲染。请记住，在 Context API 中，在组件中使用 useContext 每次都会重新渲染该组件及其子组件，除非您在子组件上使用 React.memo。查看此 Github链接了解更多信息。在 Redux 中，如果部分状态未发生变化，使用 useSelector hook 访问该部分状态可以防止重新渲染。

• 说到不必要的重新渲染，学习如何有效地使用React.memo()、useCallback() 和 useMemo()。学习、理解它们，并在性能出现问题时使用它们来避免重新渲染。如果您正在使用 Redux，请学习Reselect库来创建带记忆的选择器函数。所有这些都对我提升 Brisqi 移动应用的性能有很大帮助。如果您首先在 iOS 上开发，可能不会立即发现性能问题，请在 Android 上进行测试。根据我的个人经验，用 React Native 编写的应用在 iOS 上的表现优于 Android。我遵循一条经验法则：如果它在 Android 上性能出色，那么它在 iOS 上的表现可能同样出色甚至更好，但我仍然会在两个平台上进行全面测试。

• 如果可能的话，将组件拆分成更小的组件。较小的组件更容易复用，使用 React.memo() 时更容易操作，更容易管理其中的状态，而且几个月后再查看代码时，代码也更容易阅读和维护。

• 谨慎使用第三方实用程序库。如果您认为自己无法“可靠地”重现某个功能，请使用它们。例如，我从头开始编写了自己的键盘避免/感知视图，因为：1）我可以简化它；2）根据我的需求进行调整；3）使其适用于 Android 和 iOS 平台；4）我可以避免外部依赖。我并不是说其他​​解决方案不够好，它们可能足够好，而且有些确实如此，但更少的依赖性 = 更高的稳定性，因为您对功能了如指掌。

• 对于样式/惯例，请务必保持一致。Airbnb 风格指南可以作为一个很好的起点，但我并非完全遵循他们的说法。例如，我不同意他们关于单引号和双引号用法的观点。为了保持一致，我在所有地方都使用双引号，而他们则同时使用单引号和双引号。

• 保持简单，不要让你的架构过于复杂。在开发过程中逐渐添加新功能。同样，不要过早地进行性能优化，等到它成为问题时再进行优化。

• NextJS 适用于网站或多页应用，而 React（CRA 或手动设置）适用于单页应用。我个人不会尝试将两者适配到一起。这样会更方便一些。

• 当你找到更好的方法时，请不断重构。这是学习过程的一部分。

• 继续学习，不要停下来并与他人分享你的知识。

链接：

• 在Twitter上关注我，了解幕后花絮。
• 布里斯基