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