使用 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 代码开始，看看我们如何使用 ReactReact 基本示例 - 创建一个简单的 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 (                标题          测试          ); }在这里，我们不能简单地返回多个元素，我们需要有一个类似于 div 的父容器，如上所示。如果没有父容器元素，我们甚至可以返回一个数组，如下所示 -在返回数组时，我们将需要为数组的每个元素提供一个唯一的键render(){    return (   ... 阅读更多

了解无状态和有状态 React 组件之间的区别在状态管理文章中，我们学习了如何在 React 中处理状态（如果某些内容发生了更改）。无状态组件是简单的函数组件，没有本地状态，但请记住，React 中也存在一个挂钩，可以在函数组件中添加状态行为。有状态组件可以包含状态对象和事件处理函数，以及用户操作。无状态组件本质上是纯净的，它执行非常特定的任务。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 更新本地状态的变化父组件的 props 更新componentWillReceiveProps(nextProps) -这是在 prop 更改时调用的第一个方法。它包含一个参数 nextProps，表示新更改的 props。在这里，如果需要，我们可以将本地状态与 props 同步如果不需要将状态与 props 同步，则可能不需要实现此方法。应避免在此处导致副作用。因为如果在此处使用副作用，可能会导致重新渲染或性能问题。现在，componentWillReceiveProps 已弃用，并替换为静态方法 getDerivedStateFromProps(props, state)。作为... 阅读更多

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