Compartir tecnología

Reaccionar aprendizaje básico-Día01

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Reaccionar aprendizaje básico-Día01

1. Introducción a reaccionar

1.1 ¿Qué es reaccionar?

React es una biblioteca JavaScript de código abierto para crear interfaces de usuario, desarrollada y mantenida por Facebook. Desde que fue de código abierto en 2013, React se ha convertido en una opción popular para el desarrollo front-end y se usa ampliamente en el desarrollo de aplicaciones de una sola página (SPA) y aplicaciones complejas de varias páginas. El objetivo principal de React es simplificar el desarrollo de la interfaz de usuario y hacerlo más eficiente, flexible y mantenible.

1.2 ¿Cuáles son las ventajas de reaccionar?

1.2.1 Las ventajas de reaccionar en comparación con DOM
  1. DOM virtual y actualizaciones eficientes
    • DOM virtual : React utiliza un DOM virtual como copia en memoria para representar estructuras de UI. Cada vez que se actualizan los datos, React primero realiza cálculos y comparaciones en el DOM virtual y luego actualiza las partes modificadas al DOM real en lotes. Esta optimización puede reducir significativamente las operaciones DOM y mejorar el rendimiento.
    • Reducir los redibujados y los reflujos: A través del DOM virtual, React puede evitar la manipulación directa frecuente del DOM real, reducir el repintado y el reflujo de la página, mejorando así la velocidad de respuesta y el rendimiento de la página.
  2. Componentización y reutilización
    • Componentización : React fomenta la división de la interfaz de usuario en componentes independientes, donde cada componente es responsable de su propia interfaz de usuario y lógica. Este diseño modular facilita a los desarrolladores la reutilización, prueba y mantenimiento del código.
    • Componente personalizado : Los desarrolladores pueden crear componentes personalizados y crear interfaces de usuario complejas combinando estos componentes. Este tipo de flexibilidad y reutilización no está disponible en las operaciones DOM tradicionales.
  3. estilo de programación declarativa
    • declarativo : El estilo de programación de React es declarativo. Los desarrolladores solo necesitan describir cómo debería verse la interfaz de usuario y no necesitan preocuparse por cómo operar el DOM para las actualizaciones. Este enfoque es más intuitivo y fácil de entender, mejorando la mantenibilidad del código.
    • impulsado por datos: React enfatiza impulsar los cambios de la interfaz de usuario a través del estado y las propiedades (accesorios). Cuando los datos cambian, React es responsable de actualizar la interfaz de usuario y los desarrolladores no necesitan operar el DOM manualmente.
  4. Capacidades multiplataforma
    • Reaccionar nativo : Además de las aplicaciones web, React también admite la creación de aplicaciones móviles nativas utilizando el mismo modelo de componentes. React Native proporciona una forma de crear interfaces de usuario nativas de alto rendimiento en iOS y Android, lo que permite a los desarrolladores compartir la mayor parte de su código y habilidades, lo que reduce los costos de desarrollo y las curvas de aprendizaje.
  5. Apoyo a la comunidad y al ecosistema
    • enorme comunidad: React tiene una comunidad grande y activa que proporciona una gran cantidad de bibliotecas, herramientas y soluciones de terceros para ayudar a los desarrolladores a desarrollar e implementar aplicaciones de manera más eficiente.
    • Biblioteca de componentes: Existen muchas bibliotecas de componentes de UI excelentes (como Material-UI, Ant Design, etc.) y herramientas de administración de estado (como Redux, MobX, etc.) que se pueden usar junto con React para mejorar aún más la eficiencia del desarrollo y la aplicación. actuación.

En resumen, en comparación con las operaciones DOM tradicionales, React proporciona un método de desarrollo más eficiente, mantenible y escalable a través de características como DOM virtual, componenteización y programación declarativa. Estas ventajas hacen de React uno de los marcos principales en el desarrollo front-end y se usa ampliamente en proyectos de todos los tamaños y tipos.

1.2.2 Comparación entre reaccionar y otros marcos
  1. Flexibilidad y personalización
    • Reaccionar : React en sí es una biblioteca en lugar de un marco completo. Se centra más en proporcionar herramientas y mecanismos básicos para crear interfaces de usuario. Los desarrolladores pueden elegir libremente utilizar otras bibliotecas y herramientas (como Redux, React Router, etc.) él. Esta flexibilidad permite a los desarrolladores personalizar y optimizar con mayor precisión en función de las necesidades del proyecto.
    • Vue.js: Vue.js proporciona una solución más completa, que incluye enrutamiento, administración de estado y herramientas de compilación. Para aplicaciones pequeñas y medianas, Vue.js proporciona más funciones listas para usar y reduce la complejidad de la integración y la configuración. .
  2. Implementación de DOM virtual
    • Reaccionar: React utiliza un conjunto de algoritmos de diferencias y DOM virtuales eficientes, lo que hace que React funcione bien al procesar grandes colecciones de datos y actualizaciones frecuentes de datos.
    • Vue.js: Vue.js también utiliza tecnología DOM virtual similar, pero en algunas pruebas, el algoritmo de diferenciación de React puede ser más rápido, especialmente cuando se trata de actualizaciones complejas de la interfaz de usuario.
  3. Apoyo al ecosistema y a la comunidad.
    • Reaccionar: React tiene una comunidad grande y activa que admite una gran cantidad de bibliotecas y herramientas de terceros, como Redux, Material-UI, etc. Estas bibliotecas pueden ayudar a los desarrolladores a crear aplicaciones complejas de una sola página y proyectos a gran escala.
    • Vue.js: La comunidad Vue.js también es muy activa. El ecosistema Vue.js proporciona muchos complementos y herramientas, como Vuex (administración de estado), Vue Router (administración de enrutamiento), etc., que brindan a los desarrolladores más opciones y soluciones de integración. .
  4. Curva de aprendizaje y facilidad de uso.
    • Reaccionar : La curva de aprendizaje de React es relativamente pronunciada, especialmente para los principiantes, que necesitan dominar conceptos como JSX, ciclo de vida de componentes y gestión de estado. Pero una vez que domine los conceptos básicos de React, los desarrolladores podrán crear y mantener aplicaciones complejas de manera más eficiente.
    • Vue.js : La curva de aprendizaje de Vue.js es relativamente suave, está más cerca de HTML, CSS y JavaScript tradicionales y es amigable tanto para desarrolladores experimentados como para principiantes. La documentación y los tutoriales de Vue.js también son muy completos y ayudan a los desarrolladores a comenzar rápidamente.
  5. Cultura comunitaria y capacidad de respuesta.
    • Reaccionar : La comunidad React tiende a prestar más atención al rendimiento y la flexibilidad, y también está más inclinada a utilizar pilas de tecnología de tipo seguro como TypeScript. Como principal mantenedor de React, Facebook tiene altas garantías de seguridad y estabilidad.
    • Vue.js : La comunidad Vue.js es más abierta y amigable y se centra en la experiencia del desarrollador y la facilidad de uso. Vue.js también es más fácil de integrar con otras pilas de tecnología, como la integración con bibliotecas o proyectos existentes.

En términos generales, React y Vue.js son excelentes marcos de desarrollo front-end. La elección del marco adecuado depende de los requisitos del proyecto, la tecnología del equipo y las preferencias del desarrollador. React puede ser más adecuado para aplicaciones grandes y complejas, especialmente escenarios que requieren un alto grado de flexibilidad y personalización, mientras que Vue.js es más adecuado para desarrollo rápido y aplicaciones pequeñas y medianas, proporcionando soluciones más integradas y convenientes.

1.2.3 Cómo React reduce el redibujado y la reorganización en comparación con DOM

Repintar y refluir

  1. repintar: Cuando el estilo de apariencia del elemento (como color, fondo, visibilidad) cambia, pero no afecta el diseño, se activará un nuevo dibujo.
  2. Reflujo : Cuando el tamaño, la posición o la estructura de un elemento cambian, afectando el diseño, se activará el reflujo. Refluir es más costoso que volver a dibujar porque es necesario recalcular el diseño y el árbol de renderizado.

Cómo React reduce los redibujos y los reflujos

  1. DOM virtual (DOM virtual)
    • DOM virtual : React crea un DOM virtual, que es una copia liviana de la interfaz de usuario, guardada en la memoria. Cada vez que cambie el estado o las propiedades de un componente, React realizará cálculos y comparaciones en el DOM virtual para generar un nuevo árbol DOM virtual.
    • Algoritmo de diferencia: React utiliza un algoritmo de diferenciación eficiente para comparar los árboles DOM virtuales antiguos y nuevos, encontrar las partes modificadas y generar un parche de actualización.
  2. Minimizar la manipulación DOM real
    • Actualización por lotes : React combina múltiples actualizaciones de estado en una actualización por lotes para reducir la cantidad de operaciones DOM. La actualización por lotes evita la pérdida de rendimiento causada por operaciones DOM frecuentes al actualizar varios cambios a la vez.
    • Actualizaciones asincrónicas: React utiliza procesamiento por lotes asíncrono (como el modo concurrente introducido en React 18) para fusionar múltiples actualizaciones de estado y evitar operaciones DOM sincrónicas frecuentes.
  3. Evite actualizaciones innecesarias
    • shouldComponentUpdate: Se puede utilizar en componentes de clase. shouldComponentUpdate Método para controlar si es necesario volver a renderizar el componente para evitar redibujos y redibujos innecesarios.
    • Reaccionar.memo: Se pueden utilizar componentes de función React.memo Para optimizar el rendimiento, comparará las propiedades antes y después, y solo volverá a renderizar el componente cuando las propiedades cambien.
    • useMemo yuseCallback: Proporcionado por Ganchos useMemo yuseCallback Los resultados de los cálculos y las referencias de funciones se pueden almacenar en caché para evitar actualizaciones innecesarias de los subcomponentes.
  4. Fusionar actualizaciones
    • Actualizaciones de estado de lotes: React fusionará automáticamente múltiples actualizaciones de estado y solo activará una representación en un bucle de eventos, lo que reducirá las operaciones DOM.

Código de muestra

El siguiente ejemplo demuestra cómo React puede pasar React.memo yuseMemo Para reducir el renderizado innecesario:

import React, { useState, useMemo } from 'react';

// 一个简单的子组件,仅在 props 变化时重新渲染
const ChildComponent = React.memo(({ value }) => {
  console.log('ChildComponent render');
  return <div>{value}</div>;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 使用 useMemo 缓存计算结果,避免不必要的计算
  const memoizedValue = useMemo(() => {
    console.log('Calculating memoized value');
    return count * 2;
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input 
        type="text" 
        value=
                    
                        
                    
                    

React基础学习-Day01

1.React介绍

1.1 react是什么?

React 是一个用于构建用户界面的开源 JavaScript 库,由 Facebook 开发和维护。自 2013 年开源以来,React 已成为前端开发的热门选择,广泛应用于单页应用(SPA)和复杂的多页应用的开发。React 的主要目标是简化 UI 开发,使其更加高效、灵活和可维护。

1.2 react的优势?

1.2.1 react对比DOM的优势体现
  1. 虚拟 DOM 和高效更新
    • 虚拟 DOM:React 使用虚拟 DOM 作为内存中的副本来表示 UI 结构。每次数据更新时,React 首先在虚拟 DOM 中进行计算和比较,然后再将变化的部分批量更新到实际 DOM 中。这种优化能够显著减少 DOM 操作,提升性能。
    • 减少重绘和回流:通过虚拟 DOM,React 可以避免频繁地直接操作实际 DOM,减少页面重绘(repaint)和回流(reflow),从而提高页面的响应速度和性能。
  2. 组件化和可复用性
    • 组件化:React 鼓励将 UI 拆分为独立的组件,每个组件负责自己的 UI 和逻辑。这种模块化的设计使得开发者可以更容易地复用、测试和维护代码。
    • 自定义组件:开发者可以创建自定义的组件,并通过组合这些组件来构建复杂的 UI。这种灵活性和可复用性是传统 DOM 操作所不具备的。
  3. 声明式编程风格
    • 声明式:React 的编程风格是声明式的,开发者只需描述 UI 应该是什么样子,而不需要关心如何操作 DOM 进行更新。这种方式更加直观和易于理解,提高了代码的可维护性。
    • 数据驱动:React 强调通过状态(state)和属性(props)来驱动 UI 的变化,数据变化时,React 负责更新 UI,开发者无需手动操作 DOM。
  4. 跨平台能力
    • React Native:除了 Web 应用外,React 还支持使用相同的组件模型构建原生移动应用。React Native 提供了一种在 iOS 和 Android 上构建高性能、原生用户界面的方式,这使得开发者可以共享大部分代码和技能,减少开发成本和学习曲线。
  5. 社区和生态系统支持
    • 庞大的社区:React 拥有一个活跃和庞大的社区,提供了丰富的第三方库、工具和解决方案,帮助开发者更高效地开发和部署应用。
    • 组件库:有许多优秀的 UI 组件库(如 Material-UI、Ant Design 等)和状态管理工具(如 Redux、MobX 等),可以与 React 配合使用,进一步提升开发效率和应用性能。

总结来说,React 相对于传统的 DOM 操作,通过虚拟 DOM、组件化、声明式编程等特性,提供了更高效、可维护和可扩展的开发方式。这些优势使得 React 成为前端开发中的主流框架之一,被广泛应用于各种规模和类型的项目中。

1.2.2 react与其他框架的对比
  1. 灵活性和可定制性
    • React:React 本身是一个库而非完整的框架,它更注重于提供构建用户界面的核心工具和机制,开发者可以自由选择配合使用其他库和工具(如 Redux、React Router 等)。这种灵活性使得开发者可以根据项目需求进行更精确的定制和优化。
    • Vue.js:Vue.js 提供了更全面的解决方案,包括路由、状态管理和构建工具等,对于小型到中型应用,Vue.js 提供了更多开箱即用的功能,减少了集成和配置的复杂性。
  2. 虚拟 DOM 的实现
    • React:React 使用了一套高效的虚拟 DOM 和 diff 算法,这使得 React 在处理大型数据集合和频繁数据更新时性能表现优越。
    • Vue.js:Vue.js 也使用了类似的虚拟 DOM 技术,但在一些测试中,React 的 diff 算法可能会更快一些,尤其是在处理复杂的 UI 更新时。
  3. 生态系统和社区支持
    • React:React 拥有一个庞大和活跃的社区,支持丰富的第三方库和工具,如 Redux、Material-UI 等,这些库能够帮助开发者构建复杂的单页应用和大型项目。
    • Vue.js:Vue.js 社区同样非常活跃,Vue.js 生态系统提供了许多插件和工具,如 Vuex(状态管理)、Vue Router(路由管理)等,为开发者提供了更多的选择和集成方案。
  4. 学习曲线和易用性
    • React:React 的学习曲线相对较陡,特别是对于初学者来说,需要掌握 JSX、组件生命周期、状态管理等概念。但一旦掌握了 React 的核心概念,开发者可以更高效地构建和维护复杂的应用。
    • Vue.js:Vue.js 的学习曲线相对平缓,它更接近传统的 HTML、CSS 和 JavaScript,对于有经验的开发者和新手来说都较为友好。Vue.js 的文档和教程也很全面,帮助开发者快速入门和上手。
  5. 社区文化和响应性
    • React:React 社区倾向于更加注重性能和灵活性,也更倾向于使用 TypeScript 等类型安全的技术栈。Facebook 作为 React 的主要维护者,对于安全性和稳定性有较高的保障。
    • Vue.js:Vue.js 社区更加开放和友好,注重开发者体验和易用性。Vue.js 也更容易与其他技术栈集成,比如可以很方便地与现有的项目或库整合。

总体来说,React 和 Vue.js 都是优秀的前端开发框架,选择适合的框架取决于项目需求、团队技术栈和开发者的偏好。React 在大型和复杂的应用中可能更适合,特别是需要高度灵活性和可定制性的场景;而 Vue.js 则更适合于快速开发和中小型应用,提供了更多集成和便捷的解决方案。

1.2.3 react对比DOM如何减少重绘和重排

重绘 (Repaint) 和回流 (Reflow)

  1. 重绘 (Repaint):当元素的外观样式(如颜色、背景、可见性)发生变化,但不影响布局时,会触发重绘。
  2. 回流 (Reflow):当元素的尺寸、位置或结构发生变化,影响布局时,会触发回流。回流比重绘更耗费性能,因为需要重新计算布局和渲染树。

React 如何减少重绘和回流

  1. 虚拟 DOM (Virtual DOM)
    • 虚拟 DOM:React 创建了一个虚拟 DOM,它是 UI 的轻量级副本,保存在内存中。每次组件的状态或属性发生变化时,React 会在虚拟 DOM 中进行计算和比较,生成新的虚拟 DOM 树。
    • Diff 算法:React 使用高效的 diff 算法比较新旧虚拟 DOM 树,找出变化的部分,并生成一个更新补丁。
  2. 最小化实际 DOM 操作
    • 批量更新:React 将多个状态更新合并为一次批量更新,减少 DOM 操作次数。批量更新通过一次性更新多个变化,避免频繁操作 DOM 导致的性能损耗。
    • 异步更新:React 通过异步批处理(例如 React 18 中引入的 Concurrent Mode),将多次状态更新合并处理,避免频繁的同步 DOM 操作。
  3. 避免不必要的更新
    • shouldComponentUpdate:类组件中可以使用 shouldComponentUpdate 方法来控制组件是否需要重新渲染,从而避免不必要的重绘和回流。
    • React.memo:函数组件可以使用 React.memo 进行性能优化,它会对比前后属性,只有属性变化时才会重新渲染组件。
    • useMemouseCallback:Hooks 提供的 useMemouseCallback 可以缓存计算结果和函数引用,避免子组件不必要的更新。
  4. 合并更新
    • 批量状态更新:React 会自动合并多次状态更新,在一次事件循环内只触发一次渲染,从而减少 DOM 操作。

示例代码

以下示例演示了 React 如何通过 React.memouseMemo 来减少不必要的渲染:

import React, { useState, useMemo } from 'react';

// 一个简单的子组件,仅在 props 变化时重新渲染
const ChildComponent = React.memo(({ value }) => {
  console.log('ChildComponent render');
  return <div>{value}</div>;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 使用 useMemo 缓存计算结果,避免不必要的计算
  const memoizedValue = useMemo(() => {
    console.log('Calculating memoized value');
    return count * 2;
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
      />
      <ChildComponent value={memoizedValue} />
    </div>
  );
}

export default App;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

在这个示例中:

  • ChildComponent 只有在 value 变化时才会重新渲染,因为它被 React.memo 包裹。
  • memoizedValue 使用 useMemo 进行缓存,只有在 count 变化时才会重新计算,避免了不必要的计算和渲染。

总结

通过虚拟 DOM、批量更新、避免不必要的更新和合并更新,React 有效地减少了重绘和回流的次数,从而提升了应用的性能。与传统的直接操作 DOM 的方式相比,React 提供了一种更加高效和优化的 UI 更新机制。

2.jsx语法介绍

.jsxJavaScript XML 的缩写,它是一种 JavaScript 的语法扩展,允许开发者在 JavaScript 中直接编写类似 HTML 的标记语言,用于定义 React 组件的 UI 结构。以下是一些 .jsx 语法的核心特点和使用方法:

主要特点:

  1. 类 HTML 结构
    • .jsx 允许在 JavaScript 中嵌入类似 HTML 的标记语言,用于声明 UI 的结构和组件的外观。
    • 例如,在 React 中,可以直接使用 <div><span><h1> 等 HTML 标签,以及自定义的 React 组件。
  2. JSX 表达式
    • .jsx 中,可以使用 {} 花括号来包裹 JavaScript 表达式,用于在标记中动态地插入变量、计算结果或函数调用。
    • 这使得 .jsx 具有了 JavaScript 的全部表达能力,可以进行条件判断、循环、计算等操作。
  3. 属性传递
    • 类似 HTML,.jsx 允许在标签上使用属性,并支持使用表达式作为属性值。
    • 例如:<Component name={variable} />,其中 name 是一个属性,variable 是一个 JavaScript 变量或表达式。
  4. 自闭合标签
    • .jsx 中的标签可以是自闭合的,比如 <img><input>,也可以使用 / 符号来表示自闭合,例如 <br />
  5. 注释
    • 和 JavaScript 一样,可以使用 // 单行注释和 /* */ 多行注释在 .jsx 文件中添加注释(注释要写在{}内)。

示例:

以下是一个简单的 React 组件示例,展示了 .jsx 的基本语法和特点:

import React from 'react';

// 定义一个 React 函数组件
const MyComponent = () => {
  const name = 'World';

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to JSX!</p>
      <ul>
        {['apple', 'banana', 'cherry'].map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这个例子中:

  • <h1><p><ul><li> 等标签直接在 JavaScript 函数中使用,用于构建组件的 UI 结构。
  • 使用 {name}<h1> 中动态地插入变量 name 的值。
  • 使用 {} 花括号包裹的 JavaScript 表达式,例如 ['apple', 'banana', 'cherry'].map() 来生成列表项 <li>
  • key={index} 用于在 React 中标识列表项的唯一性,帮助 React 更高效地管理组件的更新。

注意事项:

  • JSX 本质上是 JavaScript 语法的扩展,需要通过 Babel 等工具进行编译转换成标准的 JavaScript 代码,以便浏览器能够正确解析和执行。
  • JSX 让开发者可以更直观地编写和理解 React 组件的结构和逻辑,提高了代码的可读性和开发效率。

总结来说,.jsx 是 React 中用于定义组件 UI 结构的一种语法扩展,它结合了 JavaScript 的表达能力和 HTML 标记的直观性,是开发现代 Web 应用的重要工具之一。

3.jsx实现列表渲染

import React from 'react';

const MyComponent = () => {
  // 假设我们有一个水果列表
  const fruits = ['apple', 'banana', 'cherry'];

  return (
    <div>
      <h2>Fruit List:</h2>
      <ul>
        {/* 使用 map 方法遍历数组,并为每个元素生成一个 <li> 元素 */}
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

4.jsx实现条件渲染

4.1 三元运算符 (Ternary Operator)

这是最常用的方式,通过三元运算符来实现简单的条件渲染。

import React from 'react';

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

4.2. 逻辑与运算符 (Logical AND Operator)

适用于条件为真时才渲染内容的场景。

import React from 'react';

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

4.3. 立即执行函数表达式 (IIFE)

适用于需要执行更多逻辑或多条件判断的情况。

import React from 'react';

const MyComponent = () => {
  const status = 'loggedOut'; // 可以是 'loggedIn' 或 'loggedOut'

  return (
    <div>
      {(() => {
        if (status === 'loggedIn') {
          return <p>Welcome back!</p>;
        } else if (status === 'loggedOut') {
          return <p>Please sign in.</p>;
        } else {
          return <p>Status unknown.</p>;
        }
      })()}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

4.4 条件渲染组件

将条件渲染逻辑封装到单独的组件中,可以提高代码的可读性和复用性。

import React from 'react';

const Greeting = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  } else {
    return <p>Please sign in.</p>;
  }
};

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

5.React基础事件绑定

5.1 基本事件绑定

在 React 中,可以直接在 JSX 中通过类似 HTML 的方式来绑定事件处理函数。例如,给按钮绑定点击事件:

import React from 'react';

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这个例子中,onClick 是 React 的事件属性,它接收一个函数作为值。当按钮被点击时,handleClick 函数会被调用。

5.2 事件处理函数

React 的事件处理函数与普通的 JavaScript 事件处理函数类似,它们接收一个合成事件对象 (SyntheticEvent),而不是原生 DOM 事件对象。这使得跨浏览器的事件处理更加一致和可靠。

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    console.log('Button clicked!', event.target);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在上面的示例中,handleClick 函数的参数 event 是一个合成事件对象,可以通过 event.target 访问触发事件的 DOM 元素。

5.3 事件传参

有时候需要给事件处理函数传递额外的参数。可以使用箭头函数或者 bind 方法来实现这一点。

使用箭头函数:

import React from 'react';

const MyComponent = () => {
  const handleClick = (name) => {
    console.log(`Hello, ${name} clicked!`);
  };

  return (
    <div>
      <button onClick={() => handleClick('World')}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

使用 bind 方法:

import React from 'react';

const MyComponent = () => {
  const handleClick = (name) => {
    console.log(`Hello, ${name} clicked!`);
  };

  return (
    <div>
      <button onClick={handleClick.bind(null, 'World')}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

这两种方式都可以将 'World' 作为参数传递给 handleClick 函数。

5.4 阻止事件默认行为和冒泡

在 React 中,阻止事件的默认行为和冒泡可以通过合成事件对象的方法来实现。

阻止默认行为:

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    event.preventDefault();
    console.log('Button clicked!');
  };

  return (
    <div>
      <a href="#" onClick={handleClick}>Click me</a>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

阻止冒泡:

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Button clicked!');
  };

  return (
    <div onClick={() => console.log('Div clicked!')}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

总结

React 的事件绑定和处理与传统的 JavaScript 事件处理有些许差异,主要体现在事件对象的处理上,使用合成事件对象来实现跨浏览器一致性。通过上述方法,可以有效地在 React 中处理各种事件,并进行事件传参、阻止默认行为和冒泡等操作。

6.组件是什么?

在 React 中,组件是构建用户界面的基本单位,可以将 UI 分割成独立的、可复用的代码片段。组件可以是函数组件或类组件,它们可以接收输入的数据(称为 props)并返回描述页面展示内容的 React 元素。组件可以包含其他组件、HTML 标签和逻辑,使得复杂的 UI 可以被有效地管理和开发。

主要特点和作用:

  1. 封装和复用
    • 组件可以将 UI 划分成独立的部分,每个部分负责自己的功能,从而提高代码的可维护性和复用性。
  2. 组件层级
    • 组件可以嵌套组合,形成层次化的结构。父组件可以向子组件传递数据和函数,实现数据的流动和交互的功能。
  3. 状态管理
    • 类组件可以拥有状态(state),用于存储和管理组件内部的数据。状态的改变会触发组件的重新渲染,从而更新用户界面。
  4. 生命周期
    • 类组件具有生命周期方法,例如 componentDidMountcomponentDidUpdatecomponentWillUnmount 等,用于在组件生命周期不同阶段执行特定的逻辑。
  5. 纯UI组件和容器组件
    • 纯UI组件(Presentational Components)负责如何渲染数据,不涉及业务逻辑。容器组件(Container Components)则负责管理数据和状态,传递给纯UI组件。

示例:

以下是一个简单的 React 函数组件的示例,展示了一个名为 HelloWorld 的组件,它接收一个 name 属性作为输入,并渲染一个简单的问候语句:

import React from 'react';

// 函数组件:HelloWorld
const HelloWorld = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to React components.</p>
    </div>
  );
};

export default HelloWorld;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在这个例子中,HelloWorld 组件接收一个 name 属性,用于动态显示问候语。这种组件可以被多次使用,每次使用时传入不同的 name 属性,使得界面呈现的问候语可以个性化定制。

总之,React 组件是构建现代 Web 应用的核心概念之一,它们通过组合和抽象,使得开发者可以更加高效和灵活地构建用户界面。

7.useState使用介绍

useState 是 React 中的一个 Hook,用于在函数组件中添加状态管理功能。它允许你在函数组件中声明状态变量,并提供一个方法来更新这些状态。

使用方法

useState 是从 React 中导入的,并且通常在函数组件的顶部进行调用。它返回一个包含两个元素的数组:当前状态值和一个更新状态的函数。

基本示例

import React, { useState } from 'react';

const Counter = () => {
  // 声明一个名为 "count" 的状态变量,初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

在这个示例中:

  • const [count, setCount] = useState(0); 声明了一个名为 count 的状态变量,初始值为 0useState 返回一个数组,第一个元素是当前状态值(count),第二个元素是更新状态的函数(setCount)。
  • 每次点击按钮时,调用 setCount(count + 1) 更新 count 的值,从而触发组件的重新渲染,并更新显示的点击次数。

使用多个状态变量

你可以在一个组件中使用多个 useState 调用来管理不同的状态变量:

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />
      <p>You typed: {text}</p>
    </div>
  );
};

export default MultiStateComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

在这个示例中,我们使用了两个 useState 调用来分别管理 counttext 两个状态变量。

初始化状态

你可以将状态的初始值设置为函数返回的值,这在初始化需要执行复杂计算时特别有用:

import React, { useState } from 'react';

const ExpensiveComponent = () => {
  const initialCount = () => {
    // 模拟一个复杂的计算
    return 42;
  };

  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>Initial count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
};

export default ExpensiveComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

在这个示例中,initialCount 函数只会在组件初次渲染时执行一次,用于计算初始状态值。

总结

  • useState 是一个 React Hook,用于在函数组件中添加状态管理功能。
  • useState 返回一个包含当前状态值和一个更新状态的函数的数组。
  • 可以使用多个 useState 调用来管理多个状态变量。
  • 状态的初始值可以是一个复杂计算的结果,通过传递一个函数来实现。

8.修改状态的规则

在 React 中,使用 useState 来管理和修改状态时,有一些规则和最佳实践需要遵循,以确保状态的管理和更新过程是高效和可靠的。以下是修改状态的主要规则和一些示例:

1. 状态更新是异步的

React 的状态更新是异步的,这意味着调用状态更新函数后,状态的更新不会立即反映出来,而是在下一次重新渲染时才会生效。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 这里的 count 可能不会立即更新
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在上述例子中,console.log(count) 可能不会立即显示更新后的值,因为状态更新是异步的。

2. 状态更新函数接受当前状态作为参数

为了确保状态更新时使用的值是最新的,可以传递一个函数给状态更新函数。这个函数会接收当前的状态值作为参数。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这个示例中,setCount 接收一个函数 prevCount => prevCount + 1,确保使用的是最新的状态值进行更新。

3. 不要直接修改状态

状态应该是不可变的,不要直接修改状态对象,而是通过创建新对象来更新状态。

import React, { useState } from 'react';

const Example = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateAge = () => {
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.age}</p>
      <button onClick={updateAge}>Increment Age</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这个示例中,使用扩展运算符 ...prevUser 创建了一个新的用户对象,并更新了年龄属性。

4. 合并状态

对于对象类型的状态,需要手动合并更新的部分,因为 useState 不会自动合并更新对象。

import React, { useState } from 'react';

const Example = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    setUser(prevUser => ({
      ...prevUser,
      name: 'Doe'
    }));
  };

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这个示例中,setUser 的更新函数创建了一个新的用户对象,同时保持其他属性不变。

5. 避免不必要的状态更新

尽量避免在每次渲染中都调用状态更新函数,只有在需要时才更新状态,以提高性能。

import React, { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    if (count < 10) {
      setCount(count + 1);
    }
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这个示例中,只有在 count 小于 10 时才会更新状态,避免了不必要的状态更新。

总结

  1. 状态更新是异步的:不能依赖立即更新后的值。
  2. 使用函数式更新:在更新状态时,传递一个函数来确保使用最新的状态值。
  3. 不要直接修改状态:状态应该是不可变的,需要通过创建新对象来更新状态。
  4. 手动合并状态:对于对象类型的状态,需要手动合并更新部分。
  5. 避免不必要的状态更新:只有在需要时才更新状态,以提高性能。

9.基础样式方案

1.行内样式(不推荐):<div style={{color:“red”}}></>

2.class类名控制:

10.classNames优化类名控制

<div className={classNames(“foo”,{active:true})}>

onChange={(e) => setText(e.target.value)} /> <ChildComponent value={memoizedValue} /> </div> ); } export default App;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

En este ejemplo:

  • ChildComponent solo envalue Sólo se volverá a renderizar cuando cambie, porque esReact.memo embalar.
  • memoizedValue usaruseMemo Caché, sólo sicount Se volverá a calcular solo cuando cambie, evitando cálculos y renderizaciones innecesarios.

Resumir

A través del DOM virtual, actualizaciones por lotes, evitando actualizaciones innecesarias y fusionando actualizaciones, React reduce efectivamente la cantidad de redibujos y reflujos, mejorando así el rendimiento de la aplicación. En comparación con la forma tradicional de manipular directamente el DOM, React proporciona un mecanismo de actualización de UI más eficiente y optimizado.

2. Introducción a la sintaxis jsx

.jsxXML de JavaScript La abreviatura de es una extensión de sintaxis de JavaScript que permite a los desarrolladores escribir directamente un lenguaje de marcado similar a HTML en JavaScript para definir la estructura de la interfaz de usuario de los componentes de React.Aquí están algunas.jsx Las características principales y el uso de la gramática:

caracteristica principal:

  1. Estructura tipo HTML
    • .jsx Permite incrustar un lenguaje de marcado similar a HTML en JavaScript para declarar la estructura de la interfaz de usuario y la apariencia de los componentes.
    • Por ejemplo, en React, puedes usar directamente <div><span><h1> Etiquetas HTML y componentes React personalizados.
  2. expresión JSX
    • existir .jsx en, se puede utilizar{} Las llaves se utilizan para envolver expresiones de JavaScript y se utilizan para insertar dinámicamente variables, resultados de cálculos o llamadas a funciones en el marcado.
    • Esto hace .jsx Tiene todas las capacidades expresivas de JavaScript y puede realizar operaciones como juicio condicional, bucles y cálculos.
  3. Transferencia de propiedad
    • Similar a HTML,.jsx Permite el uso de atributos en etiquetas y admite expresiones como valores de atributos.
    • Por ejemplo:<Component name={variable} />,en name es un atributo,variable es una variable o expresión de JavaScript.
  4. etiqueta de cierre automático
    • .jsx Las etiquetas pueden tener cierre automático, como por ejemplo<img><input>, también puedes usar / símbolo para representar el autocierre, p.e.<br />
  5. Comentario
    • Al igual que JavaScript, puedes usar // comentarios de una sola línea y/* */ Comentarios de varias líneas en.jsx Agregar comentarios al archivo (Los comentarios deben escribirse dentro de {})。

Ejemplo:

Aquí hay un ejemplo simple del componente React que muestra .jsx Sintaxis y características básicas:

import React from 'react';

// 定义一个 React 函数组件
const MyComponent = () => {
  const name = 'World';

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to JSX!</p>
      <ul>
        {['apple', 'banana', 'cherry'].map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

En este ejemplo:

  • <h1><p><ul> y<li> Etiquetas como estas se utilizan directamente en funciones de JavaScript para crear la estructura de interfaz de usuario del componente.
  • usar {name} existir<h1> Insertar variables dinámicamente enname valor.
  • usar {} Expresiones de JavaScript entre llaves, por ejemplo['apple', 'banana', 'cherry'].map() para generar elementos de lista<li>
  • key={index} Se utiliza para identificar de forma única elementos de la lista en React, lo que ayuda a React a administrar las actualizaciones de componentes de manera más eficiente.

Precauciones:

  • JSX es esencialmente una extensión de la sintaxis de JavaScript.Debe compilarse y convertirse en código JavaScript estándar mediante herramientas como Babel., para que el navegador pueda analizarlo y ejecutarlo correctamente.
  • JSX permite a los desarrolladores escribir y comprender la estructura y la lógica de los componentes de React de forma más intuitiva, mejorando la legibilidad del código y la eficiencia del desarrollo.

En conclusión,.jsx Es una extensión de sintaxis utilizada en React para definir la estructura de la interfaz de usuario de los componentes. Combina el poder expresivo de JavaScript y la intuición de las etiquetas HTML. Es una de las herramientas importantes para desarrollar aplicaciones web modernas.

3.jsx implementa la representación de listas

import React from 'react';

const MyComponent = () => {
  // 假设我们有一个水果列表
  const fruits = ['apple', 'banana', 'cherry'];

  return (
    <div>
      <h2>Fruit List:</h2>
      <ul>
        {/* 使用 map 方法遍历数组,并为每个元素生成一个 <li> 元素 */}
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

4.jsx implementa renderizado condicional

4.1 Operador ternario

Esta es la forma más común de implementar una representación condicional simple mediante el operador ternario.

import React from 'react';

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

4.2. Operador lógico Y

Aplicable a escenarios donde el contenido se representa solo cuando la condición es verdadera.

import React from 'react';

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

4.3. Ejecutar inmediatamente la expresión de función (IIFE)

Adecuado para situaciones en las que es necesario realizar más juicios lógicos o de múltiples condiciones.

import React from 'react';

const MyComponent = () => {
  const status = 'loggedOut'; // 可以是 'loggedIn' 或 'loggedOut'

  return (
    <div>
      {(() => {
        if (status === 'loggedIn') {
          return <p>Welcome back!</p>;
        } else if (status === 'loggedOut') {
          return <p>Please sign in.</p>;
        } else {
          return <p>Status unknown.</p>;
        }
      })()}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

4.4 Componentes de renderizado condicional

Encapsular la lógica de representación condicional en componentes separados puede mejorar la legibilidad y reutilización del código.

import React from 'react';

const Greeting = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  } else {
    return <p>Please sign in.</p>;
  }
};

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

5.Reaccionar enlace de eventos básico

5.1 Enlace de eventos básico

En React, los controladores de eventos se pueden vincular directamente en JSX de forma similar a HTML. Por ejemplo, vincule un evento de clic a un botón:

import React from 'react';

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

En este ejemplo,onClick Es una propiedad de evento de React que recibe una función como valor. Cuando se hace clic en el botón,handleClick La función será llamada.

5.2 Función de manejo de eventos

Las funciones de manejo de eventos de React son similares a las funciones de manejo de eventos de JavaScript ordinarias. Reciben un objeto de evento sintético (SyntheticEvent) en lugar de un objeto de evento DOM nativo. Esto hace que el manejo de eventos en todos los navegadores sea más consistente y confiable.

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    console.log('Button clicked!', event.target);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

En el ejemplo anterior,handleClick parámetros de funciónevent es un objeto de evento sintético que se puede pasarevent.target Acceda al elemento DOM que desencadenó el evento.

5.3 Paso de parámetros de evento

A veces es necesario pasar parámetros adicionales a la función del controlador de eventos.Puede utilizar funciones de flecha obind método para lograrlo.

Utilice funciones de flecha:

import React from 'react';

const MyComponent = () => {
  const handleClick = (name) => {
    console.log(`Hello, ${name} clicked!`);
  };

  return (
    <div>
      <button onClick={() => handleClick('World')}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

usar bind método:

import React from 'react';

const MyComponent = () => {
  const handleClick = (name) => {
    console.log(`Hello, ${name} clicked!`);
  };

  return (
    <div>
      <button onClick={handleClick.bind(null, 'World')}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

Ambos métodos pueden ser 'World' pasado como parámetro ahandleClick función.

5.4 Evitar el comportamiento predeterminado y la propagación de eventos

En React, se puede evitar el comportamiento predeterminado y la propagación de eventos mediante métodos de objetos de eventos sintéticos.

Evitar el comportamiento predeterminado:

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    event.preventDefault();
    console.log('Button clicked!');
  };

  return (
    <div>
      <a href="#" onClick={handleClick}>Click me</a>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

Deja de burbujear:

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Button clicked!');
  };

  return (
    <div onClick={() => console.log('Div clicked!')}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

Resumir

El enlace y el procesamiento de eventos de React son ligeramente diferentes del procesamiento de eventos de JavaScript tradicional, lo que se refleja principalmente en el procesamiento de objetos de eventos y utiliza objetos de eventos sintéticos para lograr coherencia entre navegadores. A través del método anterior, se pueden procesar de manera efectiva varios eventos en React y se pueden realizar operaciones como el paso de parámetros de eventos, la prevención del comportamiento predeterminado y la propagación.

6. ¿Qué son los componentes?

En React, los componentes son las unidades básicas para crear interfaces de usuario, y la UI se puede dividir enFragmentos de código independientes y reutilizables . Los componentes pueden ser componentes de función o componentes de clase que reciben datos de entrada (llamados accesorios) y devuelven elementos de React que describen el contenido que se muestra en la página. Los componentes pueden contener otros componentes, etiquetas HTML y lógica para que las UI complejas se puedan administrar y desarrollar de manera eficiente.

Principales características y funciones:

  1. Encapsulación y reutilización
    • Los componentes pueden dividir la interfaz de usuario en partes independientes, cada parte es responsable de su propia función, mejorando así la capacidad de mantenimiento y reutilización del código.
  2. jerarquía de componentes
    • Los componentes se pueden anidar y combinar para formar una estructura jerárquica. Los componentes principales pueden pasar datos y funciones a los componentes secundarios para realizar funciones de interacción y flujo de datos.
  3. Gestión de estado
    • Los componentes de clase pueden tener estado, que se utiliza para almacenar y administrar datos dentro del componente. Los cambios de estado desencadenan una nueva representación del componente, actualizando así la interfaz de usuario.
  4. ciclo vital
    • Los componentes de clase tienen métodos de ciclo de vida como componentDidMountcomponentDidUpdate ycomponentWillUnmount etc., utilizados para ejecutar lógica específica en diferentes etapas del ciclo de vida del componente.
  5. Componentes de interfaz de usuario puros y componentes de contenedor
    • Los componentes puros de la interfaz de usuario (componentes presentacionales) son responsables de cómo representar los datos y no involucran lógica empresarial. Los componentes de contenedor son responsables de gestionar los datos y el estado y pasarlos a componentes de interfaz de usuario puros.

Ejemplo:

Aquí hay un ejemplo de un componente de función React simple, que muestra un componente llamado HelloWorld componente, que recibe unaname atributo como entrada y representa una declaración de saludo simple:

import React from 'react';

// 函数组件:HelloWorld
const HelloWorld = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to React components.</p>
    </div>
  );
};

export default HelloWorld;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

En este ejemplo,HelloWorld El componente recibe unname Propiedad para mostrar saludos dinámicamente.Este componente se puede utilizar varias veces, pasando valores diferentes cada vez que se utiliza.name Los atributos permiten personalizar el saludo que se muestra en la interfaz.

En resumen, los componentes de React son uno de los conceptos centrales para crear aplicaciones web modernas. A través de la composición y la abstracción, permiten a los desarrolladores crear interfaces de usuario de manera más eficiente y flexible.

7.Introducción al usoEstado

useState Es un Hook en React, que se utiliza para agregar funcionalidad de administración de estado a componentes funcionales. Le permite declarar variables de estado en componentes funcionales y proporciona un método para actualizar estos estados.

Instrucciones

useState se importa de React y generalmente se llama en la parte superior de un componente funcional. Devuelve una matriz que contiene dos elementos: el valor del estado actual y una función que actualiza el estado.

ejemplo básico

import React, { useState } from 'react';

const Counter = () => {
  // 声明一个名为 "count" 的状态变量,初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

En este ejemplo:

  • const [count, setCount] = useState(0); declara un archivo llamadocount La variable de estado de, el valor inicial es0useState Devuelve una matriz, el primer elemento es el valor del estado actual (count), el segundo elemento es la función que actualiza el estado (setCount)。
  • Cada vez que se hace clic en el botón, llame setCount(count + 1) renovarcount valor, lo que activa una nueva representación del componente y actualiza el número de clics mostrado.

Utilice múltiples variables de estado

Puedes usar múltiples useState Llamado para gestionar diferentes variables de estado:

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <input
        type="text"
        value=
                    
                        
                    
                    

React基础学习-Day01

1.React介绍

1.1 react是什么?

React 是一个用于构建用户界面的开源 JavaScript 库,由 Facebook 开发和维护。自 2013 年开源以来,React 已成为前端开发的热门选择,广泛应用于单页应用(SPA)和复杂的多页应用的开发。React 的主要目标是简化 UI 开发,使其更加高效、灵活和可维护。

1.2 react的优势?

1.2.1 react对比DOM的优势体现
  1. 虚拟 DOM 和高效更新
    • 虚拟 DOM:React 使用虚拟 DOM 作为内存中的副本来表示 UI 结构。每次数据更新时,React 首先在虚拟 DOM 中进行计算和比较,然后再将变化的部分批量更新到实际 DOM 中。这种优化能够显著减少 DOM 操作,提升性能。
    • 减少重绘和回流:通过虚拟 DOM,React 可以避免频繁地直接操作实际 DOM,减少页面重绘(repaint)和回流(reflow),从而提高页面的响应速度和性能。
  2. 组件化和可复用性
    • 组件化:React 鼓励将 UI 拆分为独立的组件,每个组件负责自己的 UI 和逻辑。这种模块化的设计使得开发者可以更容易地复用、测试和维护代码。
    • 自定义组件:开发者可以创建自定义的组件,并通过组合这些组件来构建复杂的 UI。这种灵活性和可复用性是传统 DOM 操作所不具备的。
  3. 声明式编程风格
    • 声明式:React 的编程风格是声明式的,开发者只需描述 UI 应该是什么样子,而不需要关心如何操作 DOM 进行更新。这种方式更加直观和易于理解,提高了代码的可维护性。
    • 数据驱动:React 强调通过状态(state)和属性(props)来驱动 UI 的变化,数据变化时,React 负责更新 UI,开发者无需手动操作 DOM。
  4. 跨平台能力
    • React Native:除了 Web 应用外,React 还支持使用相同的组件模型构建原生移动应用。React Native 提供了一种在 iOS 和 Android 上构建高性能、原生用户界面的方式,这使得开发者可以共享大部分代码和技能,减少开发成本和学习曲线。
  5. 社区和生态系统支持
    • 庞大的社区:React 拥有一个活跃和庞大的社区,提供了丰富的第三方库、工具和解决方案,帮助开发者更高效地开发和部署应用。
    • 组件库:有许多优秀的 UI 组件库(如 Material-UI、Ant Design 等)和状态管理工具(如 Redux、MobX 等),可以与 React 配合使用,进一步提升开发效率和应用性能。

总结来说,React 相对于传统的 DOM 操作,通过虚拟 DOM、组件化、声明式编程等特性,提供了更高效、可维护和可扩展的开发方式。这些优势使得 React 成为前端开发中的主流框架之一,被广泛应用于各种规模和类型的项目中。

1.2.2 react与其他框架的对比
  1. 灵活性和可定制性
    • React:React 本身是一个库而非完整的框架,它更注重于提供构建用户界面的核心工具和机制,开发者可以自由选择配合使用其他库和工具(如 Redux、React Router 等)。这种灵活性使得开发者可以根据项目需求进行更精确的定制和优化。
    • Vue.js:Vue.js 提供了更全面的解决方案,包括路由、状态管理和构建工具等,对于小型到中型应用,Vue.js 提供了更多开箱即用的功能,减少了集成和配置的复杂性。
  2. 虚拟 DOM 的实现
    • React:React 使用了一套高效的虚拟 DOM 和 diff 算法,这使得 React 在处理大型数据集合和频繁数据更新时性能表现优越。
    • Vue.js:Vue.js 也使用了类似的虚拟 DOM 技术,但在一些测试中,React 的 diff 算法可能会更快一些,尤其是在处理复杂的 UI 更新时。
  3. 生态系统和社区支持
    • React:React 拥有一个庞大和活跃的社区,支持丰富的第三方库和工具,如 Redux、Material-UI 等,这些库能够帮助开发者构建复杂的单页应用和大型项目。
    • Vue.js:Vue.js 社区同样非常活跃,Vue.js 生态系统提供了许多插件和工具,如 Vuex(状态管理)、Vue Router(路由管理)等,为开发者提供了更多的选择和集成方案。
  4. 学习曲线和易用性
    • React:React 的学习曲线相对较陡,特别是对于初学者来说,需要掌握 JSX、组件生命周期、状态管理等概念。但一旦掌握了 React 的核心概念,开发者可以更高效地构建和维护复杂的应用。
    • Vue.js:Vue.js 的学习曲线相对平缓,它更接近传统的 HTML、CSS 和 JavaScript,对于有经验的开发者和新手来说都较为友好。Vue.js 的文档和教程也很全面,帮助开发者快速入门和上手。
  5. 社区文化和响应性
    • React:React 社区倾向于更加注重性能和灵活性,也更倾向于使用 TypeScript 等类型安全的技术栈。Facebook 作为 React 的主要维护者,对于安全性和稳定性有较高的保障。
    • Vue.js:Vue.js 社区更加开放和友好,注重开发者体验和易用性。Vue.js 也更容易与其他技术栈集成,比如可以很方便地与现有的项目或库整合。

总体来说,React 和 Vue.js 都是优秀的前端开发框架,选择适合的框架取决于项目需求、团队技术栈和开发者的偏好。React 在大型和复杂的应用中可能更适合,特别是需要高度灵活性和可定制性的场景;而 Vue.js 则更适合于快速开发和中小型应用,提供了更多集成和便捷的解决方案。

1.2.3 react对比DOM如何减少重绘和重排

重绘 (Repaint) 和回流 (Reflow)

  1. 重绘 (Repaint):当元素的外观样式(如颜色、背景、可见性)发生变化,但不影响布局时,会触发重绘。
  2. 回流 (Reflow):当元素的尺寸、位置或结构发生变化,影响布局时,会触发回流。回流比重绘更耗费性能,因为需要重新计算布局和渲染树。

React 如何减少重绘和回流

  1. 虚拟 DOM (Virtual DOM)
    • 虚拟 DOM:React 创建了一个虚拟 DOM,它是 UI 的轻量级副本,保存在内存中。每次组件的状态或属性发生变化时,React 会在虚拟 DOM 中进行计算和比较,生成新的虚拟 DOM 树。
    • Diff 算法:React 使用高效的 diff 算法比较新旧虚拟 DOM 树,找出变化的部分,并生成一个更新补丁。
  2. 最小化实际 DOM 操作
    • 批量更新:React 将多个状态更新合并为一次批量更新,减少 DOM 操作次数。批量更新通过一次性更新多个变化,避免频繁操作 DOM 导致的性能损耗。
    • 异步更新:React 通过异步批处理(例如 React 18 中引入的 Concurrent Mode),将多次状态更新合并处理,避免频繁的同步 DOM 操作。
  3. 避免不必要的更新
    • shouldComponentUpdate:类组件中可以使用 shouldComponentUpdate 方法来控制组件是否需要重新渲染,从而避免不必要的重绘和回流。
    • React.memo:函数组件可以使用 React.memo 进行性能优化,它会对比前后属性,只有属性变化时才会重新渲染组件。
    • useMemouseCallback:Hooks 提供的 useMemouseCallback 可以缓存计算结果和函数引用,避免子组件不必要的更新。
  4. 合并更新
    • 批量状态更新:React 会自动合并多次状态更新,在一次事件循环内只触发一次渲染,从而减少 DOM 操作。

示例代码

以下示例演示了 React 如何通过 React.memouseMemo 来减少不必要的渲染:

import React, { useState, useMemo } from 'react';

// 一个简单的子组件,仅在 props 变化时重新渲染
const ChildComponent = React.memo(({ value }) => {
  console.log('ChildComponent render');
  return <div>{value}</div>;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 使用 useMemo 缓存计算结果,避免不必要的计算
  const memoizedValue = useMemo(() => {
    console.log('Calculating memoized value');
    return count * 2;
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
      />
      <ChildComponent value={memoizedValue} />
    </div>
  );
}

export default App;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

在这个示例中:

  • ChildComponent 只有在 value 变化时才会重新渲染,因为它被 React.memo 包裹。
  • memoizedValue 使用 useMemo 进行缓存,只有在 count 变化时才会重新计算,避免了不必要的计算和渲染。

总结

通过虚拟 DOM、批量更新、避免不必要的更新和合并更新,React 有效地减少了重绘和回流的次数,从而提升了应用的性能。与传统的直接操作 DOM 的方式相比,React 提供了一种更加高效和优化的 UI 更新机制。

2.jsx语法介绍

.jsxJavaScript XML 的缩写,它是一种 JavaScript 的语法扩展,允许开发者在 JavaScript 中直接编写类似 HTML 的标记语言,用于定义 React 组件的 UI 结构。以下是一些 .jsx 语法的核心特点和使用方法:

主要特点:

  1. 类 HTML 结构
    • .jsx 允许在 JavaScript 中嵌入类似 HTML 的标记语言,用于声明 UI 的结构和组件的外观。
    • 例如,在 React 中,可以直接使用 <div><span><h1> 等 HTML 标签,以及自定义的 React 组件。
  2. JSX 表达式
    • .jsx 中,可以使用 {} 花括号来包裹 JavaScript 表达式,用于在标记中动态地插入变量、计算结果或函数调用。
    • 这使得 .jsx 具有了 JavaScript 的全部表达能力,可以进行条件判断、循环、计算等操作。
  3. 属性传递
    • 类似 HTML,.jsx 允许在标签上使用属性,并支持使用表达式作为属性值。
    • 例如:<Component name={variable} />,其中 name 是一个属性,variable 是一个 JavaScript 变量或表达式。
  4. 自闭合标签
    • .jsx 中的标签可以是自闭合的,比如 <img><input>,也可以使用 / 符号来表示自闭合,例如 <br />
  5. 注释
    • 和 JavaScript 一样,可以使用 // 单行注释和 /* */ 多行注释在 .jsx 文件中添加注释(注释要写在{}内)。

示例:

以下是一个简单的 React 组件示例,展示了 .jsx 的基本语法和特点:

import React from 'react';

// 定义一个 React 函数组件
const MyComponent = () => {
  const name = 'World';

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to JSX!</p>
      <ul>
        {['apple', 'banana', 'cherry'].map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这个例子中:

  • <h1><p><ul><li> 等标签直接在 JavaScript 函数中使用,用于构建组件的 UI 结构。
  • 使用 {name}<h1> 中动态地插入变量 name 的值。
  • 使用 {} 花括号包裹的 JavaScript 表达式,例如 ['apple', 'banana', 'cherry'].map() 来生成列表项 <li>
  • key={index} 用于在 React 中标识列表项的唯一性,帮助 React 更高效地管理组件的更新。

注意事项:

  • JSX 本质上是 JavaScript 语法的扩展,需要通过 Babel 等工具进行编译转换成标准的 JavaScript 代码,以便浏览器能够正确解析和执行。
  • JSX 让开发者可以更直观地编写和理解 React 组件的结构和逻辑,提高了代码的可读性和开发效率。

总结来说,.jsx 是 React 中用于定义组件 UI 结构的一种语法扩展,它结合了 JavaScript 的表达能力和 HTML 标记的直观性,是开发现代 Web 应用的重要工具之一。

3.jsx实现列表渲染

import React from 'react';

const MyComponent = () => {
  // 假设我们有一个水果列表
  const fruits = ['apple', 'banana', 'cherry'];

  return (
    <div>
      <h2>Fruit List:</h2>
      <ul>
        {/* 使用 map 方法遍历数组,并为每个元素生成一个 <li> 元素 */}
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

4.jsx实现条件渲染

4.1 三元运算符 (Ternary Operator)

这是最常用的方式,通过三元运算符来实现简单的条件渲染。

import React from 'react';

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

4.2. 逻辑与运算符 (Logical AND Operator)

适用于条件为真时才渲染内容的场景。

import React from 'react';

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

4.3. 立即执行函数表达式 (IIFE)

适用于需要执行更多逻辑或多条件判断的情况。

import React from 'react';

const MyComponent = () => {
  const status = 'loggedOut'; // 可以是 'loggedIn' 或 'loggedOut'

  return (
    <div>
      {(() => {
        if (status === 'loggedIn') {
          return <p>Welcome back!</p>;
        } else if (status === 'loggedOut') {
          return <p>Please sign in.</p>;
        } else {
          return <p>Status unknown.</p>;
        }
      })()}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

4.4 条件渲染组件

将条件渲染逻辑封装到单独的组件中,可以提高代码的可读性和复用性。

import React from 'react';

const Greeting = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  } else {
    return <p>Please sign in.</p>;
  }
};

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

5.React基础事件绑定

5.1 基本事件绑定

在 React 中,可以直接在 JSX 中通过类似 HTML 的方式来绑定事件处理函数。例如,给按钮绑定点击事件:

import React from 'react';

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这个例子中,onClick 是 React 的事件属性,它接收一个函数作为值。当按钮被点击时,handleClick 函数会被调用。

5.2 事件处理函数

React 的事件处理函数与普通的 JavaScript 事件处理函数类似,它们接收一个合成事件对象 (SyntheticEvent),而不是原生 DOM 事件对象。这使得跨浏览器的事件处理更加一致和可靠。

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    console.log('Button clicked!', event.target);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在上面的示例中,handleClick 函数的参数 event 是一个合成事件对象,可以通过 event.target 访问触发事件的 DOM 元素。

5.3 事件传参

有时候需要给事件处理函数传递额外的参数。可以使用箭头函数或者 bind 方法来实现这一点。

使用箭头函数:

import React from 'react';

const MyComponent = () => {
  const handleClick = (name) => {
    console.log(`Hello, ${name} clicked!`);
  };

  return (
    <div>
      <button onClick={() => handleClick('World')}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

使用 bind 方法:

import React from 'react';

const MyComponent = () => {
  const handleClick = (name) => {
    console.log(`Hello, ${name} clicked!`);
  };

  return (
    <div>
      <button onClick={handleClick.bind(null, 'World')}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

这两种方式都可以将 'World' 作为参数传递给 handleClick 函数。

5.4 阻止事件默认行为和冒泡

在 React 中,阻止事件的默认行为和冒泡可以通过合成事件对象的方法来实现。

阻止默认行为:

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    event.preventDefault();
    console.log('Button clicked!');
  };

  return (
    <div>
      <a href="#" onClick={handleClick}>Click me</a>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

阻止冒泡:

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Button clicked!');
  };

  return (
    <div onClick={() => console.log('Div clicked!')}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

总结

React 的事件绑定和处理与传统的 JavaScript 事件处理有些许差异,主要体现在事件对象的处理上,使用合成事件对象来实现跨浏览器一致性。通过上述方法,可以有效地在 React 中处理各种事件,并进行事件传参、阻止默认行为和冒泡等操作。

6.组件是什么?

在 React 中,组件是构建用户界面的基本单位,可以将 UI 分割成独立的、可复用的代码片段。组件可以是函数组件或类组件,它们可以接收输入的数据(称为 props)并返回描述页面展示内容的 React 元素。组件可以包含其他组件、HTML 标签和逻辑,使得复杂的 UI 可以被有效地管理和开发。

主要特点和作用:

  1. 封装和复用
    • 组件可以将 UI 划分成独立的部分,每个部分负责自己的功能,从而提高代码的可维护性和复用性。
  2. 组件层级
    • 组件可以嵌套组合,形成层次化的结构。父组件可以向子组件传递数据和函数,实现数据的流动和交互的功能。
  3. 状态管理
    • 类组件可以拥有状态(state),用于存储和管理组件内部的数据。状态的改变会触发组件的重新渲染,从而更新用户界面。
  4. 生命周期
    • 类组件具有生命周期方法,例如 componentDidMountcomponentDidUpdatecomponentWillUnmount 等,用于在组件生命周期不同阶段执行特定的逻辑。
  5. 纯UI组件和容器组件
    • 纯UI组件(Presentational Components)负责如何渲染数据,不涉及业务逻辑。容器组件(Container Components)则负责管理数据和状态,传递给纯UI组件。

示例:

以下是一个简单的 React 函数组件的示例,展示了一个名为 HelloWorld 的组件,它接收一个 name 属性作为输入,并渲染一个简单的问候语句:

import React from 'react';

// 函数组件:HelloWorld
const HelloWorld = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to React components.</p>
    </div>
  );
};

export default HelloWorld;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在这个例子中,HelloWorld 组件接收一个 name 属性,用于动态显示问候语。这种组件可以被多次使用,每次使用时传入不同的 name 属性,使得界面呈现的问候语可以个性化定制。

总之,React 组件是构建现代 Web 应用的核心概念之一,它们通过组合和抽象,使得开发者可以更加高效和灵活地构建用户界面。

7.useState使用介绍

useState 是 React 中的一个 Hook,用于在函数组件中添加状态管理功能。它允许你在函数组件中声明状态变量,并提供一个方法来更新这些状态。

使用方法

useState 是从 React 中导入的,并且通常在函数组件的顶部进行调用。它返回一个包含两个元素的数组:当前状态值和一个更新状态的函数。

基本示例

import React, { useState } from 'react';

const Counter = () => {
  // 声明一个名为 "count" 的状态变量,初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

在这个示例中:

  • const [count, setCount] = useState(0); 声明了一个名为 count 的状态变量,初始值为 0useState 返回一个数组,第一个元素是当前状态值(count),第二个元素是更新状态的函数(setCount)。
  • 每次点击按钮时,调用 setCount(count + 1) 更新 count 的值,从而触发组件的重新渲染,并更新显示的点击次数。

使用多个状态变量

你可以在一个组件中使用多个 useState 调用来管理不同的状态变量:

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />
      <p>You typed: {text}</p>
    </div>
  );
};

export default MultiStateComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

在这个示例中,我们使用了两个 useState 调用来分别管理 counttext 两个状态变量。

初始化状态

你可以将状态的初始值设置为函数返回的值,这在初始化需要执行复杂计算时特别有用:

import React, { useState } from 'react';

const ExpensiveComponent = () => {
  const initialCount = () => {
    // 模拟一个复杂的计算
    return 42;
  };

  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>Initial count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
};

export default ExpensiveComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

在这个示例中,initialCount 函数只会在组件初次渲染时执行一次,用于计算初始状态值。

总结

  • useState 是一个 React Hook,用于在函数组件中添加状态管理功能。
  • useState 返回一个包含当前状态值和一个更新状态的函数的数组。
  • 可以使用多个 useState 调用来管理多个状态变量。
  • 状态的初始值可以是一个复杂计算的结果,通过传递一个函数来实现。

8.修改状态的规则

在 React 中,使用 useState 来管理和修改状态时,有一些规则和最佳实践需要遵循,以确保状态的管理和更新过程是高效和可靠的。以下是修改状态的主要规则和一些示例:

1. 状态更新是异步的

React 的状态更新是异步的,这意味着调用状态更新函数后,状态的更新不会立即反映出来,而是在下一次重新渲染时才会生效。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 这里的 count 可能不会立即更新
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在上述例子中,console.log(count) 可能不会立即显示更新后的值,因为状态更新是异步的。

2. 状态更新函数接受当前状态作为参数

为了确保状态更新时使用的值是最新的,可以传递一个函数给状态更新函数。这个函数会接收当前的状态值作为参数。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这个示例中,setCount 接收一个函数 prevCount => prevCount + 1,确保使用的是最新的状态值进行更新。

3. 不要直接修改状态

状态应该是不可变的,不要直接修改状态对象,而是通过创建新对象来更新状态。

import React, { useState } from 'react';

const Example = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateAge = () => {
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.age}</p>
      <button onClick={updateAge}>Increment Age</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这个示例中,使用扩展运算符 ...prevUser 创建了一个新的用户对象,并更新了年龄属性。

4. 合并状态

对于对象类型的状态,需要手动合并更新的部分,因为 useState 不会自动合并更新对象。

import React, { useState } from 'react';

const Example = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    setUser(prevUser => ({
      ...prevUser,
      name: 'Doe'
    }));
  };

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这个示例中,setUser 的更新函数创建了一个新的用户对象,同时保持其他属性不变。

5. 避免不必要的状态更新

尽量避免在每次渲染中都调用状态更新函数,只有在需要时才更新状态,以提高性能。

import React, { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    if (count < 10) {
      setCount(count + 1);
    }
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这个示例中,只有在 count 小于 10 时才会更新状态,避免了不必要的状态更新。

总结

  1. 状态更新是异步的:不能依赖立即更新后的值。
  2. 使用函数式更新:在更新状态时,传递一个函数来确保使用最新的状态值。
  3. 不要直接修改状态:状态应该是不可变的,需要通过创建新对象来更新状态。
  4. 手动合并状态:对于对象类型的状态,需要手动合并更新部分。
  5. 避免不必要的状态更新:只有在需要时才更新状态,以提高性能。

9.基础样式方案

1.行内样式(不推荐):<div style={{color:“red”}}></>

2.class类名控制:

10.classNames优化类名控制

<div className={classNames(“foo”,{active:true})}>

onChange={(e) => setText(e.target.value)} placeholder="Type something..." /> <p>You typed:

React基础学习-Day01

1.React介绍

1.1 react是什么?

React 是一个用于构建用户界面的开源 JavaScript 库,由 Facebook 开发和维护。自 2013 年开源以来,React 已成为前端开发的热门选择,广泛应用于单页应用(SPA)和复杂的多页应用的开发。React 的主要目标是简化 UI 开发,使其更加高效、灵活和可维护。

1.2 react的优势?

1.2.1 react对比DOM的优势体现
  1. 虚拟 DOM 和高效更新
    • 虚拟 DOM:React 使用虚拟 DOM 作为内存中的副本来表示 UI 结构。每次数据更新时,React 首先在虚拟 DOM 中进行计算和比较,然后再将变化的部分批量更新到实际 DOM 中。这种优化能够显著减少 DOM 操作,提升性能。
    • 减少重绘和回流:通过虚拟 DOM,React 可以避免频繁地直接操作实际 DOM,减少页面重绘(repaint)和回流(reflow),从而提高页面的响应速度和性能。
  2. 组件化和可复用性
    • 组件化:React 鼓励将 UI 拆分为独立的组件,每个组件负责自己的 UI 和逻辑。这种模块化的设计使得开发者可以更容易地复用、测试和维护代码。
    • 自定义组件:开发者可以创建自定义的组件,并通过组合这些组件来构建复杂的 UI。这种灵活性和可复用性是传统 DOM 操作所不具备的。
  3. 声明式编程风格
    • 声明式:React 的编程风格是声明式的,开发者只需描述 UI 应该是什么样子,而不需要关心如何操作 DOM 进行更新。这种方式更加直观和易于理解,提高了代码的可维护性。
    • 数据驱动:React 强调通过状态(state)和属性(props)来驱动 UI 的变化,数据变化时,React 负责更新 UI,开发者无需手动操作 DOM。
  4. 跨平台能力
    • React Native:除了 Web 应用外,React 还支持使用相同的组件模型构建原生移动应用。React Native 提供了一种在 iOS 和 Android 上构建高性能、原生用户界面的方式,这使得开发者可以共享大部分代码和技能,减少开发成本和学习曲线。
  5. 社区和生态系统支持
    • 庞大的社区:React 拥有一个活跃和庞大的社区,提供了丰富的第三方库、工具和解决方案,帮助开发者更高效地开发和部署应用。
    • 组件库:有许多优秀的 UI 组件库(如 Material-UI、Ant Design 等)和状态管理工具(如 Redux、MobX 等),可以与 React 配合使用,进一步提升开发效率和应用性能。

总结来说,React 相对于传统的 DOM 操作,通过虚拟 DOM、组件化、声明式编程等特性,提供了更高效、可维护和可扩展的开发方式。这些优势使得 React 成为前端开发中的主流框架之一,被广泛应用于各种规模和类型的项目中。

1.2.2 react与其他框架的对比
  1. 灵活性和可定制性
    • React:React 本身是一个库而非完整的框架,它更注重于提供构建用户界面的核心工具和机制,开发者可以自由选择配合使用其他库和工具(如 Redux、React Router 等)。这种灵活性使得开发者可以根据项目需求进行更精确的定制和优化。
    • Vue.js:Vue.js 提供了更全面的解决方案,包括路由、状态管理和构建工具等,对于小型到中型应用,Vue.js 提供了更多开箱即用的功能,减少了集成和配置的复杂性。
  2. 虚拟 DOM 的实现
    • React:React 使用了一套高效的虚拟 DOM 和 diff 算法,这使得 React 在处理大型数据集合和频繁数据更新时性能表现优越。
    • Vue.js:Vue.js 也使用了类似的虚拟 DOM 技术,但在一些测试中,React 的 diff 算法可能会更快一些,尤其是在处理复杂的 UI 更新时。
  3. 生态系统和社区支持
    • React:React 拥有一个庞大和活跃的社区,支持丰富的第三方库和工具,如 Redux、Material-UI 等,这些库能够帮助开发者构建复杂的单页应用和大型项目。
    • Vue.js:Vue.js 社区同样非常活跃,Vue.js 生态系统提供了许多插件和工具,如 Vuex(状态管理)、Vue Router(路由管理)等,为开发者提供了更多的选择和集成方案。
  4. 学习曲线和易用性
    • React:React 的学习曲线相对较陡,特别是对于初学者来说,需要掌握 JSX、组件生命周期、状态管理等概念。但一旦掌握了 React 的核心概念,开发者可以更高效地构建和维护复杂的应用。
    • Vue.js:Vue.js 的学习曲线相对平缓,它更接近传统的 HTML、CSS 和 JavaScript,对于有经验的开发者和新手来说都较为友好。Vue.js 的文档和教程也很全面,帮助开发者快速入门和上手。
  5. 社区文化和响应性
    • React:React 社区倾向于更加注重性能和灵活性,也更倾向于使用 TypeScript 等类型安全的技术栈。Facebook 作为 React 的主要维护者,对于安全性和稳定性有较高的保障。
    • Vue.js:Vue.js 社区更加开放和友好,注重开发者体验和易用性。Vue.js 也更容易与其他技术栈集成,比如可以很方便地与现有的项目或库整合。

总体来说,React 和 Vue.js 都是优秀的前端开发框架,选择适合的框架取决于项目需求、团队技术栈和开发者的偏好。React 在大型和复杂的应用中可能更适合,特别是需要高度灵活性和可定制性的场景;而 Vue.js 则更适合于快速开发和中小型应用,提供了更多集成和便捷的解决方案。

1.2.3 react对比DOM如何减少重绘和重排

重绘 (Repaint) 和回流 (Reflow)

  1. 重绘 (Repaint):当元素的外观样式(如颜色、背景、可见性)发生变化,但不影响布局时,会触发重绘。
  2. 回流 (Reflow):当元素的尺寸、位置或结构发生变化,影响布局时,会触发回流。回流比重绘更耗费性能,因为需要重新计算布局和渲染树。

React 如何减少重绘和回流

  1. 虚拟 DOM (Virtual DOM)
    • 虚拟 DOM:React 创建了一个虚拟 DOM,它是 UI 的轻量级副本,保存在内存中。每次组件的状态或属性发生变化时,React 会在虚拟 DOM 中进行计算和比较,生成新的虚拟 DOM 树。
    • Diff 算法:React 使用高效的 diff 算法比较新旧虚拟 DOM 树,找出变化的部分,并生成一个更新补丁。
  2. 最小化实际 DOM 操作
    • 批量更新:React 将多个状态更新合并为一次批量更新,减少 DOM 操作次数。批量更新通过一次性更新多个变化,避免频繁操作 DOM 导致的性能损耗。
    • 异步更新:React 通过异步批处理(例如 React 18 中引入的 Concurrent Mode),将多次状态更新合并处理,避免频繁的同步 DOM 操作。
  3. 避免不必要的更新
    • shouldComponentUpdate:类组件中可以使用 shouldComponentUpdate 方法来控制组件是否需要重新渲染,从而避免不必要的重绘和回流。
    • React.memo:函数组件可以使用 React.memo 进行性能优化,它会对比前后属性,只有属性变化时才会重新渲染组件。
    • useMemouseCallback:Hooks 提供的 useMemouseCallback 可以缓存计算结果和函数引用,避免子组件不必要的更新。
  4. 合并更新
    • 批量状态更新:React 会自动合并多次状态更新,在一次事件循环内只触发一次渲染,从而减少 DOM 操作。

示例代码

以下示例演示了 React 如何通过 React.memouseMemo 来减少不必要的渲染:

import React, { useState, useMemo } from 'react';

// 一个简单的子组件,仅在 props 变化时重新渲染
const ChildComponent = React.memo(({ value }) => {
  console.log('ChildComponent render');
  return <div>{value}</div>;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 使用 useMemo 缓存计算结果,避免不必要的计算
  const memoizedValue = useMemo(() => {
    console.log('Calculating memoized value');
    return count * 2;
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
      />
      <ChildComponent value={memoizedValue} />
    </div>
  );
}

export default App;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

在这个示例中:

  • ChildComponent 只有在 value 变化时才会重新渲染,因为它被 React.memo 包裹。
  • memoizedValue 使用 useMemo 进行缓存,只有在 count 变化时才会重新计算,避免了不必要的计算和渲染。

总结

通过虚拟 DOM、批量更新、避免不必要的更新和合并更新,React 有效地减少了重绘和回流的次数,从而提升了应用的性能。与传统的直接操作 DOM 的方式相比,React 提供了一种更加高效和优化的 UI 更新机制。

2.jsx语法介绍

.jsxJavaScript XML 的缩写,它是一种 JavaScript 的语法扩展,允许开发者在 JavaScript 中直接编写类似 HTML 的标记语言,用于定义 React 组件的 UI 结构。以下是一些 .jsx 语法的核心特点和使用方法:

主要特点:

  1. 类 HTML 结构
    • .jsx 允许在 JavaScript 中嵌入类似 HTML 的标记语言,用于声明 UI 的结构和组件的外观。
    • 例如,在 React 中,可以直接使用 <div><span><h1> 等 HTML 标签,以及自定义的 React 组件。
  2. JSX 表达式
    • .jsx 中,可以使用 {} 花括号来包裹 JavaScript 表达式,用于在标记中动态地插入变量、计算结果或函数调用。
    • 这使得 .jsx 具有了 JavaScript 的全部表达能力,可以进行条件判断、循环、计算等操作。
  3. 属性传递
    • 类似 HTML,.jsx 允许在标签上使用属性,并支持使用表达式作为属性值。
    • 例如:<Component name={variable} />,其中 name 是一个属性,variable 是一个 JavaScript 变量或表达式。
  4. 自闭合标签
    • .jsx 中的标签可以是自闭合的,比如 <img><input>,也可以使用 / 符号来表示自闭合,例如 <br />
  5. 注释
    • 和 JavaScript 一样,可以使用 // 单行注释和 /* */ 多行注释在 .jsx 文件中添加注释(注释要写在{}内)。

示例:

以下是一个简单的 React 组件示例,展示了 .jsx 的基本语法和特点:

import React from 'react';

// 定义一个 React 函数组件
const MyComponent = () => {
  const name = 'World';

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to JSX!</p>
      <ul>
        {['apple', 'banana', 'cherry'].map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这个例子中:

  • <h1><p><ul><li> 等标签直接在 JavaScript 函数中使用,用于构建组件的 UI 结构。
  • 使用 {name}<h1> 中动态地插入变量 name 的值。
  • 使用 {} 花括号包裹的 JavaScript 表达式,例如 ['apple', 'banana', 'cherry'].map() 来生成列表项 <li>
  • key={index} 用于在 React 中标识列表项的唯一性,帮助 React 更高效地管理组件的更新。

注意事项:

  • JSX 本质上是 JavaScript 语法的扩展,需要通过 Babel 等工具进行编译转换成标准的 JavaScript 代码,以便浏览器能够正确解析和执行。
  • JSX 让开发者可以更直观地编写和理解 React 组件的结构和逻辑,提高了代码的可读性和开发效率。

总结来说,.jsx 是 React 中用于定义组件 UI 结构的一种语法扩展,它结合了 JavaScript 的表达能力和 HTML 标记的直观性,是开发现代 Web 应用的重要工具之一。

3.jsx实现列表渲染

import React from 'react';

const MyComponent = () => {
  // 假设我们有一个水果列表
  const fruits = ['apple', 'banana', 'cherry'];

  return (
    <div>
      <h2>Fruit List:</h2>
      <ul>
        {/* 使用 map 方法遍历数组,并为每个元素生成一个 <li> 元素 */}
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

4.jsx实现条件渲染

4.1 三元运算符 (Ternary Operator)

这是最常用的方式,通过三元运算符来实现简单的条件渲染。

import React from 'react';

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

4.2. 逻辑与运算符 (Logical AND Operator)

适用于条件为真时才渲染内容的场景。

import React from 'react';

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

4.3. 立即执行函数表达式 (IIFE)

适用于需要执行更多逻辑或多条件判断的情况。

import React from 'react';

const MyComponent = () => {
  const status = 'loggedOut'; // 可以是 'loggedIn' 或 'loggedOut'

  return (
    <div>
      {(() => {
        if (status === 'loggedIn') {
          return <p>Welcome back!</p>;
        } else if (status === 'loggedOut') {
          return <p>Please sign in.</p>;
        } else {
          return <p>Status unknown.</p>;
        }
      })()}
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

4.4 条件渲染组件

将条件渲染逻辑封装到单独的组件中,可以提高代码的可读性和复用性。

import React from 'react';

const Greeting = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  } else {
    return <p>Please sign in.</p>;
  }
};

const MyComponent = () => {
  const isLoggedIn = true;

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

5.React基础事件绑定

5.1 基本事件绑定

在 React 中,可以直接在 JSX 中通过类似 HTML 的方式来绑定事件处理函数。例如,给按钮绑定点击事件:

import React from 'react';

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这个例子中,onClick 是 React 的事件属性,它接收一个函数作为值。当按钮被点击时,handleClick 函数会被调用。

5.2 事件处理函数

React 的事件处理函数与普通的 JavaScript 事件处理函数类似,它们接收一个合成事件对象 (SyntheticEvent),而不是原生 DOM 事件对象。这使得跨浏览器的事件处理更加一致和可靠。

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    console.log('Button clicked!', event.target);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在上面的示例中,handleClick 函数的参数 event 是一个合成事件对象,可以通过 event.target 访问触发事件的 DOM 元素。

5.3 事件传参

有时候需要给事件处理函数传递额外的参数。可以使用箭头函数或者 bind 方法来实现这一点。

使用箭头函数:

import React from 'react';

const MyComponent = () => {
  const handleClick = (name) => {
    console.log(`Hello, ${name} clicked!`);
  };

  return (
    <div>
      <button onClick={() => handleClick('World')}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

使用 bind 方法:

import React from 'react';

const MyComponent = () => {
  const handleClick = (name) => {
    console.log(`Hello, ${name} clicked!`);
  };

  return (
    <div>
      <button onClick={handleClick.bind(null, 'World')}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

这两种方式都可以将 'World' 作为参数传递给 handleClick 函数。

5.4 阻止事件默认行为和冒泡

在 React 中,阻止事件的默认行为和冒泡可以通过合成事件对象的方法来实现。

阻止默认行为:

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    event.preventDefault();
    console.log('Button clicked!');
  };

  return (
    <div>
      <a href="#" onClick={handleClick}>Click me</a>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

阻止冒泡:

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Button clicked!');
  };

  return (
    <div onClick={() => console.log('Div clicked!')}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

总结

React 的事件绑定和处理与传统的 JavaScript 事件处理有些许差异,主要体现在事件对象的处理上,使用合成事件对象来实现跨浏览器一致性。通过上述方法,可以有效地在 React 中处理各种事件,并进行事件传参、阻止默认行为和冒泡等操作。

6.组件是什么?

在 React 中,组件是构建用户界面的基本单位,可以将 UI 分割成独立的、可复用的代码片段。组件可以是函数组件或类组件,它们可以接收输入的数据(称为 props)并返回描述页面展示内容的 React 元素。组件可以包含其他组件、HTML 标签和逻辑,使得复杂的 UI 可以被有效地管理和开发。

主要特点和作用:

  1. 封装和复用
    • 组件可以将 UI 划分成独立的部分,每个部分负责自己的功能,从而提高代码的可维护性和复用性。
  2. 组件层级
    • 组件可以嵌套组合,形成层次化的结构。父组件可以向子组件传递数据和函数,实现数据的流动和交互的功能。
  3. 状态管理
    • 类组件可以拥有状态(state),用于存储和管理组件内部的数据。状态的改变会触发组件的重新渲染,从而更新用户界面。
  4. 生命周期
    • 类组件具有生命周期方法,例如 componentDidMountcomponentDidUpdatecomponentWillUnmount 等,用于在组件生命周期不同阶段执行特定的逻辑。
  5. 纯UI组件和容器组件
    • 纯UI组件(Presentational Components)负责如何渲染数据,不涉及业务逻辑。容器组件(Container Components)则负责管理数据和状态,传递给纯UI组件。

示例:

以下是一个简单的 React 函数组件的示例,展示了一个名为 HelloWorld 的组件,它接收一个 name 属性作为输入,并渲染一个简单的问候语句:

import React from 'react';

// 函数组件:HelloWorld
const HelloWorld = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to React components.</p>
    </div>
  );
};

export default HelloWorld;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在这个例子中,HelloWorld 组件接收一个 name 属性,用于动态显示问候语。这种组件可以被多次使用,每次使用时传入不同的 name 属性,使得界面呈现的问候语可以个性化定制。

总之,React 组件是构建现代 Web 应用的核心概念之一,它们通过组合和抽象,使得开发者可以更加高效和灵活地构建用户界面。

7.useState使用介绍

useState 是 React 中的一个 Hook,用于在函数组件中添加状态管理功能。它允许你在函数组件中声明状态变量,并提供一个方法来更新这些状态。

使用方法

useState 是从 React 中导入的,并且通常在函数组件的顶部进行调用。它返回一个包含两个元素的数组:当前状态值和一个更新状态的函数。

基本示例

import React, { useState } from 'react';

const Counter = () => {
  // 声明一个名为 "count" 的状态变量,初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

在这个示例中:

  • const [count, setCount] = useState(0); 声明了一个名为 count 的状态变量,初始值为 0useState 返回一个数组,第一个元素是当前状态值(count),第二个元素是更新状态的函数(setCount)。
  • 每次点击按钮时,调用 setCount(count + 1) 更新 count 的值,从而触发组件的重新渲染,并更新显示的点击次数。

使用多个状态变量

你可以在一个组件中使用多个 useState 调用来管理不同的状态变量:

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />
      <p>You typed: {text}</p>
    </div>
  );
};

export default MultiStateComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

在这个示例中,我们使用了两个 useState 调用来分别管理 counttext 两个状态变量。

初始化状态

你可以将状态的初始值设置为函数返回的值,这在初始化需要执行复杂计算时特别有用:

import React, { useState } from 'react';

const ExpensiveComponent = () => {
  const initialCount = () => {
    // 模拟一个复杂的计算
    return 42;
  };

  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>Initial count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
};

export default ExpensiveComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

在这个示例中,initialCount 函数只会在组件初次渲染时执行一次,用于计算初始状态值。

总结

  • useState 是一个 React Hook,用于在函数组件中添加状态管理功能。
  • useState 返回一个包含当前状态值和一个更新状态的函数的数组。
  • 可以使用多个 useState 调用来管理多个状态变量。
  • 状态的初始值可以是一个复杂计算的结果,通过传递一个函数来实现。

8.修改状态的规则

在 React 中,使用 useState 来管理和修改状态时,有一些规则和最佳实践需要遵循,以确保状态的管理和更新过程是高效和可靠的。以下是修改状态的主要规则和一些示例:

1. 状态更新是异步的

React 的状态更新是异步的,这意味着调用状态更新函数后,状态的更新不会立即反映出来,而是在下一次重新渲染时才会生效。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 这里的 count 可能不会立即更新
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在上述例子中,console.log(count) 可能不会立即显示更新后的值,因为状态更新是异步的。

2. 状态更新函数接受当前状态作为参数

为了确保状态更新时使用的值是最新的,可以传递一个函数给状态更新函数。这个函数会接收当前的状态值作为参数。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这个示例中,setCount 接收一个函数 prevCount => prevCount + 1,确保使用的是最新的状态值进行更新。

3. 不要直接修改状态

状态应该是不可变的,不要直接修改状态对象,而是通过创建新对象来更新状态。

import React, { useState } from 'react';

const Example = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateAge = () => {
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.age}</p>
      <button onClick={updateAge}>Increment Age</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这个示例中,使用扩展运算符 ...prevUser 创建了一个新的用户对象,并更新了年龄属性。

4. 合并状态

对于对象类型的状态,需要手动合并更新的部分,因为 useState 不会自动合并更新对象。

import React, { useState } from 'react';

const Example = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    setUser(prevUser => ({
      ...prevUser,
      name: 'Doe'
    }));
  };

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这个示例中,setUser 的更新函数创建了一个新的用户对象,同时保持其他属性不变。

5. 避免不必要的状态更新

尽量避免在每次渲染中都调用状态更新函数,只有在需要时才更新状态,以提高性能。

import React, { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    if (count < 10) {
      setCount(count + 1);
    }
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这个示例中,只有在 count 小于 10 时才会更新状态,避免了不必要的状态更新。

总结

  1. 状态更新是异步的:不能依赖立即更新后的值。
  2. 使用函数式更新:在更新状态时,传递一个函数来确保使用最新的状态值。
  3. 不要直接修改状态:状态应该是不可变的,需要通过创建新对象来更新状态。
  4. 手动合并状态:对于对象类型的状态,需要手动合并更新部分。
  5. 避免不必要的状态更新:只有在需要时才更新状态,以提高性能。

9.基础样式方案

1.行内样式(不推荐):<div style={{color:“red”}}></>

2.class类名控制:

10.classNames优化类名控制

<div className={classNames(“foo”,{active:true})}>

</p> </div> ); }; export default MultiStateComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

En este ejemplo utilizamos dos useState Llame para gestionar por separadocount ytext Dos variables de estado.

estado de inicialización

Puede establecer el valor inicial del estado en el valor devuelto por la función, lo cual es particularmente útil cuando la inicialización requiere realizar cálculos complejos:

import React, { useState } from 'react';

const ExpensiveComponent = () => {
  const initialCount = () => {
    // 模拟一个复杂的计算
    return 42;
  };

  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>Initial count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
};

export default ExpensiveComponent;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

En este ejemplo,initialCount La función solo se ejecutará una vez cuando el componente se renderice por primera vez para calcular el valor del estado inicial.

Resumir

  • useState Es un React Hook que se utiliza para agregar funcionalidad de administración de estado a componentes funcionales.
  • useState Devuelve una matriz que contiene el valor del estado actual y una función que actualiza el estado.
  • Puede usar múltiples useState Llamado para gestionar múltiples variables de estado.
  • El valor inicial del estado puede ser el resultado de un cálculo complejo, implementado pasando una función.

8. Reglas para modificar el estatus

En reaccionar, use useState Al administrar y modificar el estado, existen algunas reglas y mejores prácticas que deben seguirse para garantizar que el proceso de actualización y administración del estado sea eficiente y confiable. A continuación se detallan las principales reglas para modificar el estado y algunos ejemplos:

1. Las actualizaciones de estado son asíncronas

Las actualizaciones de estado de React son asincrónicas, lo que significa que después de llamar a la función de actualización de estado, las actualizaciones de estado no se reflejarán inmediatamente, sino que tendrán efecto solo después de la siguiente representación.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 这里的 count 可能不会立即更新
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

En el ejemplo anterior,console.log(count) Es posible que el valor actualizado no se muestre inmediatamente porque las actualizaciones de estado son asincrónicas.

2. La función de actualización de estado acepta el estado actual como parámetro.

Para asegurarse de que los valores utilizados al actualizar el estado sean los más recientes, puede pasar una función a la función de actualización de estado. Esta función recibe el valor del estado actual como parámetro.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

En este ejemplo,setCount recibir una funciónprevCount => prevCount + 1, asegurando que se utilice el último valor de estado para la actualización.

3. No modifiques el estado directamente

El estado debe ser inmutable, no modifique el objeto de estado directamente, sino actualice el estado creando nuevos objetos.

import React, { useState } from 'react';

const Example = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateAge = () => {
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.age}</p>
      <button onClick={updateAge}>Increment Age</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

En este ejemplo, utilice el operador de extensión ...prevUser Se crea un nuevo objeto de usuario y se actualiza el atributo de edad.

4. Estado de fusión

Para los estados de tipo de objeto, las partes actualizadas deben fusionarse manualmente porque useState Los objetos actualizados no se combinan automáticamente.

import React, { useState } from 'react';

const Example = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    setUser(prevUser => ({
      ...prevUser,
      name: 'Doe'
    }));
  };

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

En este ejemplo,setUser La función de actualización crea un nuevo objeto de usuario sin modificar otras propiedades.

5. Evite actualizaciones de estado innecesarias

Intente evitar llamar a la función de actualización de estado en cada renderizado y actualice el estado solo cuando sea necesario para mejorar el rendimiento.

import React, { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    if (count < 10) {
      setCount(count + 1);
    }
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Example;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

En este ejemplo, sólo si count El estado se actualizará únicamente cuando el valor sea inferior a 10, evitando actualizaciones de estado innecesarias.

Resumir

  1. Las actualizaciones de estado son asíncronas: No se puede confiar en valores actualizados inmediatamente.
  2. Utilice actualizaciones funcionales: Al actualizar el estado, pase una función para garantizar que se utilice el último valor de estado.
  3. No modificar el estado directamente: El estado debe ser inmutable y debe actualizarse mediante la creación de nuevos objetos.
  4. Estado de fusión manual: Para el estado de los tipos de objetos, la parte de actualización debe fusionarse manualmente.
  5. Evite actualizaciones de estado innecesarias: actualice el estado solo cuando sea necesario para mejorar el rendimiento.

9.Esquema de estilo básico

1. Estilo en línea (no recomendado):{color:“rojo”}}&gt;</>

2.control de nombre de clase de clase:

10.classNames optimiza el control de nombres de clases

<div className={classNames(“foo”,{active:true})}>