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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/32997.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ansible 任务块以及循环

ansible 任务块以及循环

任务块 可以通过block关键字&#xff0c;将多个任务组合到一起可以将整个block任务组&#xff0c;一起控制是否要执行 # 如果webservers组中的主机系统发行版是Rocky&#xff0c;则安装并启动nginx [rootpubserver ansible]# vim block1.yml --- - name: block tasks hosts…
阅读更多...
墨刀原型工具-小白入门篇

墨刀原型工具-小白入门篇

墨刀原型工具-小白入门篇 简介 随着互联网的发展和用户体验的重要性越来越受到重视&#xff0c;原型设计逐渐成为了产品设计中的重要环节。墨刀作为一款原型设计工具&#xff0c;以其简洁、易用的特点&#xff0c;受到了很多设计师的喜爱。本文将介绍墨刀原型工具的基本使用方…
阅读更多...
ROS2从入门到精通4-4：局部控制插件开发案例(以PID算法为例)

ROS2从入门到精通4-4：局部控制插件开发案例(以PID算法为例)

目录 0 专栏介绍1 控制插件编写模板1.1 构造控制插件类1.2 注册并导出插件1.3 编译与使用插件 2 基于PID的路径跟踪原理3 控制插件开发案例(PID算法)常见问题 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌握ROS2底层基本分布式原理&#xff0c;并具有机器人建模和…
阅读更多...
Go 如何使用指针灵活操作内存

Go 如何使用指针灵活操作内存

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…
阅读更多...
Leetcode 3196. Maximize Total Cost of Alternating Subarrays

Leetcode 3196. Maximize Total Cost of Alternating Subarrays

Leetcode 3196. Maximize Total Cost of Alternating Subarrays 1. 解题思路2. 代码实现 题目链接&#xff1a;3196. Maximize Total Cost of Alternating Subarrays 1. 解题思路 这一题就是一个动态规划&#xff0c;只需要考虑每一个元素作为开始和处于序列当中的二元态即可…
阅读更多...
深度学习引言

深度学习引言

深度学习引言 什么是神经网络&#xff1f; 我们常常用深度学习这个术语来指训练神经网络的过程。有时它指的是特别大规模的神经网络训练。 神经网络的监督学习 关于神经网络也有很多的种类&#xff0c;考虑到它们的使用效果&#xff0c;有些使用起来恰到好处&#xff0c;但事实…
阅读更多...
90天瘦30斤瘦身计划

90天瘦30斤瘦身计划

90天瘦30斤瘦身计划 重要提示&#xff1a; 在开始任何减肥计划之前&#xff0c;强烈建议咨询医生或营养师以确保该计划适合您的健康状况。减肥过快可能对身体健康产生负面影响&#xff0c;因此请确保您的方法既安全又可持续。 目标&#xff1a; 在90天内健康地减轻30斤体重。…
阅读更多...
爬虫笔记14——爬取网页数据写入MongoDB数据库，以爱奇艺为例

爬虫笔记14——爬取网页数据写入MongoDB数据库，以爱奇艺为例

下载MongoDB数据库 首先&#xff0c;需要下载MongoDB数据库&#xff0c;下载的话比较简单&#xff0c;直接去官网找到想要的版本下载即可&#xff0c;具体安装过程可以看这里。 pycharm下载pymongo库 pip install pymongo然后在在python程序中我们可以这样连接MongoDB数据库…
阅读更多...
红队内网攻防渗透：内网渗透之内网对抗：横向移动篇Kerberos委派安全非约束系约束系RBCD资源系Spooler利用

红队内网攻防渗透：内网渗透之内网对抗：横向移动篇Kerberos委派安全非约束系约束系RBCD资源系Spooler利用

#委派安全知识点 委派是一种域内应用模式，是指将域内用户账户的权限委派给服务账号，服务账号因此能以用户的身份在域内展开活动（请求新的服务等），类似于租房中介房东的关系去理解。 域委派分类： 1、非约束委派(Unconstrained Delegation, UD) 2、约束委派(Constrained D…
阅读更多...
【Linux】使用 rz 和 sz 命令在 Linux 中进行文件传输

【Linux】使用 rz 和 sz 命令在 Linux 中进行文件传输

那年夏天我和你躲在 这一大片宁静的海 直到后来我们都还在 对这个世界充满期待 今年冬天你已经不在 我的心空出了一块 很高兴遇见你 让我终究明白 回忆比真实精彩 &#x1f3b5; 王心凌《那年夏天宁静的海》 在 Linux 系统中&#xff0c;rz 和 sz 是两个用…
阅读更多...
深度神经网络：解锁智能的密钥

深度神经网络：解锁智能的密钥

深度神经网络&#xff1a;解锁智能的密钥 在人工智能的浩瀚星空中&#xff0c;深度神经网络&#xff08;Deep Neural Networks, DNNs&#xff09;无疑是最耀眼的那颗星。它以其强大的学习能力、高度的适应性和广泛的应用场景&#xff0c;成为了我们解锁智能世界的一把密钥。本…
阅读更多...
[个人感悟] MySQL应该考察哪些问题?

[个人感悟] MySQL应该考察哪些问题?

前言 MySQL作为SQL类型基础典型, 通常会问, 索引, 事务, SQL实战 这3个部分的问题. 问题 问题-架构 能聊聊MySQL的基本架构么? MySQL支持的存储引擎有哪些, 你主要使用过哪种? 说说你的理解? 问题-索引 什么是索引? MYSQL内所有的基本种类有哪些&#xff1f;不同分类…
阅读更多...
IPD推行成功的核心要素（十三）IPD产品开发流程让企业正确地做事情

IPD推行成功的核心要素（十三）IPD产品开发流程让企业正确地做事情

一个公司能否成功&#xff0c;取决于它适应市场需求和竞争环境变化的速度。公司需要不断创新&#xff0c;以符合客户期望并保持相关性。这意味着需要更快速地推出新产品和改进产品。简化的产品开发流程能够支持快速开发周期&#xff0c;帮助公司领先于市场&#xff0c;用优秀的…
阅读更多...
浏览器进程与线程（4）

浏览器进程与线程（4）

上一篇&#x1f449;: 浏览器安全 文章目录 进程与线程1.进程与线程概念2.进程和线程的区别进程的特性线程的特性通信与同步 3.浏览器渲染进程中的线程4.什么是僵尸进程和孤儿进程5.死锁资源类型产生死锁的原因必要条件解决策略 6.进程通信方式7. 如何实现浏览器内多个标签页之…
阅读更多...
植物大战僵尸杂交版2.1版本终于来啦！游戏完全免费

植物大战僵尸杂交版2.1版本终于来啦！游戏完全免费

在这个喧嚣的城市里&#xff0c;我找到了一片神奇的绿色世界——植物大战僵尸杂交版。它不仅是一款游戏&#xff0c;更像是一扇打开自然奥秘的窗户&#xff0c;让我重新认识了植物和自然的力量。 植物大战僵尸杂交版最新绿色版下载链接&#xff1a; https://pan.quark.cn/s/d6…
阅读更多...
如何在Rust中实现条件编译

如何在Rust中实现条件编译

目前正在学习使用Rust作后端开发&#xff0c;学习过程经常需要写一些调试代码&#xff0c;使用过程发现没有像#if 0 . . . #endif这样的条件编译。于是查阅资料&#xff0c;找到了替代方案&#xff0c;别说还挺好用。 目录 前言配置Cargo.toml文件代码中添加条件编译执行结果对…
阅读更多...
MySQL的综合运用

MySQL的综合运用

MySQL版的葵花宝典&#xff0c;欲练此功&#xff0c;挥刀自。。。呃&#xff0c;&#xff0c;&#xff0c;说错了&#xff0c;是先创建两个表&#xff0c;分别是location表和store_info表 示例表为location表和store_info表&#xff0c;如下图所示&#xff1a; 操作一&#xf…
阅读更多...
Layui为select绑定change事件/Layui中select绑定change事件不生效

Layui为select绑定change事件/Layui中select绑定change事件不生效

1、问题概述&#xff1f; 在使用jQuery的时候&#xff0c;我们可以通过如下方式为select下拉框绑定change事件&#xff0c;但是在layui中不生效。 所以经常有人发问&#xff1a;Layui中为select绑定change事件不生效。 $(function(){//通过id为select绑定change事件$("…
阅读更多...
【C++高阶】掌握AVL树：构建与维护平衡二叉搜索树的艺术

【C++高阶】掌握AVL树：构建与维护平衡二叉搜索树的艺术

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;STL-> map与set &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀AVL树 &#x1f4d2;1. AVL树…
阅读更多...
mysql5.7升级到mysql8.0遇坑

mysql5.7升级到mysql8.0遇坑

mysql5.7升级到mysql8.0发现生产环境服务会报错 Error querying database. Cause: java.sql.SQLSyntaxErrorException: FUNCTION GeomFromText does not exist 在MySQL 8.0中&#xff0c;GeomFromText函数已经被弃用&#xff0c;取而代之的是ST_GeomFromText函数。你可以将你…
阅读更多...
最新文章

Copyright @ 2022~2023