首页 > 其他分享 >React学习（一）

React学习（一）

时间：2024-06-23 15:28:02浏览次数：20  
标签：学习 Vue return 渲染 DOM React 组件

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生命周期方法（如果你在该方法中定义了任何清理逻辑）。

标签：学习,Vue,return,渲染,DOM,React,组件
From： https://blog.csdn.net/m0_55049655/article/details/139899959

相关文章

  • 海洋生物识别系统+图像识别+Python+人工智能课设+深度学习+卷积神经网络算法+TensorFl
    一、介绍海洋生物识别系统。以Python作为主要编程语言，通过TensorFlow搭建ResNet50卷积神经网络算法，通过对22种常见的海洋生物（'蛤蜊','珊瑚','螃蟹','海豚','鳗鱼','水母','龙虾','海蛞蝓','章鱼','水獭','企鹅',�......
  • 【React】如何理解 React 的 Fiber？
    理解React源码的Fiber需要对React的内部工作原理和性能优化有深入的了解。Fiber是React16及以后版本中引入的一种新的内部表示形式，用于在React的核心算法中更好地管理组件树的更新和渲染。以下是关于React源码中Fiber的理解：1.为什么需要Fiber？在React......
  • 海洋生物识别系统+图像识别+Python+人工智能课设+深度学习+卷积神经网络算法+TensorFl
    一、介绍海洋生物识别系统。以Python作为主要编程语言，通过TensorFlow搭建ResNet50卷积神经网络算法，通过对22种常见的海洋生物（‘蛤蜊’,‘珊瑚’,‘螃蟹’,‘海豚’,‘鳗鱼’,‘水母’,‘龙虾’,‘海蛞蝓’,‘章鱼’,‘水獭’,‘企鹅’,‘河豚’,‘魔鬼鱼’,‘......
  • Python进阶学习笔记-基础篇
    打印原始字符串print(r"D:\three\two\one\now")D:\three\two\one\now复现随机数importrandomx=random.getstate()print(random.randint(1,10))print(random.randint(1,10))print(random.randint(1,10))random.setstate(x)print(random.randint(1,10))pr......
  • Python进阶学习笔记-函数篇
    函数的特殊参数#/前的参数只能是位置参数，*后面的只能是关键字参数，之间的不限参数类型deffunc(a,b,/,c,*,d,e):print(a,b,c,d,e)func(1,2,3,d=4,e=5)func(1,2,c=3,d=4,e=5)#a,b不能以关键字形式传参，d,e只能以关键字参数传参#可变参数*argsdef......
  • Python进阶学习笔记-面向对象篇
    组合classEngine:"""引擎类，提供基本的引擎功能"""def__init__(self,power):self.power=powerdefstart(self):print(f"引擎启动，功率：{self.power}")classCar:"""汽车类，使用引擎类的功能"&......
  • 【Python机器学习】NMF——将NMF应用于人脸图像
    将NMF应用于之前用过的Wild数据集中的LabeledFaces。NMF的主要参数是我们想要提取的分量个数。通常来说，这个数字要小于输入特征的个数（否则的话，将每个像素作为单独的分量就可以对数据进行解释）。首先，观察分类个数如何影响NMF重建数据的好坏：importmglearn.plotsimportnumpy......
  • 2024 安装体验 React Native
    npxreact-native@latestinitAwesomeProject配置gradlehttps://blog.csdn.net/weixin_44843569/article/details/120873183gradle下载慢https://blog.csdn.net/liyu_ya/article/details/129403811 项目/android->gradle->wrapper->gradle-wrapper.properties......
  • 如何选择机器学习算法性能指标-续
    序言选择用于评估机器学习算法的指标非常重要。指标的选择会影响机器学习算法性能的衡量方式并比较。它们会影响我们如何权衡不同特征的重要性结果以及选择哪种算法的最终选择。算法评估指标针对分类和回归类型的机器学习问题，我们将演示了各种不同的算法评估指标。对于分......
  • Machine Learning and Artifcial Intelligence -2nd Edition（人工智能与机器学习第二版
    #《人工智能和机器学习》由AmeetV.Joshi撰写，是一本关于人工智能（AI）和机器学习（ML）的综合性教材，旨在为学生和专业人士提供基础理论、算法和实际应用的全面指导。这本书分为七个部分，涵盖了从基础概念到高级应用的广泛内容。#内容结构PartI:Introduction本部分介绍了人工智......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99