使用 proptypes 可以确保组件接收 props 的类型安全，也有助于进行正确的计算。例如 - 如果我们接收 name 为字符串，age 为数字，那么应该以相同的类型接收。如果我们以字符串的形式接收 age，则可能导致计算错误。要使用 proptypes，我们必须安装以下包。npm install –save prop-types 此包由 React 团队提供。要在组件上使用它，我们首先要导入它 import PropType from ‘prop-types’; 我们可以在任何类型的组件（有状态或无状态）上使用它。在导出组件之前的组件末尾 ... 阅读更多

首先，我们必须理解两个主要概念：同步编程异步编程同步编程它等待每个语句完成执行后再执行下一个语句。如果语句彼此不依赖，这种方法会减慢应用程序的处理速度，但它们仍然在队列中等待执行。异步编程它不会等待当前语句完成执行后再执行下一个语句。例如，在 JavaScript 中调用 Web 服务和执行文件复制。对 Web 服务的调用可能需要一些时间才能返回结果，在此期间我们可以完成其他一些操作。一旦服务器提供结果，... 阅读更多

React.js 中的样式可以通过以下两种方式完成：css 样式表内联样式让我们先看看 CSS 样式表我们有 App.js 文件，如下所示：import React, {Component} from 'react'; import './App.css'; class App extends Component {    render(){       return (                       样式React组件                   );    } } export default App;在 App.js 文件中，我们导入了包含 css 类 myColoredText 的 App.css 文件请注意我们用双引号将 css 类的名称与属性 className 一起使用JSX 使用 ... 阅读更多

让我们首先从编写一个简单的 HTML 代码开始，看看我们如何使用 React基本的 React 示例 - 创建一个简单的 div，如下所示：    Steve    我的爱好：板球添加一些样式元素。player{    border:1px solid #eee;    width:200px;    box-shadow:0 2px 2px #ccc;    padding: 22px;    display:inline-block;    margin:10px; }这就像 Web 应用程序中的普通 html 数据。现在，我们可能有许多相同的玩家，然后我们必须像下面这样复制相同的 div    David    我的爱好：板球这些 div 的结构相同，但内部的数据不同。在这里，... 阅读更多

通常，React 的 render 方法中的 return 语句返回一个包含所有子 jsx 的单个 div 元素，如下所示：render(){    return (                Header          Test          ); }在这里，我们不能简单地返回多个元素，我们需要一个类似于 div 的父容器，如上所示。如果没有父容器元素，我们甚至可以返回一个数组，如下所示：返回数组时，我们需要为数组的每个元素提供一个唯一的键render(){    return (   ... 阅读更多

了解无状态和有状态 React 组件的区别在状态管理文章中，我们学习了如果某些内容发生更改，我们如何在 React 中处理状态。无状态组件是简单的函数组件，没有局部状态，但请记住，React 中也存在一个 hook，可以向函数组件添加状态行为。有状态组件可以包含状态对象和事件处理函数，以及用户操作。无状态组件本质上是纯净的，它执行非常具体的任务。import React from 'react'; const player = (props) => {    return (                我是一个玩家： ... 阅读更多

在 React Router v4 之前，React 中的路由是静态的，但在 v4 更新后它是动态的。在单页应用程序中，我们只有一个页面 index.html 和不同的组件，这些组件根据路由显示。在非 spa web 应用程序中，服务器根据请求返回页面。要开始路由，首先安装路由包：npm install –save react-router-dom一旦我们使用 create-react-app 创建项目，我们将看到只有一个 html 文件，即 index.html 和一个名为 App 的组件现在，我们将创建另外两个组件 AboutUs.jsx 和 ContactUs.jsxAboutUs.jsximport React from 'react' class ... 阅读更多

错误处理主要有两种方法。这些方法用于 React 中的错误边界机制。我们将组件（可能发生错误的地方）包装在一个处理以下方法的类中。静态方法 getDerivedStateFromError(error)componentDidCatch(error, info)静态 getDerivedStateFromError(error)：顾名思义，我们可以根据从子组件接收到的错误在此更新状态对象。componentDidCatch(error, info)：我们可以使用 api 调用记录错误。这有助于在屏幕上显示有用的错误消息，而不是技术错误。如果一个类实现了 ... 阅读更多

更新生命周期可以由两个事件触发：父组件更新 props局部状态更改父组件更新 propscomponentWillReceiveProps(nextProps) - 这是在 prop 更改时调用的第一个方法。它包含一个参数 nextProps，表示新更改的 props。在这里，如果需要，我们可以将局部状态与 props 同步如果不需要将状态与 props 同步，则可能不需要实现此方法。应避免在此处产生副作用。因为如果在此处使用副作用，则可能导致重新渲染或性能问题。现在，componentWillReceiveProps 已弃用，并由静态方法 getDerivedStateFromProps(props, state) 替换。作为 ... 阅读更多

`componentWillUnmount` 是卸载阶段唯一执行的方法。当元素树中没有与该组件匹配的元素时，组件进入此阶段。在组件从实际 DOM 中移除之前，会调用此方法。随着此组件从 DOM 树中移除，其所有子组件也会自动移除。组件从 DOM 中移除后，它将可供 React 进行垃圾回收。可以在此方法中执行清理活动。例如：清除应用程序中使用的本地存储变量、清除会话、清理图表、清理计时器、取消挂起的 API 请求等。`componentWillUnmount(){    this.resetSession(); // 例如... 阅读更多