我們有一個名為 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（先前和下一個）並有條件地執行渲染來實現效能最佳化。我們也有 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 => {       ... 閱讀更多

Formic 的目的是消除 React 中表單處理的複雜性，並使表單提交更簡單。Formic 使用 yup 來驗證表單欄位，這非常易於使用首先安裝 formic 庫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 ... 閱讀更多

讓我們看看如何建立簡單的 React 函式式元件元件是 React 庫的構建塊。元件有兩種型別。有狀態元件無狀態元件有狀態元件有一個可以內部操作的本地 state 物件。無狀態元件沒有本地 state 物件，但我們可以在其中使用 React hook 新增一些 state。建立簡單的 ES6 函式const player = () => { }這裡我們對函式名使用了 const 關鍵字，以便它不會意外地被修改。讓我們新增一個帶有某些 jsx 程式碼的 return 語句。const player = () => {    return (       我是... 閱讀更多