亚洲成人影片在线免费看,人人干人人插人人摸,啊啊啊啊91,黄色电影在线免费观看网站,九九小视频,五月天婷婷激情视频,日本国产在线观看,91精品国产91久久久久久久久久

點(diǎn)擊上方前端Q，關(guān)注公眾號

回復(fù)加群，加入前端Q技術(shù)交流群

今天我們來聊 React，React 已經(jīng)風(fēng)靡前端屆很長一段時間了，在這段時間里它發(fā)展了一個非常全面而強(qiáng)大的生態(tài)系統(tǒng)。大廠喜歡在大型的前端項目中選擇 React，它的生態(tài)功不可沒。

今天的文章，我們我們將從狀態(tài)管理、樣式和動畫、路由、代碼風(fēng)格等多個方面來看看 React 最新的生態(tài)，希望你以后在做技術(shù)選型的時候能夠有所幫助。

創(chuàng)建 React 項目

對于大多數(shù) React 初學(xué)者來說，在剛剛開始學(xué)習(xí) React 時如何配置一個 React 項目往往都會感到迷惑，可以選擇的框架有很多。React 社區(qū)中大多數(shù)會給推薦 Facebook 的 create-react-app (CRA)。它基本上零配置，為你提供開箱即用的簡約啟動和運(yùn)行 React 應(yīng)用程序。

但現(xiàn)在來看，CRA 使用的工具過時了 — 從而導(dǎo)致我們的開發(fā)體驗(yàn)變慢。Vite 是近期最受歡迎的打包庫之一，它具有令人難以置信的開發(fā)和生產(chǎn)速度，而且也提供了一些模板（例如 React、React + TypeScript）可以選擇。

如果你已很經(jīng)熟悉 React 了，你可以選擇它最流行的框架之一作為替代：Next.js 和 Gatsby.js。這兩個框架都基于 React 建立，因此你應(yīng)該至少熟悉了 React 的基礎(chǔ)知識再去使用。這個領(lǐng)域另一個流行的新興框架是 Remix，它在 2022 年絕對值得一試。

雖然 Next.js 最初是用來做服務(wù)端渲染的，而 Gatsby.js 主要用來做靜態(tài)站點(diǎn)生成（例如博客和登錄頁面等靜態(tài)網(wǎng)站）。然而，在過去幾年里，這兩個框架之間一直在互相卷...

Next.js 可以支持你生成靜態(tài)站點(diǎn)，而 Gatsby.js 也支持了服務(wù)端渲染。不過就我個人的使用體驗(yàn)而言，我會覺得 Next.js 更好用一點(diǎn)。

如果你只想了解一下 create-react-app 這些工具在后臺的工作原理，建議嘗試一下自己從頭開始配置一個 React 項目。從一個簡單的 HTML JavaScript 項目開始，并自己添加 React 及其支持工具（例如 Webpack、Babel）。這并不是你在日常工作中必須要做的事情，但這是了解底層工具實(shí)現(xiàn)原理的一個很好的方式。

建議：

優(yōu)先使用 Vite 創(chuàng)建 React 客戶端應(yīng)用

CRA 備選

優(yōu)先使用 Next.js 創(chuàng)建 React 服務(wù)端渲染應(yīng)用

最新技術(shù)：Remix
僅創(chuàng)建靜態(tài)站點(diǎn)備選 Gatsby.js

可選的學(xué)習(xí)經(jīng)驗(yàn)：從0自己搭建一個 React 應(yīng)用。

鏈接：

create-react-app：https://github.com/facebook/create-react-app
Vite：https://github.com/vitejs/vite
Next.js：https://github.com/vercel/next.js
Gatsby.js：https://github.com/gatsbyjs/gatsby
Remix：https://github.com/remix-run/remix

閱讀：

《React 基礎(chǔ)》：https://beta.reactjs.org/learn
《了解為什么像 React 這樣的框架很重要》：https://www.robinwieruch.de/why-frameworks-matter/
《如何創(chuàng)建現(xiàn)代 JavaScript 項目》：https://www.robinwieruch.de/javascript-project-setup-tutorial/
《Gatsby vs. Next.js vs. Remix》：https://satellytes.com/blog/getting-started-gatsby-next-remix/
《React 框架運(yùn)行時優(yōu)化方案的演進(jìn)》：https://mp.weixin.qq.com/s/4qzm5pFmvdDUncN4txiBPA

狀態(tài)管理

React 帶有兩個內(nèi)置的 Hooks 來管理本地狀態(tài)：useState 和 useReducer。如果需要全局狀態(tài)管理，可以選擇加入 React 內(nèi)置的 useContext Hook 來將 props 從頂層組件傳遞到底層組件，從而避免 props 多層透傳的問題。這三個 Hooks 足以讓你實(shí)現(xiàn)一個強(qiáng)大的狀態(tài)管理系統(tǒng)了。

如果你發(fā)現(xiàn)自己過于頻繁地使用 React 的 Context 來處理共享/全局狀態(tài)，你一定要看看 Redux，它是現(xiàn)在最流行的狀態(tài)管理庫。它允許你管理應(yīng)用程序的全局狀態(tài)，任何連接到其全局存儲的 React 組件都可以讀取和修改這些狀態(tài)。

如果你碰巧在用 Redux，你一定也應(yīng)該查看 Redux Toolkit。它是基于 Redux 的一個很棒的 API，極大地改善了開發(fā)者使用 Redux 的體驗(yàn)。

作為替代方案，如果你喜歡用全局存儲的思想管理狀態(tài)，但不喜歡 Redux 的處理方式，可以看看其他流行的本地狀態(tài)管理解決方案，例如 Zusand、Jotai、XState 或 Recoil 。

另外，如果你想擁有和 Vue.js 一樣的開發(fā)體驗(yàn)，建議看看 Mobx 。

建議：

用 useState/useReducer 處理共享狀態(tài)
選擇性使用 useContext 管理某些全局狀態(tài)
用 Redux(或另一種選擇) 管理全局狀態(tài)

鏈接：

Redux：https://redux.js.org/
Mobx：https://github.com/mobxjs/mobx
Zusand：https://github.com/pmndrs/zustand
Jotai：https://github.com/pmndrs/jotai
XState：https://github.com/statelyai/xstate
Recoil：https://github.com/facebookexperimental/Recoil

閱讀：

《useReducer、useState、useContext 使用指南》：https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/
《React 體系下關(guān)于 Mobx 與 Redux 的一些思考》：https://zhuanlan.zhihu.com/p/461844358
《Facebook 新一代 React 狀態(tài)管理庫 Recoil》：https://juejin.cn/post/6881493149261250568
《使用 React&Mobx 的幾個最佳實(shí)踐》

遠(yuǎn)程數(shù)據(jù)請求

React 的內(nèi)置 Hooks 非常適合 UI 狀態(tài)管理，但當(dāng)涉及到遠(yuǎn)程數(shù)據(jù)的狀態(tài)管理（也包括數(shù)據(jù)獲取）時，我建議使用一個專門的數(shù)據(jù)獲取庫，例如 React Query，它自帶內(nèi)置的狀態(tài)管理功能。雖然 React Query 本身的定位并不是一個狀態(tài)管理庫，它主要用于從 API 獲取遠(yuǎn)程數(shù)據(jù)，但它會為你處理這些遠(yuǎn)程數(shù)據(jù)的所有狀態(tài)管理(例如緩存，批量更新)。

React Query 最初是為使用 REST API 而設(shè)計的，但是現(xiàn)在它也支持了 GraphQL。然而如果你正在為你的 React 項目尋找專門的 GraphQL 庫，我還是推薦你去看看 Apollo Client（當(dāng)前最流行的）、urql（輕量級）或 Relay（Facebook 維護(hù)）。

如果你已經(jīng)在使用 Redux，并且想要在 Redux 中添加集成狀態(tài)管理的數(shù)據(jù)請求功能，建議你看看 RTK Query，它將數(shù)據(jù)請求的功能更巧妙的集成到 Redux 中。

建議：

React Query（REST API、GraphQL API 都有）
Apollo Client（只有 GraphQL API）
可選的學(xué)習(xí)經(jīng)驗(yàn)：了解 React Query 的工作原理

鏈接：

React Query：https://react-query.tanstack.com/
Apollo Client：https://www.apollographql.com/docs/react/
urql：https://formidable.com/open-source/urql/
Relay：https://github.com/facebook/relay
RTK Query：https://redux-toolkit.js.org/rtk-query/overview

閱讀：

《React Query 的工作原理》：https://www.robinwieruch.de/react-hooks-fetch-data/
《本地和遠(yuǎn)程數(shù)據(jù)的 React 狀態(tài)的一切》：https://www.robinwieruch.de/react-state/

路由

如果你使用的是像 Next.js 或 Gatsby.js 這樣的 React 框架，那么路由已經(jīng)為你處理好了。但是，如果你在沒有框架的情況下使用 React 并且僅用于客戶端渲染（例如 CRA），那么現(xiàn)在最強(qiáng)大和流行的路由庫是 React Router。

鏈接：

React Router：https://reactrouter.com/

閱讀：

《深入 React-Router 實(shí)現(xiàn)原理》：https://segmentfault.com/a/1190000023560665

樣式/CSS

在 React 中有很多關(guān)于 樣式/CSS 的選項和意見，作為一個 React 初學(xué)者，可以使用一個帶有所有 CSS 屬性的樣式對象作為 HTML 樣式屬性的鍵/值對，從內(nèi)聯(lián)樣式和基本的 CSS 開始就可以。

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

內(nèi)聯(lián)樣式可以在 React 中通過 JavaScript 動態(tài)添加樣式，而外部 CSS 文件可以包含 React 應(yīng)用的所有剩余樣式：

import './Headline.css';

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

如果你的應(yīng)用越來越大了，建議再看看其他選項。首先，我建議你將 CSS Module 作為眾多 CSS-in-CSS 解決方案的首選。CRA 支持 CSS Module ，并為提供了一種將 CSS 封裝到組件范圍內(nèi)的模塊的方法。這樣，它就不會意外泄露到其他 React 組件的樣式中。你的應(yīng)用的某些部分仍然可以共享樣式，但其他部分不必訪問它。在 React 中， CSS Module 通常是將 CSS 文件放在 React 組件文件中：

import styles from './style.module.css';

const ConardLi = ({ title }) =>
  <h1 className={styles.headline}>
    {title}
  </h1>

其次，我想向你推薦所謂的 styled components ，作為 React 的眾多 CSS-in-JS 解決方案之一。它通過一個名為 styles-components(或者其他例如 emotion 、stitches)的庫來實(shí)現(xiàn)的，它一般將樣式放在 React 組件的旁邊：

import styled from 'styled-components';

const BlueHeadline = styled.h1`
  color: blue;
`;

const ConardLi = ({ title }) =>
  <BlueHeadline>
    {title}
  </BlueHeadline>

第三，我想推薦 Tailwind CSS 作為最流行的 Utility-First-CSS 解決方案。它提供了預(yù)定義的 CSS 類，你可以在 React 組件中使用它們，而不用自己定義。這可以提升一些效率，并與你的 React 程序的設(shè)計系統(tǒng)保持一致，但同時也需要了解所有的類：

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

使用 CSS-in-CSS、CSS-in-js 還是函數(shù)式 CSS 由你自己決定。所有的方案在大型 React 應(yīng)用中都適用。最后一點(diǎn)提示：如果你想在 React 中有條件地應(yīng)用一個 className，可以使用像 clsx 這樣的工具。

建議：

CSS-in-CSS 方案：CSS Modules
CSS-in-JS 方案：Styled Components （目前最受歡迎）

備選：Emotion 或 Stitches

函數(shù)式 CSS：Tailwind CSS
備選：CSS 類的條件渲染：clsx

鏈接：

styled-components：https://www.robinwieruch.de/react-styled-components/
Tailwind CSS：https://tailwindcss.com/
clsx：https://github.com/lukeed/clsx

閱讀：

《React中CSS-in-JS的最佳實(shí)踐》：https://juejin.cn/post/6935245880568053791
《React中的CSS樣式》：https://www.robinwieruch.de/react-css-styling/
《10種現(xiàn)在流行的CSS解決方案》：https://juejin.cn/post/6844903633109139464
《CSS-in-JS vs CSS》：https://bejamas.io/blog/css-performance/
《看完了 2021 CSS 年度報告，我學(xué)到了啥？》：https://juejin.cn/post/7043577751344775176

組件庫

對于初學(xué)者來說，從零開始構(gòu)建可復(fù)用的組件是一個很好的學(xué)習(xí)經(jīng)驗(yàn)，值得推薦。無論它是 dropdown、radio button 還是 checkbox ，你最終都應(yīng)該知道如何創(chuàng)建這些UI組件組件。

然而，在某些時候，你想要使用一個UI組件庫，它可以讓你訪問許多共享一套設(shè)計系統(tǒng)的預(yù)構(gòu)建組件。以下所有的UI組件庫都帶有基本組件，如 Buttons、Dropdowns、Dialogs 和 Lists：

Material UI (MUI) (最流行)：https://material-ui.com/
Mantine (最推薦)：https://mantine.dev/
Chakra UI (最推薦)：https://chakra-ui.com/
Ant Design（國內(nèi)最流行）：https://ant.design/
Radix：https://www.radix-ui.com/
Primer：https://primer.style/react/
NextUI：https://nextui.org/
Tailwind UI (收費(fèi)的)：https://www.tailwindui.com/
Semantic UI：https://www.robinwieruch.de/react-semantic-ui-tutorial
React Bootstrap：https://react-bootstrap.github.io/

盡管所有這些UI組件庫都帶有許多內(nèi)部組件，但它們不能讓每個組件都像只專注于一個UI組件的庫那樣強(qiáng)大。例如 react-table-library 提供了非常強(qiáng)大的表格組件，同時提供了主題（例如 Material UI），可以很好的和流行的UI組件庫兼容。

閱讀：

《從零到一搭建React組件庫》：https://segmentfault.com/a/1190000039852833

動畫庫

Web 應(yīng)用中的大多數(shù)動畫都是從 CSS 開始的。最終你會發(fā)現(xiàn) CSS 動畫不能滿足你所有的需求。通常開發(fā)者會選擇 React Transition Group，這樣他們就可以使用 React組件來執(zhí)行動畫了，React 的其他知名動畫庫有：

Framer Motion (最推薦)：https://www.framer.com/motion/
react-spring (也推薦一下)：https://github.com/react-spring/react-spring
react-motion：https://github.com/chenglou/react-motion
react-move：https://github.com/sghall/react-move
Animated (React Native)：https://facebook.github.io/react-native/docs/animated

可視化圖表

如果你真的想要自己從頭開始開發(fā)一些圖表，那么就沒有辦法繞過 D3 。這是一個很底層的可視化庫，可以為你提供開發(fā)一些炫酷的圖表所需的一切。然而，學(xué)習(xí) D3 是很有難度的，因此許多開發(fā)者只是選擇一個 React 圖表庫，這些庫默認(rèn)封裝了很多能力，但是缺失了一些靈活性。以下是一些流行的解決方案:

Recharts：http://recharts.org/
react-chartjs：https://github.com/reactchartjs/react-chartjs-2
nivo：https://nivo.rocks/
visx：https://github.com/airbnb/visx
Victory：https://formidable.com/open-source/victory/

表單

React 現(xiàn)在最受歡迎的表單庫是 React Hook Form 。它提供了從驗(yàn)證（一般會集成 yup 和 zod）到提交到表單狀態(tài)管理所需的一切。之前流行的另一種方式是 Formik。兩者都是不錯的解決方案。這個領(lǐng)域的另一個選擇是 React Final Form 。畢竟，如果你已經(jīng)在使用 React UI組件庫了，你還可以查看他們的內(nèi)置表單解決方案。

建議：

React Hook Form

集成 yup 或 zod 進(jìn)行表單驗(yàn)證

如果已經(jīng)在使用組件庫了，看看內(nèi)置的表單能不能滿足需求

鏈接：

React Hook Form：https://react-hook-form.com/
Formik：https://github.com/jaredpalmer/
React Final Form：https://final-form.org/react

閱讀：

《React 開源表單組件最佳實(shí)踐，原理解析，設(shè)計分析》：https://toutiao.io/posts/0nh4r9w/preview

類型檢查

React 帶有一個名為 PropTypes 的內(nèi)部類型檢查。通過使用 PropTypes，你可以為你的 React 組件定義 props。每當(dāng)將類型錯誤的 prop 傳遞給組件時，你可以在運(yùn)行時收到錯誤消息：

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,
};

在過去的幾年里，PropTypes 已經(jīng)不那么流行了，PropTypes 也已經(jīng)不再包含在 React 核心庫中了，現(xiàn)在 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 終極初學(xué)者指南》：https://mp.weixin.qq.com/s/6DAyXFHIMW95FS0f3GyHpA
《如何優(yōu)雅地在 React 中使用TypeScript》：https://juejin.cn/post/7021674818621669389

代碼風(fēng)格

對于代碼風(fēng)格，基本上有兩種方案可以選擇：

如果你想要一種統(tǒng)一的、通用的代碼風(fēng)格，在你的 React 項目中使用 ESLint 。像 ESLint 這樣的 linter 會在你的 React 項目中強(qiáng)制執(zhí)行特定的代碼風(fēng)格。例如，你可以在 ESLint 中要求遵循一個流行的風(fēng)格指南(如 Airbnb 風(fēng)格指南)。之后，將 ESLint 與你的IDE/編輯器集成，它會指出你的每一個錯誤。

如果你想采用統(tǒng)一的代碼格式，可以在 React 項目中使用 Prettier。它是一個比較固執(zhí)的代碼格式化器，可選擇的配置很少。你也可以將它集成到編輯器或IDE中，以便在每次保存文件的時候自動對代碼進(jìn)行格式化。雖然 Prettier 不能取代 ESLint，但它可以很好地與 ESLint 集成。

建議：

ESLint：https://eslint.org/
Prettier：https://github.com/prettier/prettier

閱讀：

《React 代碼風(fēng)格指南》：https://keqingrong.cn/blog/2020-05-04-code-style-guide-for-react/
《Airbnb 樣式指南》：https://www.robinwieruch.de/react-libraries/

身份認(rèn)證

在 React 應(yīng)用程序中，你可能希望引入帶有注冊、登錄和退出等功能的身份驗(yàn)證。通常還需要一些其他功能，例如密碼重置和密碼更改功能。這些能力遠(yuǎn)遠(yuǎn)超出了 React 的范疇，我們通常會把它們交給服務(wù)端去管理。

最好的學(xué)習(xí)經(jīng)驗(yàn)是自己實(shí)現(xiàn)一個帶有身份驗(yàn)證的服務(wù)端應(yīng)用(例如 GraphQL 后端)。然而，由于身份驗(yàn)證有很多安全風(fēng)險，而且并不是所有人都了解其中的細(xì)節(jié)，我建議使用現(xiàn)有的眾多身份驗(yàn)證解決方案中的一種：

Firebase：https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/
Auth0：https://auth0.com/
AWS Cognito：https://aws.amazon.com/cognito/

閱讀：

《使用 React Router 進(jìn)行身份驗(yàn)證》：https://www.robinwieruch.de/react-router-authentication/

測試

現(xiàn)在最常見的 React 測試方案還是 Jest，它基本上提供了一個全面的測試框架所需要的一切。

你可以使用 react-test-renderer 在你的 Jest 測試中渲染 React 組件。這已經(jīng)足以使用 Jest 執(zhí)行所謂的 Snapshot Tests 了：一旦運(yùn)行測試，就會創(chuàng)建 React 組件中渲染的 DOM 元素的快照。當(dāng)你在某個時間點(diǎn)再次運(yùn)行測試時，將創(chuàng)建另一個快照，這個快照會和前一個快照進(jìn)行 diff。如果存在差異，Jest 將發(fā)出警告，你要么接受這個快照，要么更改一下組件的實(shí)現(xiàn)。

最近 React Testing Library (RTL) 也比較流行（在 Jest 測試環(huán)境中使用），它可以為 React 提供更精細(xì)的測試。RTL 支持讓渲染組件模擬 HTML 元素上的事件成，配合 Jest 進(jìn)行 DOM 節(jié)點(diǎn)的斷言。

如果你正在尋找用于 React 端到端 (E2E) 測試的測試工具，Cypress 是現(xiàn)在最受歡迎的選擇。

閱讀：

《React 單元測試實(shí)踐》：https://zhuanlan.zhihu.com/p/431143598

數(shù)據(jù)結(jié)構(gòu)

Vanilla JavaScript 為你提供了大量內(nèi)置工具來處理數(shù)據(jù)結(jié)構(gòu)，就好像它們是不可變的一樣。但是，如果你覺得需要強(qiáng)制執(zhí)行不可變數(shù)據(jù)結(jié)構(gòu)，那么最受歡迎的選擇之一是 Immer 。我個人沒用過它，因?yàn)?JavaScript 本身就可以用于管理不可變的數(shù)據(jù)結(jié)構(gòu)，但是如果有人專門問到 JS 的不可變性，有人會推薦它。

鏈接：

Immer：https://github.com/immerjs/immer

閱讀：

《immer —— 提高React開發(fā)效率的神器》https://zhuanlan.zhihu.com/p/146773995

國際化

當(dāng)涉及到 React 應(yīng)用程序的國際化 i18n 時，你不僅需要考慮翻譯，還需要考慮復(fù)數(shù)、日期和貨幣的格式以及其他一些事情。這些是處理國際化的最流行的庫：

FormatJS：https://github.com/formatjs/formatjs
react-i18next：https://github.com/i18next/react-i18next

富文本編輯

React 中的富文本編輯器，就簡單推薦下面幾個，我也沒太多用過：

Draft.js：https://draftjs.org/
Slate.js：https://www.slatejs.org/
ReactQuill：https://github.com/zenoamaro/react-quill

時間處理

近年來，JavaScript 本身在處理日期和時間方面做了很多優(yōu)化和努力，所以一般沒必要使用專門的庫來處理它們。但是，如果你的 React 應(yīng)用程序需要大量處理日期、時間和時區(qū)，你可以引入一個庫來為你管理這些事情：

date-fns：https://github.com/date-fns/date-fns
Day.js：https://github.com/iamkun/dayjs
Luxon：https://github.com/moment/luxon/

客戶端

Electron 是現(xiàn)在跨平臺桌面應(yīng)用程序的首選框架。但是，也存在一些替代方案：

Tauri：(當(dāng)前最新的) https://github.com/tauri-apps/tauri
NW.js：https://nwjs.io/
Neutralino.js：https://github.com/neutralinojs/neutralinojs

閱讀：

《扔掉 Electron，擁抱基于 Rust 開發(fā)的 Tauri》：https://juejin.cn/post/7067342513920540686#comment

移動端

將 React 從 Web 帶到移動設(shè)備的首選解決方案仍然是 React Native。

閱讀：

《React Native 新架構(gòu)》：https://segmentfault.com/a/1190000041182593

VR/AR

通過 React，我們也可以深入研究虛擬現(xiàn)實(shí)或增強(qiáng)現(xiàn)實(shí)。老實(shí)說，這些庫我還都沒用過，但它們是我在 React 中所熟悉的 AR/VR 庫：

react-three-fiber：(最流行的3D庫，其中也有VR實(shí)現(xiàn))https://github.com/pmndrs/react-three-fiber
`react-360：https://facebook.github.io/react-360/
aframe-react：https://github.com/supermedium/aframe-react

原型設(shè)計

如果你是一名 UI/UX 設(shè)計師，你可能希望使用一種工具來為新的 React 組件、布局或 UI/UX 概念進(jìn)行快速原型設(shè)計。我之前用的是 Sketch ，現(xiàn)在改用了 Figma 。盡管我兩者都喜歡，但我還是更喜歡 Figma。Zeplin 是另一種選擇。對于一些簡單的草圖，我喜歡使用 Excalidraw。如果你正在尋找交互式 UI/UX 設(shè)計，可以看看 InVision。