23、React 开发中的反模式与挑战解析

React 开发中的反模式与挑战解析

在 React 开发中，我们常常会遇到一些看似可行，但实际上会在项目发展过程中带来诸多问题的做法，这些就是所谓的反模式。理解这些反模式以及前端开发中面临的各种挑战，对于构建高效、可维护的 React 应用至关重要。

构建 UI 的困难

在构建网页时，如果只是创建一个简单的、类似文档的网页，比如没有搜索框或模态框等高级 UI 元素的基础文章页面，浏览器内置的 HTML、CSS 和 JavaScript 语言通常是足够的。然而，如今大多数应用程序要复杂得多，包含的元素超出了这些原生网络语言最初的设计范围。

以 Jira 这个流行的基于网络的项目管理工具为例，其问题视图包含了问题的标题、描述、附件、评论和关联问题等许多细节，还有用户可以交互的元素，如“分配给我”按钮、更改问题优先级、添加评论等。从表面上看，这个页面似乎有导航组件、下拉列表、手风琴等组件，但实际上它们是开发者使用 HTML、CSS 和 JavaScript 模拟出来的，并非真正的组件。

与理想的 UI 设计工具（如 C++ Builder、Delphi 或 Figma）不同，在网页开发中创建自定义搜索输入框等组件需要进行额外的元素包装、颜色调整、填充和字体设置等操作，创建与搜索框宽度完全匹配的自动建议列表也比想象中更耗费精力。

状态管理

在现代前端开发中，状态管理是一项复杂的任务。前端应用中的状态主要分为远程状态和本地状态。

远程状态是指从远程服务器通过网络获取的数据，通常来自后端服务器或 API。它存在许多挑战：
- 异步性质 ：从远程源获取数据通常是