使用 proptypes 可以確保元件接收 props 的型別安全，也有助於進行正確的計算。例如 - 如果我們接收 name 為字串，age 為數字，那麼應該以相同的型別接收。如果我們以字串的形式接收 age，則可能導致計算錯誤。要使用 proptypes，我們必須安裝以下包。npm install –save prop-types 此包由 React 團隊提供。要在元件上使用它，我們首先要匯入它 import PropType from ‘prop-types’; 我們可以在任何型別的元件（有狀態或無狀態）上使用它。在匯出元件之前的元件末尾 ... 閱讀更多

首先，我們必須理解兩個主要概念：同步程式設計非同步程式設計同步程式設計它等待每個語句完成執行後再執行下一個語句。如果語句彼此不依賴，這種方法會減慢應用程式的處理速度，但它們仍然在佇列中等待執行。非同步程式設計它不會等待當前語句完成執行後再執行下一個語句。例如，在 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 進行垃圾回收。可以在此方法中執行清理活動。例如：清除應用程式中使用的本地儲存變數、清除會話、清理圖表、清理計時器、取消掛起的 API 請求等。`componentWillUnmount(){    this.resetSession(); // 例如... 閱讀更多