首先，我们必须理解两个主要概念：同步编程和异步编程。同步编程：它等待每个语句完成执行后再执行下一个语句。如果语句之间不依赖，但仍然需要等待执行（因为它们在队列中），这种方法会减慢应用程序的处理速度。异步编程：它不会等待当前语句完成执行，就会移动到下一个语句。例如，在 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 中可供垃圾回收。清理活动可以在此方法中完成。例如，清除应用程序中使用的 localStorage 变量，清除会话，清理图表，清理计时器，取消挂起的 api 请求等。componentWillUnmount(){    this.resetSession(); // 清理会话的示例方法 ... 阅读更多

每个有状态的基于类的组件都经历四个生命周期阶段：挂载或创建、更新、卸载或销毁、错误处理阶段。React.js 组件生命周期 - 挂载阶段 在创建生命周期中执行的方法包括：构造函数、componentWillMount（仅在 17 版本之前可用）、render、componentDidMount。构造函数() 这是一个 ES6 特性，而不是 React 提供的方法。React 使用构造函数将 props 传递给继承自 React 库的父组件。constructor(props){    super( props ); }将 props 传递给父组件有助于我们在组件中使用 this.props。我们可以在构造函数中初始化组件的状态。重要的是，我们不应该在构造函数中使用 setState 方法。... 阅读更多