拥抱未来：2021 年 React 项目的最佳和最差实践

2021 年 React 项目推荐的和应该放弃的技术方案

对于 React 开发者来说，2021 年标志着一个激动人心的时代，带来了众多令人兴奋的新技术和最佳实践。然而，也有一些过时的技术方案应该被抛弃。为了帮助您在项目中做出明智的决策，我们汇编了 2021 年 React 项目推荐的和应该放弃的技术方案列表。

推荐的技术方案

1. Tailwind CSS
Tailwind CSS 是一种实用优先的 CSS 框架，提供了广泛的可定制选项，同时保留了原生的 CSS 感觉。它的模块化性和灵活性使其成为 React 项目的理想选择。

2. TypeScript
TypeScript 是一种超集 JavaScript，添加了类型检查和静态分析功能。这有助于提高代码的可维护性和可靠性，使其成为大型 React 项目的绝佳选择。

3. Zustand
Zustand 是一个轻量级的状态管理库，采用 Redux 的概念，但更简单易用。它非常适合管理 React 组件中的局部状态。

4. Apollo Client
Apollo Client 是用于 GraphQL 的高级客户端，提供开箱即用的数据管理、缓存和查询功能。它简化了构建数据驱动的 React 应用程序的过程。

5. React Query
React Query 是一个基于承诺的、无状态的查询管理库，专为 React 应用程序而设计。它使管理异步数据请求变得轻而易举。

应该放弃的技术方案

1. ReactDOM.render
ReactDOM.render 是一个过时的 API，已被 ReactDOM.createRoot 替换。后者提供了一些额外的功能，例如并发渲染和 Suspense，并支持 React 18 中的 Concurrent Mode。

2. 根字体大小修改
在页面初始化时修改根字体大小然后全部使用 rem 布局的做法已过时。它会导致在不同设备上出现可访问性问题，尤其是在 iPad 上。

3. jQuery
jQuery 是一种过时的 JavaScript 库，它不再是 React 项目的必要组件。React 自带了功能强大的内置 DOM 操作功能，可以替代 jQuery。

4. 纯函数组件中的副作用
在纯函数组件中使用副作用（例如使用 useState 或 useEffect）的做法很糟糕。这会破坏组件的无状态性质，导致难以调试的问题。

5. 未控制的组件
未控制的组件会随着时间的推移导致应用程序状态管理出现问题。相反，请使用受控组件，在 React 组件中维护状态并将其传递给子组件。

结论

通过遵循这些建议，您可以确保您的 2021 年 React 项目采用最先进的技术方案，并避免使用过时的技术。这将导致更强大、更可维护和更易于使用的应用程序。