每个有状态的，即基于类的组件都会经历四种生命周期阶段。装载或创建更新卸载或销毁错误处理阶段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 ... 阅读更多