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

我們有一個名為 shouldComponentUpdate 的生命週期方法，它預設返回 true（布林值）。shouldComponentUpdate 的目的是我們可以自定義實現預設行為，並決定 React 何時應該更新或重新渲染元件。通常，我們使用 state 或 props 值來決定更新週期。React 現在為我們提供了一個 PureComponent，它比較 state 和 props 來決定更新週期。如果我們使用 PureComponent 擴充套件類，則不需要重寫 shouldComponentUpdate。React 對當前 state 和 props 與新的 props 和 state 進行淺比較，以決定是否繼續進行下一個… 閱讀更多

我們有一個 app.jsx 元件import React, { Component } from 'react'; import { Link, Route, Switch } from 'react-router-dom'; import Category from './Category'; class App extends Component {    render() {       return (                                                         主頁                   使用者                                          … 閱讀更多

我們有一個 index.js 檔案，如下所示：import React from 'react' import ReactDOM from 'react-dom' import './index.css' import { Route, Link, BrowserRouter } from 'react-router-dom' import App from './App' import AboutUs from './AboutUs’; import ContactUs from './ContactUs'; const routs = (    < BrowserRouter >                                             首頁                                         使用者                … 閱讀更多

我們在基於類的元件中使用 shouldComponentUpdate 作為生命週期方法。此方法可用於透過比較 props（先前和下一個）並有條件地執行 render 來實現效能最佳化。我們也有 React.PureComponent，它可以對 state 和 props 進行淺比較。但在函式元件中，我們沒有這樣的方法。現在，React 提供了一個 memo 方法，它將對函式元件執行相同的功能。const functionalComponent = React.memo(function functionalComponent(props) {    /* 使用 props 渲染 */ });我們將元件包裝在 memo 方法中。Memo 方法將記住結果，直到 props 相同。… 閱讀更多

在一個典型的 Web 應用程式中，客戶端透過瀏覽器發出 HTTP 請求，伺服器在響應中傳送包含資料的 HTML 頁面。但在單頁應用程式 (SPA) 中，我們只有一個頁面，每當客戶端向伺服器發出 HTTP 請求時，它通常會以 json/xml 格式的資料進行響應。為了發出 HTTP 請求，我們有一些以下選項：XmlHttpRequest、Axios、Windows fetch。Axios 易於與 React 一起使用並處理請求。讓我們首先安裝它npm install –save axios在使用前將其匯入 jsx 檔案中import Axios from ‘axios’;從元件生命週期文章中，我們觀察到 componentDidMount 是發出… 閱讀更多

與 Angular 等其他庫不同，React 中的表單需要我們自己處理。React 中有兩種型別的表單輸入：受控輸入、非受控輸入。受控元件或元素是由 React 函式處理的那些元件。例如，在 onChange 函式呼叫時更新欄位。大多陣列件都是以受控方式處理的。受控表單元件示例import React, { Component } from 'react'; class ControlledFormExample extends Component {    constructor () {       this.state = {          email: ''       }    }    changeEmailHandler = event => {      … 閱讀更多

Formik 的目的是消除 React 中表單處理的複雜性，並使表單提交更簡單。Formik 使用 yup 來驗證表單欄位，這非常易於使用。首先安裝 formik 庫npm install –save formic示例import React, { Component} from 'react'; import { Formik, FormikProps, Form, Field, ErrorMessage } from 'formik'; export class FormExample extends Component {    handleSubmit = (values, {       props = this.props,       setSubmitting    }) => {       setSubmitting(false);       return;    }      render() {       return(        … 閱讀更多

錯誤邊界機制有助於在生產環境中向用戶顯示有意義的錯誤訊息，而不是顯示任何程式語言錯誤。建立一個 React 類元件import React, {Component} from 'react'; class ErrorBoundary extends Component{    state={       isErrorOccured:false,       errorMessage:''    }    componentDidCatch=(error, info)=>{       this.setState({isErrorOccured:true, errorMessage:error});    }    render(){       if(this.state.isErrorOccured){          return <div>出錯啦</div>       }else{          return this.props.children;       }    } } export default ErrorBoundary;我們有一個 state 物件，它有兩個變數 isErrorOccured 和 errorMessage，它們… 閱讀更多

理解錯誤訊息如果程式碼執行中出現錯誤，React 會在螢幕上顯示可讀的錯誤訊息，其中包含行號。我們應該理解錯誤訊息以糾正它。我們有一個下面的 App.js 檔案，其中包含一個輸入元素。更改輸入值後，我們會看到控制檯文字：import React, {Component} from 'react'; class App extends Component {    onChangeHandler=(event)=>{       console.log(event.target.value);    }    render(){       return (                       this.onChangeHandler(event)}/>                 );    } } export default… 閱讀更多