大廠技術(shù)??高級(jí)前端??Node進(jìn)階

點(diǎn)擊上方?程序員成長(zhǎng)指北，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)Node交流群

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

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

創(chuàng)建 React 項(xiàng)目

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

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

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

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

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

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

建議：

優(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自己搭建一個(gè) 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 項(xiàng)目》：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)行時(shí)優(yōu)化方案的演進(jìn)》：https://mp.weixin.qq.com/s/4qzm5pFmvdDUncN4txiBPA

狀態(tài)管理

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

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

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

作為替代方案，如果你喜歡用全局存儲(chǔ)的思想管理狀態(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 的幾個(gè)最佳實(shí)踐》

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

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

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

如果你已經(jīng)在使用 Redux，并且想要在 Redux 中添加集成狀態(tài)管理的數(shù)據(jù)請(qǐng)求功能，建議你看看 RTK Query，它將數(shù)據(jù)請(qǐng)求的功能更巧妙的集成到 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 的選項(xiàng)和意見，作為一個(gè) React 初學(xué)者，可以使用一個(gè)帶有所有 CSS 屬性的樣式對(duì)象作為 HTML 樣式屬性的鍵/值對(duì)，從內(nèi)聯(lián)樣式和基本的 CSS 開始就可以。

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

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

import?'./Headline.css';

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

如果你的應(yīng)用越來越大了，建議再看看其他選項(xiàng)。首先，我建議你將 CSS Module 作為眾多 CSS-in-CSS 解決方案的首選。CRA 支持 ?CSS Module ，并為提供了一種將 CSS 封裝到組件范圍內(nèi)的模塊的方法。這樣，它就不會(huì)意外泄露到其他 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 解決方案之一。它通過一個(gè)名為 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è)計(jì)系統(tǒng)保持一致，但同時(shí)也需要了解所有的類：

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)用一個(gè) 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 年度報(bào)告，我學(xué)到了啥？》：https://juejin.cn/post/7043577751344775176

組件庫

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

然而，在某些時(shí)候，你想要使用一個(gè)UI組件庫，它可以讓你訪問許多共享一套設(shè)計(jì)系統(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（國(guó)內(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)部組件，但它們不能讓每個(gè)組件都像只專注于一個(gè)UI組件的庫那樣強(qiáng)大。例如 react-table-library 提供了非常強(qiáng)大的表格組件，同時(shí)提供了主題（例如 Material UI），可以很好的和流行的UI組件庫兼容。

閱讀：

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

動(dòng)畫庫

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

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 。這是一個(gè)很底層的可視化庫，可以為你提供開發(fā)一些炫酷的圖表所需的一切。然而，學(xué)習(xí) D3 是很有難度的，因此許多開發(fā)者只是選擇一個(gè) 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)證（一般會(huì)集成 yup 和 zod）到提交到表單狀態(tài)管理所需的一切。之前流行的另一種方式是 Formik。兩者都是不錯(cuò)的解決方案。這個(gè)領(lǐng)域的另一個(gè)選擇是 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è)計(jì)分析》：https://toutiao.io/posts/0nh4r9w/preview

類型檢查

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

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?=?({?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)格

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

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

如果你想采用統(tǒng)一的代碼格式，可以在 React 項(xiàng)目中使用 Prettier。它是一個(gè)比較固執(zhí)的代碼格式化器，可選擇的配置很少。你也可以將它集成到編輯器或IDE中，以便在每次保存文件的時(shí)候自動(dòng)對(duì)代碼進(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)用程序中，你可能希望引入帶有注冊(cè)、登錄和退出等功能的身份驗(yàn)證。通常還需要一些其他功能，例如密碼重置和密碼更改功能。這些能力遠(yuǎn)遠(yuǎn)超出了 React 的范疇，我們通常會(huì)把它們交給服務(wù)端去管理。

最好的學(xué)習(xí)經(jīng)驗(yàn)是自己實(shí)現(xiàn)一個(gè)帶有身份驗(yàn)證的服務(wù)端應(yīng)用(例如 GraphQL 后端)。然而，由于身份驗(yàn)證有很多安全風(fēng)險(xiǎn)，而且并不是所有人都了解其中的細(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/

測(cè)試

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

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

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

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

閱讀：

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

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

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

鏈接：

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

閱讀：

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

國(guó)際化

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

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

富文本編輯

React 中的富文本編輯器，就簡(jiǎn)單推薦下面幾個(gè)，我也沒太多用過：

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

時(shí)間處理

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

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)在跨平臺(tái)桌面應(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

移動(dòng)端

將 React 從 Web 帶到移動(dòng)設(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è)計(jì)

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

Sketch：https://www.sketch.com/
Figma：https://www.figma.com/
Zeplin：https://zeplin.io/
Excalidraw：https://excalidraw.com/
InVision：https://www.invisionapp.com/

文檔

我在很多項(xiàng)目里都在使用 Storybook 作為文檔工具，不過也有一些其他好的方案：

Docusaurus：https://github.com/facebook/docusaurus
Docz：https://github.com/doczjs/docz
Styleguidist：https://github.com/styleguidist/react-styleguidist

最后

參考：https://www.robinwieruch.de/react-libraries/

本文完，歡迎大家補(bǔ)充。


Node 社群



我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。


如果你覺得這篇內(nèi)容對(duì)你有幫助，我想請(qǐng)你幫我2個(gè)小忙：
1. 點(diǎn)個(gè)「在看」，讓更多人也能看到這篇文章
2. 訂閱官方博客?www.inode.club?讓我們一起成長(zhǎng)

點(diǎn)贊和在看就是最大的支持

2022 年的 React 生態(tài)