每個有狀態的，即基於類的元件都會經歷四種生命週期階段。裝載或建立更新解除安裝或銷燬錯誤處理階段React.js 元件生命週期 - 裝載階段在建立生命週期期間執行的方法如下：建構函式componentWillMount（僅在 17 版之前可用）rendercomponentDidMount建構函式()它是一個 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 請求，我們有一些以下選項：XmlHttpRequestAxiosWindows fetchAxios 易於與 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 出現錯誤       }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 ... 閱讀更多