最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

React 已經(jīng)誕生很久了，自從它誕生開始，圍繞組件驅(qū)動形成了一個非常全面的生態(tài)，但是來自其他編程語言或者框架的開發(fā)人員很難找到要構(gòu)建一個 React 系統(tǒng)的所有組件。如果你是來自于像 Angular 這樣的框架的開發(fā)者，你可能已經(jīng)習慣了框架包含了所需要的所有功能，

然而對于 React 來說，它的核心并不是完善所有的可選庫。這是優(yōu)勢還是劣勢取決于你自己。當我從 Angular 切換到 React，我絕對經(jīng)歷了它作為 React 的優(yōu)勢。

只有通過 React，您才能使用函數(shù)組件和 props 構(gòu)建組件驅(qū)動的用戶界面。它帶有一些內(nèi)置的解決方案，例如，用于本地狀態(tài)和副作用的 React Hooks。

下面的文章將向您提供一些自己總結(jié)的方法，以便從補充庫中進行選擇，從而構(gòu)建一個全面的 React 應(yīng)用程序。

如何開始 React

如果你是一個完全不熟悉 React 的初學者想創(chuàng)建一個 React 項目，加入 React 的世界。有許多工具包項目可以選擇，每個項目都試圖滿足不同的需求。React 社區(qū)的現(xiàn)狀是通過 Facebook 的 create-react-app(CRA)。它提供了一個零配置的設(shè)置，并給你一個開箱即用并且簡單的啟動和運行的 React 應(yīng)用程序。所有的工具都對您隱藏起來了，但是最終要由您來更改這些工具。

如果你已經(jīng)熟悉 React，你可以選擇它流行的入門工具包之一: Next.js 和 Gatsby.js。這兩個框架都建立在 React 之上，因此你應(yīng)該已經(jīng)熟悉 React 的基本原理。Next.js 用于服務(wù)器端渲染(如動態(tài) web 應(yīng)用程序) ，Gatsby.js 用于靜態(tài)站點生成(如博客、登陸頁面)。

如果您只是想了解這些初學者工具包是如何工作的，那么可以嘗試從頭開始設(shè)置 React 項目。你將從一個基本的 HTML 和 JavaScript 項目開始，然后自己添加 React 和它的支持工具。

如果你想選擇一個自定義樣板項目，試著縮小你的要求。樣板文件應(yīng)該是最小的，不要試圖解決所有問題。它應(yīng)該針對你的問題。例如，gatsby-Firebase-authentication 樣板文件只在 Gatsby.js 中為您提供了完整的 Firebase 身份驗證機制，但是其他所有內(nèi)容都被省略了。

建議：

•  create-react-app for React beginners/advanced
•  Gatsby.js for static websites in React
•  Next.js for server-side rendered React
•  custom React project to understand the underlying tools

React 狀態(tài)管理

React 帶有內(nèi)置的 hooks 來管理局部狀態(tài): useState、 useReducer 和 useContext。所有這些都可以在 React 中用于復(fù)雜的本地狀態(tài)管理。它甚至可以模擬 Redux(Redux 是 React 的一個流行的狀態(tài)管理庫)。

所有 React 的內(nèi)置 hooks 都非常適合本地狀態(tài)管理。當涉及到遠程數(shù)據(jù)的狀態(tài)管理時，如果遠程數(shù)據(jù)帶有 GraphQL 端點，我建議使用 Apollo Client。Apollo Client 的替代方案是 urql 和 Relay。

如果遠程數(shù)據(jù)不是來自 GraphQL 端點，請嘗試使用 React 的 Hooks 來管理它。如果不行，像 Redux 或者 MobX/Mobx State tree 這樣的解決方案可能會有所幫助。

如果你想了解更多細節(jié)，請訪問我的綜合狀態(tài)管理反應(yīng)教程。

推薦：

•  局部狀態(tài): React 的 useState, useReducer, useContext Hooks
•  通過 Graph QL 的遠程狀態(tài): Apollo Client
•  通過 REST 的遠程狀態(tài): React Hooks or Redux/MobX/Mobx State Tree

使用 React 路由

路由在 React 中起著重要作用。畢竟，React 可以幫助您實現(xiàn)在客戶端處理路由的單頁應(yīng)用程序。當介紹一個復(fù)雜的路由 的時候，有好幾個路由解決方案。最值得推薦的解決方案是 React Router。

在您引入路由以前，您可以先嘗試 React 的條件渲染，它雖然不是路由的合理替代，但是小型應(yīng)用中以及足夠用了。

建議:

•  React Router

React 中的樣式庫

雖然關(guān)于 React 樣式處理有很多解決方法，但是作為一個 React 初學者，剛開始使用內(nèi)聯(lián)樣式和基本 CSS 是很好的。

 
 
 

  
  
  
import './Headline.css'; 
  
  
  
const Headline = ({ title }) => 
  
  
  
 
  
  
  
  {title} 
  
  
  

 
 
 

雖然內(nèi)聯(lián)樣式可以用 JavaScript 在 React 中動態(tài)地添加樣式，但是一個外部的 CSS 文件可以擁有 React 應(yīng)用程序的所有剩余樣式。一旦您的應(yīng)用程序增長，還有許多其他樣式方案選擇。

首先，我建議您研究一下 CSS Modules，將其作為 CSS-in-CSS 解決方案之一。CSS Modules 受到 create-react-app 的支持，并為您提供了將 CSS 封裝到模塊中的方法。這樣，它就不會意外地泄漏到其他人的樣式中。盡管應(yīng)用程序的某些部分仍然可以共享樣式，但其他部分不必訪問它。在 React 中，CSS Modules 通常將 CSS 文件與 React 組件文件共存。

 
 
 

  
  
  
import styles from './style.css'; 
  
  
  
const Headline = ({ title }) => 
  
  
  
   
  
  
  
    {title} 
  
  
  
  
 
 
 

其次，我想推薦的是被稱作為 styled components，作為 React 的 CSS-in-JS 解決方案之一。這個方法是由一個名為 styled-components 的庫提供的，它將樣式與 JavaScript 共享到 React 組件的旁邊:

 
 
 

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

第三，我想推薦 Tailwind CSS 作為一個函數(shù)式的 CSS 解決方案:

 
 
 

  
  
  
const Headline = ({ title }) => 
  
  
  
   
  
  
  
    {title} 
  
  
  
  
 
 
 

是否選擇 CSS in CSS、 CSS in js 或函數(shù)式 CSS 取決于您。所有的策略都適用于大型的 React 應(yīng)用程序。

建議:

•  CSS-in-CSS with CSS Modules
•  CSS-in-JS with Styled Components
•  Functional CSS with Tailwind CSS

React UI 庫

如果您不想從頭開始構(gòu)建所有必要的 React UI 組件，您可以選擇 React UI Library 來完成這項工作。所有這些都有一些基本的組件，比如按鈕，下拉菜單，對話框和列表。有很多 UI 庫可供 React 選擇:

•  Ant Design
•  Chakra UI
•  Tailwind UI
•  Semantic UI
•  Material UI
•  React Bootstrap 1. React Bootstrap

React 動畫

任何 web 應(yīng)用程序中的動畫都是從 CSS 開始的。最終你會發(fā)現(xiàn) CSS 動畫并不能滿足你的需求。通常開發(fā)人員會檢查 React Transition Group，這樣他們就可以使用 React 組件執(zhí)行動畫。其他著名的 React 動畫庫有:

•  react-motion
•  react-spring
•  Framer Motion
•  Animated  (React Native)

建議:

•  React Transition Group

React 可視化和圖表庫

如果你真的想自己從頭開始構(gòu)建圖表，你沒辦法不去學習 D3 。這是一個底層的可視化庫，它為你提供了創(chuàng)建令人驚嘆的圖表所需的一切。然而，學習 D3 是一個完全不同的冒險，因此許多開發(fā)人員只是想選擇一個 React 圖表庫，它可以為他們做任何事情，以換取靈活性。以下是一些流行的解決方案:

•  nivo
•  Victory
•  react-vis
•  Recharts
•  Chart Parts

React 中的表單庫

在 React 中最流行的表單庫是 Formik。它提供了從驗證到提交到形成狀態(tài)管理所需的一切。另外一個選擇是 React Hook Form。如果您開始使用更復(fù)雜的表單，這兩種方法對于 React 應(yīng)用程序都是有效的解決方案。

建議:

•  Formik
•  React Hook Form

React 中的數(shù)據(jù)獲取庫

很快，您就必須向遠程 API 發(fā)出請求，以便在 React 中獲取數(shù)據(jù)?，F(xiàn)代瀏覽器帶有本地獲取 API 來執(zhí)行異步數(shù)據(jù)請求:

 
 
 

  
  
  
function App() { 
  
  
  
  React.useEffect(() => { 
  
  
  
    const result = fetch(my/api/domain) 
  
  
  
      .then(response => response.json()) 
  
  
  
      .then(result => { 
  
  
  
        // do success handling 
  
  
  
        // e.g. store in local state 
  
  
  
      }); 
  
  
  
    setData(result.data); 
  
  
  
  }); 
  
  
  
  return ( 
  
  
  
    ... 
  
  
  
  ); 
  
  
  
}
 
 
 

基本上，你不需要添加任何其他庫來完成這項工作。但是，有時候不僅需要提供復(fù)雜的異步請求，還需要它們具有更強大的功能，而且只是一個輕量級的庫。我推薦的這些庫之一稱為 axios。當您的應(yīng)用程序增大時，可以使用它來代替本地獲取 API。

如果您有足夠的時間來處理 GraphQL API，我建議您使用 Apollo Client。可供選擇的 GraphQL 客戶端將是 urql 或 Relay。

建議:

•  瀏覽器的本地 fetch API
•  axios
•  Apollo Client

React 類型檢查

幸運的是 React 有自己的類型檢查能力。使用 PropTypes，你可以為你的 React 組件定義傳入的 props。無論何時向組件傳遞了錯誤的類型，在運行應(yīng)用程序時都會收到錯誤消息。但是這種形式的類型檢查只應(yīng)該用于較小的應(yīng)用程序。

 
 
 

  
  
  
import PropTypes from 'prop-types'; 
  
  
  
const List = ({ list }) => 
  
  
  
  
 
  
  
  
    {list.map(item => {item.title}