在构建 ReactJS 应用程序时，所有 JSX 代码都需要包装在一个父标签内。ReactJS 碎片是在 React 16.2 版本中引入的，以消除定义额外标签（也占用额外内存）的需要。无碎片以下示例代码显示了如何在没有 React 碎片的情况下创建简单的 React 应用程序。示例App.jsximport React from 'react'; class App extends React.Component {    render() {       return (                       TutorialsPoint             Simply Easy Learning               ... 阅读更多

在本文中，我们将了解组件和纯组件之间的区别。在 ReactJS 中，组件被广泛用于使应用程序更有效率和更有效地使用。ReactJS 提供了两种不同的使用组件的方式 - Component 或 PureComponent。Component它是一种组件类型，每次传递给它的 props 发生变化或其父组件重新渲染时，它都会重新渲染自身。我们以下示例中的第一个组件是 App。此组件是 Comp1 组件的父组件。我们分别创建 Comp1，并将其添加到 App 组件中的 JSX 树中。只有 App ... 阅读更多

在本文中，我们将了解如何在函数组件中清理 useEffect 钩子中设置的订阅。创建效果后，需要在组件从 DOM 中移除之前对其进行清理。为此，清理效果用于在再次使用同一组件的此钩子之前移除先前 useEffect 钩子的效果。语法useEffect(()=>{    return ()=>{} } ,[]);示例在此示例中，我们将构建一个 React 应用程序，当鼠标指针在屏幕上移动时，它会显示鼠标指针的坐标。为了实现这一点，我们 ... 阅读更多

在本文中，我们将了解优化 React 应用程序的方法。为了创建真实的 React 应用程序，需要高度优化的代码来增强性能。有多种方法可以优化 React 应用程序，但以下列出了一些最常用的方法 - 记忆化它是一种通过将结果存储为缓存并仅在输入更改时再次调用函数来加速应用程序的技术，否则将返回缓存的结果。对于函数组件，使用 React.memo()。此方法用于仅在传递给 ... 阅读更多

在本文中，我们将了解如何在 React 应用程序中设置和检索用户浏览器 localStorage 内存中的数据。LocalStorage 是一个 Web 存储对象，用于在用户的计算机上本地存储数据，这意味着存储的数据在浏览器会话之间保存，并且存储的数据没有过期时间。语法// 存储数据 localStorage.setItem('Name', 'Rahul'); // 检索数据 localStorage.getItem('Name'); // 清除特定项目 localStorage.removeItem('Name'); // 清除 localStorage 中存储的所有数据 localStorage.clear();在 localStorage 中设置、检索和移除数据在此示例中，我们将构建一个 React ... 阅读更多

在本文中，我们将学习如何延迟加载应用程序的页面，以使我们的 React 应用程序得到更好的优化。React 应用程序与预安装的捆绑器（如 webpack）捆绑在一起，然后才能使 React 应用程序准备好投入生产。加载此捆绑项目时，它会一次加载整个源代码，即使是用户很少访问的页面也是如此。因此，为了防止一次加载整个应用程序，我们使用延迟加载的概念来减少 DOM 加载时间并提高应用程序速度。语法const OtherComponent = React.lazy(() => ... 阅读更多

在本文中，我们将了解如何将 CSS 文件、图像和在其他文件夹中定义的函数导入到主 App.js 文件中。在 React 中，我们需要动态地从其文件夹中导入图像。示例在此示例中，我们将定义一个项目结构，其中图像和组件已在 assets 和 components 文件夹中定义，然后我们将动态地将它们导入到我们的主 App.js 文件中。项目结构App.jsimport React from 'react'; import MyComponent from './components/my -component.js'; import TutorialsPoint from './assets/img.png'; const App = () => {    return (           ... 阅读更多

在本文中，我们将学习如何在 React 应用程序中使用 axios 发送和接收 Http 响应。为什么要使用 axios？自动将响应转换为 JSON 格式易于使用且更安全设置全局 HTTP 拦截器同时请求安装模块npm install axiosORyarn add axiosNpm 是节点包管理器，它管理我们的 React 包，但 yarn 是更安全、更快且更轻量级的包管理器。发送 GET 请求https://jsonplaceholder.typicode.com/todos/1Jsonplaceholder 是一个虚假 API，用于学习发送请求的过程。示例App.jsximport React, { useEffect, useState } from 'react'; const App = () => {    const [data, setData] = useState(null);    const ... 阅读更多

在本文中，我们将了解如何在 React 应用程序中将内联样式应用于组件。Radium 是一个流行的第三方包应用程序，用于向 JSX 元素添加内联样式和伪选择器，如 :hover、:focus、:active 等。安装模块npm install --save radiumORyarn add radiumNpm 是节点包管理器，它管理我们的 React 包，但 yarn 是更安全、更快且更轻量级的包管理器。示例App.jsximport Radium from 'radium'; import React from 'react'; function App() {    const style = {       ':hover': {          backgroundColor: '#000',     ... 阅读更多

在本文中，我们将了解如何在 React 应用程序中从子组件更新父组件的状态。要从子组件更新父组件的状态，我们可以使用 Redux 等附加依赖项，或者可以使用这种简单的方法将父组件的状态传递给子组件并相应地处理它。示例在此示例中，我们将构建一个 React 应用程序，它从父组件获取状态和更新它的方法，并将其传递给子组件，并在处理后，我们将更新后的状态传递给 ... 阅读更多