大家好，我是 ConardLi。

今天我们来聊 React，React 已经风靡前端届很长一段时间了，在这段时间里它发展了一个非常全面而强大的生态Webpack系统。大厂喜欢在大型的前端项目中选择 React，它的生态功不可没。

今天的文章，我们可视化音乐软件将从可视化数据图表状态管理热镀锌钢管国标厚度、样式和动画、路由、代码风格等多个方面来看看 React 最新的生态，希望你以后在做技术选型的时候能够有所帮助。

创建 React 项目

2022 年的 React 生态

对于大多数 React 初学者来说，在刚刚redux工作流程开始学习 React 时如何配置一个 React 项目往往都会感到迷惑，可以选webpack性能优化择的框架有很多。React 社区中大多数会给推荐 Facebook 的 create-react-ap热镀锌和冷镀锌的区别p (CRA)。它基本上零配置，为单元测试能发现约80的软件缺陷你提供开箱即用的简约启动和运行 React 应用程序。

2022 年的 React 生态

但现在来看，CRA 使用的工具过时了 — 从而导致我们的开发体验变慢。Vite 是近期最受欢迎的打包库之一可视化编程，它具有令人难以置信的开发和生产速typescript有必要学吗度，而且也提供了一些模板webpack原理（例如 React、React + TypeScript）可以选择。可视化管理

2022 年的 React 生态

如果你已很经熟悉 React 了，你可以选择它最流行的框架之一作为替代：webpack配置Next.js 和 Gatsby.js。typescript官方文档这两个框架都基于 React 建立，因此你应该至少熟悉了 Re可视化分析act 的单元测试集成测试系统测试基础知识再去使用。这个领域另一个流行的新兴框架是 Remtypescript官方文档ix，它在 2022 年绝对值得一试。单元测试常用方法

2022 年的 React 生态

虽然 Next.js 最初是用来做服务端渲染的，而 Gatsby.js 主要用来做静态站点生成（例如Webpack博客和登录页面等静态网站）。然而，在过去几年里，这两个框架之间一直在互相卷…

Next.js 可以支持你生成静态站点，而 Gatsby.js 也支持了服务端渲染。不过就我个人的使用体验而言，我会觉得 Next.js 更好用一点。

如果你只想了解webpack官网中文一下 create-react-app 这些工具在后台的单元测试家长评语工作原理，建webpack热更新原理议尝试一下自热镀锌槽钢己从头开始配置一个 React 项目。从一个简单的 HTML JavaScript 项目开始，并自己添加单元测试用例 R单元测试常用方法eact 及其支持工具（例如 Webpack、Babel）。这并不是你在日常工作中必须要做的事情，但这是了解底层工具实现原理的一个很好的方式。

建议：

  • 优先使用 Vite 创建 React 客户端应用
    • CRA 备选redux工作流程
  • 优先使用 Next.js 创建 React 服务端渲染应用
    • 最新单元测试评语怎么写技术：Remix
    • 仅创建静态站点备选 Gatsby.js
  • 可选的学习经验：从0自己搭建一个 React 应用。

链接：

  • create-react-app：github.com/facebook/cr…
  • Vite：github.com/vitejs/vite
  • Next.js：github.com/vercel/next…
  • Gatsby.jtypescript有必要学吗s：g可视化工具ithub.com/gatsbyjs/ga…
  • Remix可视化管理：github.com/remix-run/r…

阅读：

  • 《React 基础》
  • 《了解为什么像 React 这样的框架很重要》
  • 《如可视化音乐何创建现代 JavaScript 项目》
  • 《Gatsby vs. Next.js vs热镀锌槽钢. Remiwebpack是什么x》
  • 《React 框架运行时优化方案的演进》

状态管理

2022 年的 React 生态

React 带有两个内置的 Hooks 来管理本地状态：useSta单元测试常用方法tetypescript官网 和 useReducer。如果需要全局状态管理，可以选择加入 React 内置的 useCont单元测试是什么ext Hook 来将 pro热镀锌钢管国家标准ps可视化是什么意思 从顶层组件传递到底层组件，从而避免 props 多层透传的问题。这三个 Hoo热镀锌槽钢ks 足以让你实现一个强大的状态管理系统了。

如果你发现自己过于频繁可视化地使用 React 的 Context 来处理共享/全局状态，你一webpack是什么定要看看 Redux，它是现在最typescript官网流热镀锌钢管国标厚度行的状态管理库。它允许你管理应用程序的全局状态，任何连接到其全局单元测试是什么存储的 React 组件都可以读取和修改这些状态。

2022 年的 React 生态

如果你碰巧在用 Re单元测试中设计测试用例的依据是dux，你一定也应该查看 Redux Toolkit。它是基于 Redux 的一个很棒的 API，极大地改善了开发者使用 Redux 的体验。

作为替代方案，如热镀锌钢管理论重量表果你喜欢用全局存储可视化大屏的思想管理状态，但不喜欢 Redu可视化音乐软件x 的处理方式，可以看看其他流行的本地状态管理解决方案，例如 Zusand、Jotai、XState 或 Recoil 。

另外，如果你想拥有和 Vue.js 一样的开发体验，建议看看 Mobx 。

建议：

  • 用 useState/useReducer 处理共享状态
  • 选择性使用 useContext 管TypeScript理某些全局状态
  • 用 Redux(或另一种选择) 管理全局状态

链接：

  • Redux：redux.js.org/
  • Mobx：githwebpack原理ub.com/mobxjs/mob单元测试集成测试系统测试x
  • Zusand：github.com/pmndtypescript有必要学吗rs/zust…
  • Jotai：github.com/pmndrs/jota…
  • XState：github.com/statelyai/x…
  • Recoil：github.com/facebookexp…

阅读：

  • 《useReducer、useState、useContext 使用指南》
  • 《React 体系下关于 Mobx 与 Redux 的一些思考》
  • 《Facebook 新一代 React 状态管理库 Recoil》
  • 《使用 React&Mobx 的几个最佳实践》

远程数据请求

2022 年的 React 生态

React 的热镀锌内置 Hooks 非常适合 UI 状态管理，但当涉及到单元测试远程数据的状态管理（也包括数据获取）时，我建议使用一个专门的数据获取库，例如 Rewebpack原理act Query，它自带内置的状态管理功能。虽然 React Query 本身的定位并不是一个状态管理库，它主要用于从 API单元测试常用方法 获取远程数据，但它会为你处理这些远程数据的所有状态管理(例如缓存，批量更新)。

2022 年的 React 生态

React Query 最初是为使用 REST API 而设计的webpack性能优化，但是现在它也支持了 GraphQL。然而如果你正在为你的 React 项目寻找专门的 GraphQL 库，我还是推荐你热镀锌钢管国家标准去看看 Apollo Client（当前最流行的）、urql（轻量级）或 Relay（Facebook 维TypeScript护）。

如果你已经在使用 Redux，并且想要在 Redux 中添加集成状态管理的数据请求功能，建议你看看 RTK Querywebpack官网中文，它将数据请求的功能更巧妙的集成到 Redux 中。

建议：

  • React Query（REST API、GraphQL API 都有）
  • Apollo Client（只有 GraphQL可视化管理 API）
  • 可选的学习经验：了解 React Query 的工作原理

链接：

  • React Query：react-query.tanstack.com/
  • Apollo Client：www.apollograwebpack是什么phql.redux工作流程com/docs/react/
  • urql：formidable.com/open-source…
  • Relay：github.com/facebook/re…
  • RTK Query：redux-toolki热镀锌钢管规格型号表t.js.org/rtk-query/o…

阅读：

  • 《React Query 的工作原理》
  • 《本地热镀锌和远程数据的 React 状态webpack热更新原理的一切》

路由

2022 年的 React 生态

如果你使用的是像 Next.jTypeScripts 或 Gatsby.js 这样单元测试用例的 React 框架，那么路由已经为你处理好了。但是，如果你在没可视化音乐有框架的情况下使用 React 并且仅用于客户端渲染（例如 CRA），那么现在最强大和流行的路由库是 React Router。

链接：

  • React Router：reactrouter.com/

阅读：

  • 《深入 React-Router 实现原理》

样式/CSS

在 React 中有很多关于 样式/CSS 的选项和意见，作为一个 React 初学者，可以使用一个带有所有 CSS 属性的样式对象作为 HTML 样式属性的键/值对，从内联样式和基本的 CSS 开始就可以。

const ConardLi = ({ title }) =>
  <h1 style={{ color: 'blue' }}>
    {title}
  </h1>

内联样webpack性能优化式可以在 React 中通过 JavaScript 动态添加样式，而外部 CSS 文件可以webpack是什么包含 React 应单元测试能发现约80的软件缺陷用的所有剩余样式：

import './Headline.css';
const ConardLi = ({ title }) =>
  <h1 className="ConardLi" style={{ color: 'blue' }}>
    {title}
  </h1>

如果你的应用越来越大了，建议再看看其他选项。首先，我建议你将 CSS Module 作为众多 CSS-in-CSS 解决方案的首选。CRA 支typescript有前途吗持 CSS Module ，并为提供了一种将 CSS 封装到组件范围内的模块的方法。这样，它就不会意外泄露到其单元测试常用方法他 React 组件的样式中typescript什么意思。你的应用的某些部分仍然可以共Webpack享样式，但其他部分不必访单元测试主要的测试技术不包括问它。在 React 中， CSS Module 通常是将 CSS 文件放在 React 组件文件中：

import styles from './style.module.css';
const ConardLi = ({ title }) =>
  <h1 className={styles.headline}>
    {title}
  </h1>

2022 年的 React 生态

其次，我想向你推荐所谓的 styled components ，作为 React 的众多 CSS-in-JS 解决方案之一。它通可视化音乐过一个名为 styles-components(或者其他例如 emotion 、stitches)的库来单元测试常用方法实现typescript官网的，它一般将样式放在 React 组件的旁边：

import styled from 'styled-components';
const BlueHeadline = styled.h1`
  color: blue;
`;
const ConardLi = ({ title }) =>
  <BlueHeadline>
    {title}
  </BlueHeadline>

2022 年的 React 生态

第三，我想推荐 Tailwind CSS 作为最流行的 Utility-First-CSS 解决方案。它提供了typescript什么意思预定义的 CSS 类，你可以在 React 组件中使用它们，而不用自己定义。这可以提升一些效率，并与你的 Reactwebpack热更新原理 程序的设计系统保持一致，但同时也需要单元测试评语怎么写了解所有的类：

const ConardLi = ({ title }) =>
  <h1 className="text-blue-700">
    {title}
  </h1>

使用热镀锌钢管国家标准 CSS-in-webpack是什么CSS、CSS-in-js 还是函数式 CSS 由你自己决定。所有的方案在单元测试集成测试系统测试大型 React 应用中都适用。最后一点提示：如果你想在 React 中有条件地应用一个 className，可以使用像 clsx 这样的工具。

建议：

  • CSS-in-CSS 方案： CSS可视化音乐 Modules
  • CSS-in-JS 方案： Styled Compo可视化nents （目前最受欢迎）
    • 备选： Emotion 或 Stwebpack是什么itches
  • 函数式 CSS：Tailwind CSS
  • 备选：CSS 类的条件渲染：clsx

链接：

  • styled-comp单元测试中设计测试用例的依据是one可视化图表nts：www.robinwieruch.de/react-style…
  • Tailwind CSS：tailwindcss.com/typescript有前途吗
  • cltypescript有必要学吗sx：github.com/lukeed/clsx

阅读：

  • 《React中CSS-in-JS的最佳实践》
  • 《React中的CSS样式》
  • 《10种现在流行的CSS解决方案》：
  • 《CSS-in-JS vs CSS》
  • 《看完了 2021 CSS 年度报告，我学到了啥？》

组件库

对于初学者来说，从零开始构建可复用的组webpack热更新原理件是一个很好的学习经验，值得推荐。无论它是 dropdown、radio button 还是 checkbox ，你最终都应该知道如何创建这些UI组件组件。

2022 年的 React 生态

然而，在某些时候，你想要使用一个UI组件库，它可以让你访问许多共享一套设计系统的预构建组件。以下所有的UI单元测试中设计测试用例的依据是组件库都带有基本组件，如 Buttons、typescript官方文档Dropdowns、Dialogs 和 Lists：

  • Material UI (MUI) (最流行)：material-uReduxi.com/
  • Mantine (最推荐)：mantine.dev/
  • Chakra UI (最推荐)：chakra-ui.com/
  • Ant Design（国内最流行）：ant.design/
  • Radix：www.radix-ui.com/
  • Primer：primer.style/react/
  • NextUI：nextypescript知乎tui.org/
  • Tailwind UI (收费的)：www.tailwindui.com/
  • Semantic UI：www.robinwieruch.d热镀锌钢管e/react-seman…
  • React Bootstrap：react-bootstrap.github.io/

尽管所typescript官方文档有这些UI组件库都带有许多内部组件，但它们不能让热镀锌和冷镀锌每个组件都像只专注于一个UI组件的库那样强大。例如 react-table-library可视化数据图表 提供了非常强大的表格组件，同时提供了主题（例如 Material UI），可以很好的和流行的UI组件库兼容。

阅读：

  • 《从零到一搭建React组件库》

动画库

2022 年的 React 生态

Web 应用中的大多数动画都是typescript是干嘛的从 CSS 开始的。最终你会可视化音乐软件发现 CSS 动画不能满足你所有的需求。通常开发者会选择 React Tr热镀锌钢管国家标准ansition Group，这样他们就可以使用 React组件来执行动画了，React 的其他知名动画库有：

  • Framer Motion (最推荐)：www.framer.com/motion/
  • react-spring (也推荐一下)：gWebpackithub.com/re热镀锌钢管国标厚度act-sprin…
  • react-motion：github.com/chenglou/re…
  • react-move：github.com/sghalReduxl/reac…
  • Animated (React Native)：facebook.github.io/react-nativ…

可视化图表

2022 年的 React 生态

如果你真的想要自己从头开始开发一些图表，那么就没有办法绕过 D3 。这是一个很底层的可视化库，可以为你提供开发一些炫酷的图表所需的一切。然而，学习 D3 是很有难度的，因此许多开发者只是选择一个 React 图表库，这些库默认封装了很多能力，但是缺失了一些灵活性。以下是一些流行的解决方案:

  • Rechwebpack配置arts：recharts.org/
  • react-c热镀锌hartjs：github.com/reactchartj…
  • nivo：nivo.rocks/
  • visx：github.com/airbnb/visx
  • Victory：formidable.com/o单元测试pen-source…

表单

2022 年的 React 生态

React 现在最受欢迎的表单库是 React Hook Form 。它提供了从验证（一般会集成 yup单元测试 和 zod）到提交到表单状态管理所需的一切。之前流行的另可视化音乐软件一种方式是 Formik。两者都是不错的解决方案。这个领域的另一个选择是 Reactypescript有必要学吗t Final Form 。毕竟，如果你已经在使用 React UI组件库了，你还可以查看他们的内置表单解决方案。

建议：

  • React Hook For可视化音乐软件m
    • 集成 yup 或 zod 进行表单验证
  • 如果已经在使用组件库了，看看内置的表单typescript是干嘛的能不能满足需求

链接：

  • React Hook Form：react-hook-form.com/
  • Formik：github.com/jaredpalmer…
  • React Fwebpack性能优化ina可视化是什么意思l Form：final-form.or可视化数据图表g/react

阅读：

  • 《React 开源表单组件最佳实践，原理解析，设计分析》可视化大屏

类型检查

React 带有一个名为 PropTypes 的内部类型检查。通过使用 PropTypes，你可以为你的 React 组件定义 props。每当将类型typescript有必要学吗错误的 prop 传递给组件时，你可以在运行时收到错误消息：

import PropTypes from 'prop-types';
const List = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>
List.propTypes = {
  list: PropTypes.array.isRequired,
};

2022 年的 React 生态

在过去的几年里，PropTypes 已经不那么流行了，Prop热镀锌钢管理论重量表Types 也已经不再包含在 React 核心库中了，现在 TypeScript 才是单元测试是什么最佳的选择：

type Item = {
  id: string;
  title: string;
};
type ListProps = {
  list: Item[];
};
const List: React.FC<ListProps> = ({ list }) =>
  <div>
    {list.map(item => <div key={item.id}>{item.title}</div>)}
  </div>

阅读：

  • 《TypeScript 终极初学者指南》：mp单元测试家长评语.weixin.qqwebpack是什么.com/s/6DAyXFHIM…
  • 《如何优雅地在 React 中使用TypeScript》

代码风格

2022 年的 React 生态

对于代码风格单元测试集成测试系统测试，基本上有两种方案可以选择：

如果你想要一种统一的、通用的代码风格，在你的 React 项目中使用 ESLint 。像 ESLint 这样的 linter 会在你的 React 项目中强制执行特定的代码风格。例如，你可以在 ESLint 中要求遵循一个流行的风格指南typescript知乎(如 Airbnb 风格指南)。之后，将 ESLint 与你的IDE/编辑器集成，它会指出你的每一个错误。

如果你想采用统一的代码格式，可以在 React 项目中使用 Prettier。它是一个比较固执的代码格式化器，可选择的配置很少。你也可以将它集成到编辑器或IDE中，以便在每单元测试用例次保存文件的时候自动对代码进行格式化。虽然 Prettier 不能取代 ESLint，但它可以很好地与 ESLint 集成。

建议：

  • ESLint：eslint.org/
  • Prettier：github.c热镀锌和冷镀锌om/prettier/pr…

阅读：

  • 《React 代码风格指南》
  • 《Airbnb 样式指南》

身份认证

2022 年的 React 生态

在 React 应用程序中，你可能希望引入带有注册、登录和退出等功单元测试能的身份验证。通常还需要一些其他功能，例如密码重置和密码更改功能。这些能力远远超热镀锌出了 React 的范畴，我们通常会把它们交给服务typescript什么意思端去管理。

最好的学习经验是自typescript和js的区别己实现一个带有身份验证的服务端应用(例如 GraphQL 后端)。然而，由于身份验证有单元测试家长评语很多安全风险，而且并不是所有人都了解其中的细节，我建议使用现有的众多身份验证解决方案中的一种热镀锌：

  • Firebase：www.robinwieruch.de/complete-fi…
  • Auth0：auth0.c单元测试常用方法om/
  • AWS Cognito：aws.amazon.com/cogni热镀锌和冷镀锌to/

阅读：

  • 《使用 React Router 进行身份验证》

测试

现在最常见的 React 测试方案还热镀锌是 Jest，它基本上提供了一个全面的测试框架所需要的一切。

你可以使用 react-test-renderer 在你的 Jest 测试webpack配置中渲染 React 组件。Redux这已经足TypeScript以使用 Jes热镀锌钢管国标厚度t 执行所谓的 Snapshot Tests 了：一旦运行测试，就会创建 React 组件中渲染的 DOM 元素的快照。当你在某个时间点再次运行测试时，将创建另一个快照，这个快照会和前一个快照进行 diff。如果存在差异，Jest 将发出警告，你要么接受这个快照，要么更改一下组件的实现。

最近 React Testing Library (RTL) 也比较流行（在 J热镀锌钢管国标厚度est 测试环境中使用），它可以为 React 提供更精细的测试typescript有前途吗。RTL 支可视化大屏持让渲染组件模拟 HTML 元素上的事件成，配合 Jest可视化大屏 进行 DOM 节点的断言。

如果你正在寻找用于 React 端到端 (E2E) 测试的测试工具，Cypress 是现在最受欢迎的选择。

阅读：

数据结构

2022 年的 React 生态

Vanilla JavaScript 为你提供了大量内置工具来处理数据结构，单元测试的主要内容就好像它们是不可变的一样Webpack。但是，如果你觉得需要强制执行不可变数据结构，那么最受欢迎的选择之一是 Immer 。我个人没用过它，因为 JavaScript 本身就可以用于管理不可变的数据结构，但是如果有人专门问到 JS 的不可变性，有人会推荐它。

链接：

  • Imm可视化工具er：github.com/immerjs/imm…

阅读：

  • 《immer —— 提高React开发效率的神器》

国际化

2022 年的 React 生态

当涉及到 React 应用程序的国际化 i18n 时，你不仅需要考虑翻译，还需要考虑复数、日期和货币的格式以及其他可视化管理一些事情。这些是处理国际typescript官网化的最流行redux工作流程的库：

  • FormatJS：github.com/formatjs/fo…
  • react-i1typescript面试题8next：github.com/i18next/rea…

富文本编辑

2022 年的 React 生态

React 中的富文本编辑器，就简单推荐下面几个，我也没太多用过：

  • Drtypescript装饰器aft.js：draftjs.org/
  • Slate.js：www.slatejs.org/
  • ReactQuill：热镀锌钢管国家标准github.c可视化工具om/zenoamaro/r…

时间处理

2022 年的 React 生态

近年来，JavaScript 本身在处理日期和时typescript什么意思间方面做了很多优化和努力，所以一般没必要使用专门的库来处理它们。但是，如果你的 Reactypescript面试题t 应用程序需要大量处理日期、时间和时区，你可以引入一个库来为你管理这些事情：

  • date-单元测试家长评语fns：github.com/date-fns/da…
  • Day.js：单元测试常用方法github.com/iamkun/dawebpack配置yj…
  • Luxon：github.com/moment/luxo…

客户端

2022 年的 React 生态

Electr可视化音乐on 是现在跨平台桌面应用程序的首选框架。但是，也存在一些替代方案：

  • Tauri： (当前最新的) github.com/单元测试主要的测试技术不包括tauWebpackri-apps/…
  • NW.js：nwjs.Webpackio/
  • Neutralino.j热镀锌钢管规格型号表s：github.com/neutralinoj…

阅读：

  • 《扔掉 Electron，拥抱基于 Rust 开发的 Tauri》：juejin.webpack是什么cn/post/706734…

移动端

2022 年的 React 生态

将 React 从 Web 带到移动设备的首选解决方案仍然是 React Native。

阅读：

  • 《React Native 新架构》：segmentfault.com/a/119000004…

VR/AR

2022 年的 React 生态

通过 React，我们也可以深入研究虚拟现实或增强现实。老实说，这些库我还都没用过，但它们是我在 Reacwebpack原理t 中所熟悉的 AR/VR 库：

  • react-three-fiber： (最流行的3D库，其中也有VR实现)github.com/pmndrs/reac…
  • `reactypescript知乎t-360：facebook.可视化数据图表github.io/react-360/
  • aframe-react：github.com/supermedium…

原型设计

2022 年的 React 生态

如果你是一名 UI/UX 设计师，你可能希望使用一种工具来为新的 React 组件、布局或 UI/UX 概念进行快速原型设计。我之前用的是 Sketch ，现在改用了 Figma 。尽管我两者都喜欢，但我还可视化大屏是更喜欢 Figma。Zeplin 是另一种选择。对于一些简单的草图，我喜欢使用 Excalidraw。如果你正在寻找交互式 UI/UXWebpack 设计，可以看看 InVision。

  • Sketch：www.sketch.com/
  • Figma：www.figma.com/
  • Zeplin：zeplintypescript有前途吗.io/
  • Excalidraw：excali可视化音乐软件draw.com/
  • InViwebpack最多支持几个入口si可视化编程on：wwwebpack面试题w.invisio可视化是什么意思napp.cowebpack是什么m/

文档

2022 年的 React 生态

我在Redux很多项目里都在使用 Storybook 作为文档工具，不过也有一些typescript是干嘛的其他好的方案：

  • Docusaurus：githubwebpack是什么.com/facebook/do…
  • Docz：github.com/doczjs单元测试能发现约80的软件缺陷/docz
  • Styleguidist：github.com/styleguidis…

最后

参考：www.robinwieruch.de/react-libwebpack热更新原理ra…

本文完，欢迎大家补充。

如果你想加入高质量前端交流群，或者你有任何其他事情想和我交流也可以添加typescript有前途吗我的个人微信 ConardLi 。

如果你有任何webpack是什么想法，欢迎在留言区和我留言，如果这篇可视化音乐文章帮助到了你，欢迎点赞和关注。你的点赞和关注是对我最大的支持！