React学习（一）

devtools/2024/12/22 2:25:12/

React的详细解析:

1. React的起源与背景

  • React起源于Facebook的内部项目，旨在解决市场上JavaScript MVC框架的不足之处。
  • React的早期原型被称为“FaxJS”，由Facebook工程师Jordan Walke开发，深受XHP（一个简单的PHP HTML组件框架）影响。
  • React于2011年首次亮相，首次用于Facebook的Newsfeed功能，并在次年在Instagram中使用。
  • React于2013年5月在美国JSConf上开源。

2. React的主要功能

  • React主要用于构建UI，可以在其中传递多种类型的参数，如声明代码、静态的HTML DOM元素、动态变量以及可交互的应用组件。
  • React通过创建虚拟DOM（Document Object Model）来优化DOM操作，提高应用程序的性能。

3. React的特点

  • 声明式设计：React使创建交互式UI变得轻而易举。当数据变动时，React能高效更新并渲染合适的组件。
  • 组件化：React通过构建管理自身状态的封装组件，然后对其组合以构成复杂的UI。
  • 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
  • 灵活：无论使用什么技术栈，都可以在无需重写现有代码的前提下，通过引入React来开发新功能。

4. React的工作原理

  • React在内存中创建一个虚拟DOM，而不是直接操作浏览器的DOM。在对浏览器DOM进行更改之前，它会在虚拟DOM中执行所有必要的操作。
  • React只改变需要改变的地方，找出已经进行了哪些更改，并只更改需要更改的内容。

5. React的架构与编程方式

  • React是MVC中薄薄的一层V（View），只关注表现层。它自带View和Controller库，不需要任何其他的库也可以自运行。
  • React支持函数式编程、类式编程和基于Hooks的编程方式。

6. React的性能优化

  • React凭借虚拟DOM和diff算法拥有高效的性能，但还有其他方法可以进一步提升性能，如使用React.memo缓存组件、使用useMemo缓存大量的计算等。

7. React的社区与未来趋势

  • React拥有庞大的开发者社区，提供了丰富的资源和工具。
  • 随着技术的不断发展和创新，React将继续在前端领域发挥重要作用，并引领未来的发展趋势，如与后端技术的更紧密集成、在移动开发中的地位进一步提升等。

8. React的组件与属性

  • React的基础组件包括React.Component，它必须实现render()方法以返回HTML元素。
  • 组件的属性包括props（用于与外部组件间的参数传入和返回）和state（用于完成组件内部的动态转换交互）。

React特性

  1. 声明式设计：

    • React通过简洁的视图设计，将应用的状态和UI紧密结合。当数据变动时，React能高效更新并渲染合适的组件。这种声明式的方式使得UI的开发变得直观和简单。

  2. 组件化：

    • React将用户界面拆分成独立的组件，每个组件具有自己的状态（state）和属性（props）。
    • 组件化开发使得代码更加模块化和可重用，提高了代码的复用性和可维护性。
    • 组件的组合和嵌套可以构建出复杂的UI界面。

  3. 高效性：

    • React通过对DOM的模拟，使用虚拟DOM（Virtual DOM）来优化页面渲染性能。
    • 它会在内存中创建并操作一个轻量级的虚拟DOM树，并与实际DOM进行比较，只更新实际DOM中发生变化的部分，从而极大地减少了不必要的DOM操作，提高了渲染性能。

  4. 灵活性：

    • React是一个灵活的JavaScript库，可以与多种技术栈结合使用。
    • 在无需重写现有代码的前提下，可以通过引入React来开发新功能，增强了代码的复用性和扩展性。

  5. 单向数据流：

    • React使用单向数据流来管理组件之间的数据传递。父组件可以通过props将数据传递给子组件，子组件可以通过回调函数将数据传递回父组件。
    • 这种数据流动的方式使得组件之间的关系更加清晰可控，便于跟踪和调试。

  6. 生命周期方法：

    • React组件具有一系列的生命周期方法，用于在组件不同阶段执行特定的操作。
    • 如componentDidMount在组件挂载后调用，componentDidUpdate在组件更新后调用等。
    • 生命周期方法提供了灵活的钩子函数，可以方便地处理组件的状态变化和交互逻辑。

  7. 高效的Diff算法：

    • React通过使用高效的Diff算法来比较虚拟DOM树的差异，并最小化需要进行的DOM更新操作。
    • 这种算法使得React能够快速确定哪些部分需要更新，从而提高渲染性能。

  8. 丰富的工具生态系统：

    • React拥有庞大的开发者社区和丰富的工具生态系统。
    • 提供了许多与React配套的开发工具和库，如React Router（用于处理应用程序的路由）、Redux（用于管理全局状态）、Styled Components（用于样式化组件）等。
    • 这些工具和库可以帮助开发者更好地构建和维护React应用程序。

综上所述，React以其声明式设计、组件化、高效性、灵活性、单向数据流、生命周期方法、高效的Diff算法和丰富的工具生态系统等特性，在前端开发领域得到了广泛的应用和认可。

React VS Vue

React与Vue在前端开发领域中都是非常流行的框架，它们各自具有独特的特性和优势。以下是React与Vue之间的一些主要差异：

  1. 框架本质与数据流：

    • React是前端组件框架，由后端组件演化而来，它主要关注UI组件的渲染和更新。React提倡单向数据流，即数据从父组件流向子组件，通过props传递，如果需要更新父组件的数据，则通过回调函数的方式。
    • Vue本质上是MVVM框架，由MVC发展而来。它实现了组件与DOM之间的双向数据绑定，即当数据发生变化时，视图也会自动更新；当视图发生变化时，数据也会同步更新。

  2. 组件写法与模板：

    • React推荐使用JSX（JavaScript XML）语法来编写组件，它允许在JavaScript中直接编写类似HTML的标记。React组件通常将HTML、CSS和JavaScript写在一起，但也可以通过其他方式（如CSS Modules）来分离样式。
    • Vue则推荐使用.vue单文件组件格式，将HTML、CSS和JavaScript写在一个文件中，使得组件更加模块化和可重用。Vue的模板语法与HTML非常接近，学习成本较低。

  3. 性能优化与渲染机制：

    • React通过虚拟DOM（Virtual DOM）和高效的Diff算法来优化性能。当数据发生变化时，React会创建一个新的虚拟DOM树，并与旧的虚拟DOM树进行比较，找出差异并更新实际DOM。React的渲染过程可能涉及到整个组件树的重新渲染，但可以通过shouldComponentUpdate等生命周期方法来控制。
    • Vue也使用虚拟DOM进行性能优化，但它在渲染过程中会跟踪每个组件的依赖关系，从而能够更精确地计算出需要更新的部分。Vue的渲染机制通常比React更快，因为它可以更快地计算出Virtual DOM的差异。

  4. 状态管理与全局事件：

    • React通常使用Redux等库来进行全局状态管理，Redux提供了可预测化的状态管理机制，但可能会增加代码的复杂度。React也支持Context API来实现跨组件的状态共享。
    • Vue则提供了Vuex作为官方推荐的状态管理库，Vuex采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。此外，Vue还提供了EventBus等机制来实现全局事件的监听和触发。

  5. 生态系统与社区支持：

    • React拥有庞大的生态系统和活跃的社区支持，提供了许多优秀的库和工具来辅助开发，如React Router、Redux、React Native等。React的文档和教程也非常丰富，有助于开发者快速上手和深入学习。
    • Vue的生态系统也在不断发展壮大，提供了许多实用的库和工具来支持开发。Vue的文档和教程也非常清晰易懂，适合初学者快速入门。此外，Vue的社区也非常活跃，提供了许多有用的资源和支持。

综上所述，React和Vue在框架本质、组件写法、性能优化、状态管理和生态系统等方面存在明显的差异。选择哪个框架取决于项目的具体需求、开发者的个人偏好和团队的技术栈等因素。

 JSX示例

1. 基本 JSX 语法

import React from 'react';  function HelloWorld() {  return (  <div>  <h1>Hello, World!</h1>  <p>This is a simple React component using JSX.</p>  </div>  );  
}  export default HelloWorld;

2. 组件间的嵌套

import React from 'react';  function ParentComponent() {  return (  <div>  <h1>Parent Component</h1>  <ChildComponent />  </div>  );  
}  function ChildComponent() {  return (  <p>I am a child component.</p>  );  
}  export default ParentComponent;

3. 使用 JavaScript 表达式

在 JSX 中，你可以使用大括号 {} 来嵌入 JavaScript 表达式。

import React from 'react';  function Greeting({ name }) {  return (  <div>  <h1>Hello, {name}!</h1>  </div>  );  
}  export default function App() {  const name = 'React';  return (  <div>  <Greeting name={name} />  </div>  );  
}

4. 条件渲染

import React from 'react';  function LoginButton({ isLoggedIn }) {  return (  <button>  {isLoggedIn ? 'Logout' : 'Login'}  </button>  );  
}  export default function App() {  const isLoggedIn = false;  return (  <div>  <LoginButton isLoggedIn={isLoggedIn} />  </div>  );  
}

5. 列表渲染

使用 map() 方法渲染列表。

import React from 'react';  function ListItem({ item }) {  return <li>{item}</li>;  
}  function List({ items }) {  return (  <ul>  {items.map((item, index) => (  <ListItem key={index} item={item} />  ))}  </ul>  );  
}  export default function App() {  const items = ['Apple', 'Banana', 'Cherry'];  return (  <div>  <List items={items} />  </div>  );  
}

注意：在渲染列表时，每个列表项都需要一个唯一的 key 属性，这有助于 React 识别哪些项已更改、已添加或已删除。 

6. 样式处理

外部css文件

虽然 JSX 看起来类似 HTML，但它不支持 class 属性（因为它在 JavaScript 中是保留字）。相反，你应该使用 className。

//外部css文件
/* styles.css */  
.my-class {  color: red;  font-size: 18px;  
}
//jsx
import React from 'react';  
import './styles.css'; // 引入CSS文件  function ClassNameComponent() {  return (  <div className="my-class">  <p>这段文字使用了外部CSS文件中的类名。</p>  </div>  );  
}  export default ClassNameComponent;
内联样式

你也可以使用，但需要将样式对象作为 style 属性的值传递。

import React from 'react';  function StyledComponent() {  const styles = {  color: 'blue',  fontSize: '20px',  };  return (  <div style={styles}>  <p>I have inline styles!</p>  </div>  );  
}  export default StyledComponent;
内联<style>标签（不推荐）
import React from 'react';  function InlineStyleComponent() {  return (  <div>  <style>{`  .inline-style {  color: green;  text-decoration: underline;  }  `}</style>  <div className="inline-style">  <p>这段文字使用了内联<style>标签中的类名。</p>  </div>  </div>  );  
}  export default InlineStyleComponent;

对于复杂的样式和布局，你可能还需要考虑使用CSS预处理器（如Sass或Less）或CSS框架（如Bootstrap或Material-UI）。

 React渲染流程

在React中，组件的渲染流程是一个重要的概念，它涉及到React如何构建和更新DOM。React的渲染流程大致可以分为几个步骤，包括组件的实例化、渲染、更新和卸载。React并没有直接提供一个名为“渲染函数”的API，但你可以通过组件的render方法来定义如何渲染组件的UI。

以下是React组件渲染流程的基本步骤：

  1. 实例化：当React需要渲染一个组件时，它首先会创建一个组件的实例。这通常通过调用React.createElement()（在JSX中隐式调用）或直接使用JSX来完成。

  2. 渲染（Mounting）：

    • 构建React元素树：React会遍历组件树，并为每个组件调用其render方法。render方法应该返回一个React元素（通常是JSX），它描述了组件的UI结构。
    • 构建虚拟DOM：React会根据这些React元素构建一个虚拟DOM树。虚拟DOM是一个轻量级的JavaScript对象树，它是真实DOM的内存中表示。
    • 协调（Reconciliation）：React会比较新的虚拟DOM树和旧的虚拟DOM树，找出它们之间的差异。这个过程被称为“协调”。
    • 渲染到真实DOM：React会根据这些差异来更新真实DOM。这个过程是高效的，因为React只会更新真正发生变化的部分，而不是整个DOM树。

  3. 更新（Updating）：

    • 当组件的props或state发生变化时，React会重新调用该组件的render方法，并生成一个新的虚拟DOM树。
    • 然后，React会再次进行协调过程，找出新旧虚拟DOM之间的差异。
    • 最后，React会将这些差异应用到真实DOM上，以更新用户界面。

  4. 卸载（Unmounting）：当组件不再需要时（例如，用户导航到另一个页面），React会从DOM中移除该组件及其所有子组件。在这个过程中，React会调用组件的componentWillUnmount生命周期方法（如果你在该方法中定义了任何清理逻辑）。


http://www.ppmy.cn/devtools/55231.html

相关文章

cache2go源码分析

cache2go源码分析

前言 cache2go是一个优秀的开源项目&#xff0c;具有过期功能的并发安全的golang缓存库。 源码分析 定义结构 定义一个缓存表 type CacheTable struct {sync.RWMutex// 一个表名name string// 全部缓存项items map[interface{}]*CacheItem// 清理时间触发cleanupTimer *ti…
阅读更多...
三目运算符中间的表达式可以省略吗(a?:c)?

三目运算符中间的表达式可以省略吗(a?:c)?

熟悉C语言的童靴对三目运算符都非常熟悉&#xff0c;a? b : c; 如果a为true&#xff0c;则整个运算符的值为b,否则为c;那么问题来了&#xff0c;三目运算符中间的表达式可以省略吗?即a? : c; 1、linux内核中出现的省略情况 本人在阅读内核代码是发现了下面的代码: preferr…
阅读更多...
Ant-Design-Vue动态表头并填充数据

Ant-Design-Vue动态表头并填充数据

要在Ant Design Vue中实现动态表头并填充数据&#xff0c;你可以遵循以下步骤来设计和实现。这里主要涉及a-table组件的使用以及如何根据后端提供的数据动态生成表头和填充表格内容。 准备数据 首先&#xff0c;确保你的后端能够提供一个包含表头信息和数据内容的JSON对象。例…
阅读更多...
6月20日（周四）A股行情总结：A股险守3000点，恒生科技指数跌1.6%

6月20日（周四）A股行情总结：A股险守3000点，恒生科技指数跌1.6%

A股三大股指走弱&#xff0c;科创板逆势上扬&#xff0c;半导体板块走强&#xff0c;多股20CM涨停。中芯国际港股涨超1%。恒生科技指数跌超1%。离岸人民币对美元汇率小幅走低&#xff0c;20日盘中最低跌至7.2874&#xff0c;创下2023年11月中旬以来的新低&#xff0c;随后收复部…
阅读更多...
【操作系统】第五章 文件系统

【操作系统】第五章 文件系统

文件系统 5.1 概述5.2 文件5.2.1 文件及文件系统的概念5.2.2 文件的属性5.2.3 文件的操作5.2.4 文件的类型文件分类 5.3 文件的访问文件的逻辑结构顺序文件顺序文件的优缺点 索引文件索引顺序文件直接文件和哈希文件 5.4 文件保护5.5 文件目录文件控制块(FCB)文件控制块的内容 …
阅读更多...
Nginx+Lua+Redis 实现Nginx301跳转配置管理

Nginx+Lua+Redis 实现Nginx301跳转配置管理

业务场景需求 long long ago&#xff1a; 在项目的运维过程中有一次SEO团队提出 网页的URL 中如果可以带上关键字&#xff0c;那么网页在各大搜索引擎中收录和排名有非常重大的突出优势&#xff08;~~SEO团队到底专不专业 ~~&#xff0c;此处不做置评&#xff09;&#xff0c;…
阅读更多...
C#基于SkiaSharp实现印章管理（1）

C#基于SkiaSharp实现印章管理（1）

最近对着微软的教程学习SkiaSharp的概念及用法&#xff0c;由于之前使用GDI绘制过坐标系、印章等程序&#xff0c;准备使用SkiaSharp、SKControl控件编写简单的印章设计功能&#xff0c;并能用印章对图片盖章。本文实现创建印章背景、序列化及反序列化印章对象等功能。   VS2…
阅读更多...
GIM： Learning Generalizable Image Matcher From Internet Videos

GIM： Learning Generalizable Image Matcher From Internet Videos

【引用格式】&#xff1a;Shen X, Yin W, Mller M, et al. GIM: Learning Generalizable Image Matcher From Internet Videos[C]//The Twelfth International Conference on Learning Representations. 2023. 【网址】&#xff1a;https://arxiv.org/pdf/2402.11095 【开源代…
阅读更多...
最新文章

Copyright @ 2022~2023