我们有一个名为 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 (       我是... 阅读更多