首先，我們必須理解兩個主要概念：同步程式設計和非同步程式設計。同步程式設計：它等待每個語句完成執行後再執行下一個語句。如果語句之間不依賴，但仍然需要等待執行（因為它們在佇列中），這種方法會減慢應用程式的處理速度。非同步程式設計：它不會等待當前語句完成執行，就會移動到下一個語句。例如，在 JavaScript 中呼叫 Web 服務和執行檔案複製。呼叫 Web 服務可能需要一些時間才能返回結果，在此期間我們可以完成其他操作。一旦伺服器提供結果，… 閱讀更多

React.js 中的樣式可以透過以下兩種方式完成：css 樣式表和內聯樣式。讓我們首先看看 CSS 樣式表。我們有 App.js 檔案，如下所示：import React, {Component} from 'react'; import './App.css'; class App extends Component {    render(){       return (                       React 元件樣式                   );    } } export default App;在 App.js 檔案中，我們匯入了包含 css 類 myColoredText 的 App.css 檔案。請注意：我們使用雙引號將 css 類的名稱與屬性 className 一起使用。JSX 使用… 閱讀更多

讓我們首先從編寫一個簡單的 HTML 程式碼開始，看看如何使用 React。基本的 React 示例：建立一個簡單的 div，如下所示：    Steve    我的愛好：板球 新增一些樣式元素。player{    border:1px solid #eee;    width:200px;    box-shadow:0 2px 2px #ccc;    padding: 22px;    display:inline-block;    margin:10px; }這就像 Web 應用中的普通 html 資料一樣。現在，我們可能有許多相同的玩家，然後我們必須複製相同的 div，如下所示：    David    我的愛好：板球 這些 div 在結構上相同，但在內部包含不同的資料。在這裡，… 閱讀更多

通常，React 的 render 方法中的 return 語句返回一個包含所有子 jsx 的單個 div 元素，如下所示：render(){    return (                Header          Test          ); }在這裡，我們不能簡單地返回多個元素，我們需要一個類似於 div 的父容器，如上所示。如果沒有父容器元素，我們甚至可以返回一個數組，如下所示：返回陣列時，我們需要為陣列的每個元素提供一個唯一的鍵render(){    return (   ... 閱讀更多

瞭解無狀態和有狀態 React 元件的區別。在狀態管理文章中，我們學習瞭如何在 React 中處理狀態變化。無狀態元件是簡單的函式式元件，沒有區域性狀態，但請記住，React 中也有一個 hook 來在函式式元件中新增狀態行為。有狀態元件可以包含狀態物件和事件處理函式，以及使用者操作。無狀態元件本質上是純粹的，它執行非常具體的任務。import React from 'react'; const player = (props) => {    return (                我是一個玩家：… 閱讀更多

在 React Router v4 之前，React 中的路由是靜態的，但在 v4 更新之後，它是動態的。在單頁面應用程式中，我們只有一個頁面 index.html 和不同的元件，這些元件根據路由顯示。在非 SPA Web 應用程式中，伺服器根據請求返回頁面。要開始路由，首先安裝路由包：npm install –save react-router-dom 建立 create-react-app 專案後，我們將看到只有一個 html 檔案，即 index.html 和一個名為 App 的元件。現在，我們將建立另外兩個元件 AboutUs.jsx 和 ContactUs.jsxAboutUs.jsximport React from 'react' class ... 閱讀更多

錯誤處理主要有兩種方法。這些方法用於 React 中的錯誤邊界機制。我們將元件（可能發生錯誤的元件）包裝在一個處理以下方法的類中。靜態方法 getDerivedStateFromError(error)componentDidCatch(error, info)靜態 getDerivedStateFromError(error)：顧名思義，我們可以根據從子元件接收到的錯誤在此處更新狀態物件。componentDidCatch(error, info)：我們可以使用 api 呼叫記錄錯誤。這有助於在螢幕上顯示有用的錯誤訊息，而不是技術錯誤。如果一個類實現了… 閱讀更多

更新生命週期可以由兩個事件觸發：父元件更新 props；區域性狀態變化。父元件更新 propscomponentWillReceiveProps(nextProps) - 這是在 prop 更改時呼叫的第一個方法。它包含一個引數 nextProps，表示新更改的 props。在這裡，如果需要，我們可以將區域性狀態與 props 同步。如果不需要將狀態與 props 同步，則可能不需要實現此方法。此處應避免產生副作用。因為如果在此處使用副作用，可能會導致重新渲染或效能問題。現在，componentWillReceiveProps 已棄用，並由靜態方法 getDerivedStateFromProps(props, state) 替換。作為… 閱讀更多

ComponentWillUnmount 是解除安裝階段中唯一執行的方法。當元素樹中沒有與該元件匹配的元素時，元件進入此階段。在元件從實際 DOM 中移除之前，會呼叫此方法。隨著該元件從 DOM 樹中移除，其所有子元件也會自動移除。一旦元件從 DOM 中移除，它就會在 React 中可供垃圾回收。清理活動可以在此方法中完成。例如，清除應用程式中使用的 localStorage 變數，清除會話，清理圖表，清理計時器，取消掛起的 api 請求等。componentWillUnmount(){    this.resetSession(); // 清理會話的示例方法 ... 閱讀更多

每個有狀態的基於類的元件都經歷四個生命週期階段：掛載或建立、更新、解除安裝或銷燬、錯誤處理階段。React.js 元件生命週期 - 掛載階段 在建立生命週期中執行的方法包括：建構函式、componentWillMount（僅在 17 版本之前可用）、render、componentDidMount。建構函式() 這是一個 ES6 特性，而不是 React 提供的方法。React 使用建構函式將 props 傳遞給繼承自 React 庫的父元件。constructor(props){    super( props ); }將 props 傳遞給父元件有助於我們在元件中使用 this.props。我們可以在建構函式中初始化元件的狀態。重要的是，我們不應該在建構函式中使用 setState 方法。... 閱讀更多