使用 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 程式碼開始，看看我們如何使用 ReactReact 基本示例 - 建立一個簡單的 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 (                標題          測試          ); }在這裡，我們不能簡單地返回多個元素，我們需要有一個類似於 div 的父容器，如上所示。如果沒有父容器元素，我們甚至可以返回一個數組，如下所示 -在返回陣列時，我們將需要為陣列的每個元素提供一個唯一的鍵render(){    return (   ... 閱讀更多

瞭解無狀態和有狀態 React 元件之間的區別在狀態管理文章中，我們學習瞭如何在 React 中處理狀態（如果某些內容發生了更改）。無狀態元件是簡單的函式元件，沒有本地狀態，但請記住，React 中也存在一個掛鉤，可以在函式元件中新增狀態行為。有狀態元件可以包含狀態物件和事件處理函式，以及使用者操作。無狀態元件本質上是純淨的，它執行非常特定的任務。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 更新本地狀態的變化父元件的 props 更新componentWillReceiveProps(nextProps) -這是在 prop 更改時呼叫的第一個方法。它包含一個引數 nextProps，表示新更改的 props。在這裡，如果需要，我們可以將本地狀態與 props 同步如果不需要將狀態與 props 同步，則可能不需要實現此方法。應避免在此處導致副作用。因為如果在此處使用副作用，可能會導致重新渲染或效能問題。現在，componentWillReceiveProps 已棄用，並替換為靜態方法 getDerivedStateFromProps(props, state)。作為... 閱讀更多

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