React前端框架:构建现代Web应用的强大工具

在现代Web开发中,前端框架的使用已成为构建高效、可维护的应用程序的标准实践。React作为一种流行的前端框架,凭借其简洁、高效、灵活的特点,已成为许多开发者的首选。本文将介绍React框架的基本概念、核心特点以及如何使用它构建Web应用。

一、React简介

React是由Facebook开发的一个开源JavaScript库,主要用于构建用户界面。React的核心理念是通过组件化的方式,构建出灵活、可复用的UI组件,从而简化开发流程,提高开发效率。与传统的DOM操作相比,React通过虚拟DOM来优化页面的渲染,显著提高了性能。

二、React的核心概念

React的设计哲学围绕着几个核心概念,这些概念形成了React作为前端开发工具的基础。理解这些核心概念是高效使用React的关键。

1. 组件化(Component-Based)

React应用的基本构建单元是组件。组件是可以复用的、封装了UI和逻辑的代码模块。每个React应用基本上是由多个相互嵌套的组件组成,这些组件能够独立处理自己的状态和行为,同时通过“props”与其他组件进行通信。

组件的生命周期

每个React组件都经历一些生命周期阶段,例如创建、更新和销毁。在类组件中,React提供了一些生命周期函数,允许开发者在这些阶段插入自定义逻辑。例如:

  • componentDidMount: 在组件被挂载到DOM后调用。通常用于发起网络请求或初始化操作。
  • shouldComponentUpdate: 在组件接收到新的props或state时调用,允许开发者优化渲染过程。
  • componentWillUnmount: 在组件从DOM中移除之前调用,用于清理资源,比如取消网络请求或清除定时器。

对于函数组件,React提供了useEffect Hook,允许在组件挂载、更新和卸载时执行副作用逻辑。Hooks使得函数组件能够拥有类组件的一些生命周期功能。

函数组件 vs 类组件
  • 函数组件:函数组件是最基本的React组件形式,它只是一个JavaScript函数,接收“props”作为输入并返回UI。函数组件非常轻量,推荐用于无状态的组件。

    function Greeting(props) {return <h1>Hello, {props.name}!</h1>;
    }
    

  • 类组件:类组件继承自React.Component,提供了更多的功能,如状态管理、生命周期函数等。虽然现在越来越多的开发者倾向于使用函数组件,但类组件在旧的React代码中仍然非常常见。

    class Greeting extends React.Component {render() {return <h1>Hello, {this.props.name}!</h1>;}
    }
    

React通过这种组件化的方式,极大地提升了代码的复用性和可维护性,尤其适用于大型复杂的应用程序。

2. 虚拟DOM(Virtual DOM)

React的一个重要优化点是虚拟DOM(Virtual DOM)。在传统的Web开发中,每当UI状态改变时,浏览器需要更新DOM节点,这通常是一个性能开销非常大的过程。React通过引入虚拟DOM来优化这一过程。

虚拟DOM是React对实际DOM的一个轻量级副本。当组件的状态或属性(props)发生变化时,React首先会在内存中生成一个虚拟DOM树,而不是直接操作真实的DOM。然后,React会通过“差异化算法”(Diffing Algorithm)比较新旧虚拟DOM树之间的差异,找出差异并只更新实际DOM中有变化的部分。这种优化极大减少了DOM操作的次数,从而提高了应用的性能。

虚拟DOM的核心优势在于,它提供了一种高效的UI更新机制,尤其适用于数据频繁变化的应用(例如动态加载数据、交互式界面等)。

3. 单向数据流(One-Way Data Binding)

React遵循单向数据流的原则。也就是说,数据流动总是从父组件流向子组件,父组件通过“props”向子组件传递数据,而子组件只能通过调用父组件传入的回调函数来“通知”父组件数据的变化。React不允许子组件直接修改父组件的数据。

这种单向数据流的设计让应用的状态变化更加可预测,便于调试和维护。它帮助开发者更容易理解应用的状态如何在不同的组件之间流动。

在React中,数据流动的方式可以通过以下两种机制进行补充:

  • Props:父组件通过props传递数据给子组件。props是只读的,子组件不能直接修改它。
  • State:组件内部的state表示组件的本地状态。每当state发生变化时,React会重新渲染组件以反映新的状态。
// 父组件
function Parent() {const [message, setMessage] = React.useState("Hello from parent!");return <Child message={message} />;
}// 子组件
function Child(props) {return <p>{props.message}</p>;
}

4. JSX语法

JSX(JavaScript XML)是一种JavaScript的语法扩展,它允许开发者在JavaScript代码中编写HTML结构。React推荐使用JSX来定义UI,因为它的语法更加直观,并且能与JavaScript逻辑无缝集成。

虽然JSX看起来像HTML,但它其实是JavaScript的一个语法扩展,最终会被转换为React.createElement()函数调用。JSX使得开发者可以将UI结构、样式和逻辑混合在一起,从而提高开发效率。一个简单的JSX示例:

function App() {return (<div><h1>Hello, React!</h1><p>Welcome to learning React with JSX.</p></div>);
}

JSX还支持嵌入表达式,可以在UI中嵌入JavaScript变量和表达式,表达式需要放在大括号{}内:

function Greeting({ name }) {return <h1>Hello, {name}!</h1>;
}

5. 状态管理(State Management)

状态(State)是React中组件非常重要的概念之一。组件的状态决定了它的表现(UI)。React允许开发者通过state来管理组件内部的可变数据。例如,当用户点击按钮时,state的变化会导致UI的重新渲染。

使用State的方式:
  • 类组件:在类组件中,state是通过this.state定义的,并且使用this.setState()方法来更新状态。

    class Counter extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}increment = () => {this.setState({ count: this.state.count + 1 });};render() {return (<div><p>Count: {this.state.count}</p><button onClick={this.increment}>Increment</button></div>);}
    }
    
  • 函数组件:函数组件中的state可以通过React Hooks(如useState)来管理。这使得函数组件可以拥有状态管理的能力。

    function Counter() {const [count, setCount] = React.useState(0);const increment = () => {setCount(count + 1);};return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button></div>);
    }
    

useState是React中最常用的Hook之一,它允许在函数组件中添加状态,使得函数组件具备和类组件一样的能力。

6. React Hooks

React Hooks是React 16.8版本引入的一项特性,它使得在函数组件中使用状态、生命周期和其他React特性变得可能。useStateuseEffect是最常用的两个Hook。

  • useState:用于在函数组件中定义状态。
  • useEffect:用于处理副作用,如数据获取、订阅和手动操作DOM等。
import React, { useState, useEffect } from "react";function Timer() {const [seconds, setSeconds] = useState(0);useEffect(() => {const timer = setInterval(() => setSeconds(seconds => seconds + 1), 1000);return () => clearInterval(timer); // Cleanup on unmount}, []);return <p>Timer: {seconds} seconds</p>;
}

Hooks的引入简化了代码结构,减少了类组件中繁琐的生命周期管理,使得函数组件可以拥有类组件的所有功能,同时保持代码的简洁性。

三、React的优点

1. 高效的性能

React通过虚拟DOM技术,使得UI更新更加高效。它通过最小化实际DOM操作来减少性能开销,特别是在复杂的应用中,React的性能优势尤为明显。

2. 组件化开发

React推崇组件化开发,可以将UI分割成多个小的可复用组件。每个组件都是独立的,可以单独开发、测试、维护。这种方式大大提高了开发效率和代码的可维护性。

3. 丰富的生态系统

React不仅仅是一个UI库,它拥有丰富的生态系统,包括React Router(路由管理)、Redux(状态管理)、React Native(移动端开发)等众多工具和库。这些工具可以帮助开发者快速构建复杂的应用程序。

4. 跨平台支持

React Native是React的一个衍生项目,它使得开发者能够使用React来开发移动端应用。React Native通过桥接技术,使得React代码可以运行在iOS和Android平台上,极大提高了开发效率。

四、React的使用场景

React的设计哲学使其在构建现代Web应用时非常强大和灵活。由于其组件化、声明式UI和高效的性能优化,React非常适合用于构建各种类型的Web应用和移动应用。接下来,我们将探讨React在不同使用场景中的优势和应用,帮助你更好地了解它的适用范围。

1. 单页应用(SPA)

单页应用(SPA,Single Page Application)是一种Web应用,其中所有的用户交互都发生在单一的HTML页面中,页面的内容会动态加载并更新,而不需要每次都重新加载整个页面。React非常适合构建SPA,尤其是在涉及复杂UI和频繁状态更新的场景中。

React在SPA中的优势:
  • 高效的UI更新:React通过虚拟DOM和精细的差异化算法,优化了UI更新的效率,尤其是在需要频繁渲染的大型SPA中,能够保持快速响应。
  • 组件化架构:SPA通常需要高度动态的UI,React的组件化设计能够让开发者方便地将UI划分为多个小的、可复用的部分,从而提升开发效率和代码维护性。
  • 路由支持:React生态中有一个流行的路由库——React Router,它允许开发者在SPA中实现路由功能,管理页面跳转和URL参数等。
典型的SPA应用:
  • 社交媒体平台:如Facebook、Instagram等,这些应用大多数页面内容的更新并不需要重新加载整个页面。
  • 企业管理系统:如CRM(客户关系管理)系统、ERP(企业资源计划)系统等,它们通常需要动态地显示和更新各种数据。
  • 新闻网站:许多新闻站点使用SPA结构,能够实时加载新文章或评论,提升用户体验。

2. 动态数据驱动的应用

React特别适合用于构建需要频繁更新数据的应用。这类应用通常需要在后台获取数据,并实时更新UI以反映最新的状态。例如,社交媒体、聊天应用和实时数据监控平台等,都会依赖于数据的快速变化和即时显示。

React在动态数据驱动应用中的优势:
  • 高效的渲染:React通过虚拟DOM和最小化的DOM更新,能够高效地渲染大量动态数据,确保在数据变化时界面更新流畅且响应迅速。
  • 状态管理:React的状态管理机制使得组件的状态变化能够及时反映在UI上,而React的useStateuseEffect等Hooks为状态管理和副作用处理提供了简洁的API。
  • 异步数据处理:React应用通常会与后端进行API通信(如RESTful API或GraphQL)。React的组件生命周期方法和Hooks允许开发者方便地进行异步操作并根据数据变化更新UI。
典型的动态数据驱动应用:
  • 社交媒体平台:例如Twitter、Facebook等,需要实时更新用户发布的内容、点赞、评论等。
  • 聊天应用:如Slack、WhatsApp等,消息和通知会实时显示在UI上。
  • 实时数据监控系统:如股票交易平台、金融信息系统、IoT设备监控等,界面会根据最新数据自动更新。

3. 电商平台和在线商店

React在构建电商平台和在线商店方面也表现优异,特别是在用户交互频繁、页面内容多样化的场景中。React的组件化结构非常适合处理电商平台复杂的UI,例如商品列表、购物车、订单管理等模块。

React在电商平台中的优势:
  • 组件化和复用性:电商网站通常需要展示不同种类的商品,每个商品有不同的属性(如价格、库存、评分等)。React的组件化使得这些商品项能够作为独立的组件进行复用,并且根据商品的不同数据动态渲染。
  • 动态更新和交互:React可以高效处理购物车中的商品更新、库存状态变化、订单数据等复杂的交互和状态管理。React的状态管理使得这些数据能够实时同步到UI上,提升用户体验。
  • SEO优化:React的服务器端渲染(SSR)支持可以帮助电商平台提升SEO(搜索引擎优化)效果,提高网站在搜索引擎中的排名。
典型的电商平台应用:
  • 在线零售商店:如Amazon、eBay等,商品展示、用户评论、商品筛选等功能都可以通过React组件化实现。
  • B2B电商平台:例如阿里巴巴、Made-in-China等,支持大量商品的动态展示和复杂的用户交互。
  • 订阅类服务:如Netflix、Spotify等,需要根据用户订阅的数据和观看历史实时更新内容。

4. 跨平台应用(React Native)

React不仅可以用于构建Web应用,还能通过React Native来开发跨平台的移动应用。React Native使得开发者可以用相同的代码库构建iOS和Android应用,极大提升了开发效率。

React Native的优势:
  • 代码共享:React Native允许开发者共享大部分JavaScript代码,同时能够调用原生的UI组件和API,从而开发出性能较高的移动应用。
  • 快速开发与热重载:React Native支持热重载功能,能够让开发者快速看到修改后的效果,减少开发调试时间。
  • 社区支持与生态系统:React Native拥有广泛的社区支持,许多第三方库和插件可供使用,帮助开发者更高效地实现移动端功能。
典型的React Native应用:
  • 跨平台移动应用:如Instagram、Facebook、Airbnb等,使用React Native构建的应用在iOS和Android平台上都能提供良好的用户体验。
  • 内部企业应用:许多公司使用React Native开发跨平台的企业级应用,减少开发和维护的成本。

5. 内容管理系统(CMS)

React在构建内容管理系统(CMS)方面也非常强大。内容管理系统需要频繁地对内容进行更新、编辑和展示。React的高效渲染和灵活的组件化结构使得它非常适合这种场景。

React在CMS中的优势:
  • 高效的UI渲染:CMS通常需要处理大量的内容和动态生成页面,React通过虚拟DOM和组件化的方式,可以高效渲染内容并提供流畅的用户体验。
  • 灵活的组件化设计:CMS的页面往往由多个不同类型的内容块(如文本、图片、视频等)组成。React的组件化可以帮助开发者轻松构建和管理这些内容块,并支持动态内容加载。
  • 与后台API的无缝集成:React可以与各种API接口进行无缝对接,支持从后台获取内容并动态展示。
典型的CMS应用:
  • 博客平台:如WordPress、Jekyll等,通过React可以构建一个前端展示页面,支持从后台拉取数据并实时更新。
  • 企业级CMS系统:如Drupal、Contentful等,许多企业级CMS系统采用React来构建前端,提供灵活的内容展示和管理能力。

6. 企业级Web应用

React同样适用于构建大型企业级Web应用,尤其是在需要处理复杂的数据和用户交互时。由于React的组件化架构和高效的性能优化,它能够处理复杂的用户界面和数据流。

React在企业级Web应用中的优势:
  • 复杂状态管理:对于企业级Web应用,React与诸如Redux、MobX等状态管理工具相结合,可以非常高效地处理复杂的状态和数据流。
  • 可维护性与扩展性:企业级应用通常涉及多个功能模块,React的组件化设计有助于代码的复用与维护,使得不同团队可以并行开发。
  • 与后端的紧密集成:React能够与各种后端技术栈(如Node.js、Ruby on Rails、Django等)进行紧密集成,处理RESTful API和GraphQL接口的数据交互。
典型的企业级Web应用:
  • 财务系统:如预算管理、会计核算、报表生成等复杂功能的Web应用。
  • 客户关系管理(CRM)系统:例如Salesforce、HubSpot等,用于管理客户信息、销售流程和支持服务。
  • 项目管理工具:如Trello、Asana等,帮助团队协作和项目进度跟踪的Web应用。

五、如何开始使用React

要开始使用React,我们需要为其设置开发环境,并创建一个React项目。React的官方推荐工具是Create React App,它为开发者提供了一个预配置的开发环境,可以帮助我们快速启动一个React应用。除了Create React App之外,还有其他工具和方法可以进行React开发,如Next.js和Vite等。下面我们将从Create React App入手,详细介绍如何快速上手React开发。

1. 环境准备

在开始之前,你需要确保你的开发环境满足以下要求:

  • 安装Node.js:React基于JavaScript,因此需要Node.js作为运行时环境。你可以通过访问Node.js官网下载并安装最新的LTS(长期支持)版本。

  • 安装包管理工具:Node.js安装时会自带npm(Node Package Manager),它是JavaScript生态中广泛使用的包管理工具。如果你更倾向于使用yarn,可以在官方网站下载并安装。

安装完Node.js和npm后,可以通过以下命令验证安装是否成功:

node -v
npm -v

如果命令行显示出版本号,说明环境已经成功安装。

2. 使用Create React App创建React项目

React官方推荐使用Create React App来创建新的React项目。它是一个命令行工具,能够自动配置好Webpack、Babel等构建工具,帮助你免去配置繁琐的步骤,让你将更多精力集中在业务开发上。

创建React应用
  1. 打开终端(命令行),然后执行以下命令来创建一个新的React项目:
npx create-react-app my-app

在这个命令中,my-app是你项目的名称。你可以根据需要修改为其他名字。npx是npm包执行器,它会下载并执行create-react-app,无需全局安装。执行完后,它会自动为你创建一个新项目并安装所需的依赖。

  1. 进入项目目录并启动开发服务器:
cd my-app
npm start

npm start会启动开发服务器并打开浏览器窗口,通常会自动打开http://localhost:3000,显示一个React的欢迎页面。此时,你已经成功运行了一个React应用!

目录结构

create-react-app创建的React项目包含一个标准的项目目录结构,帮助你快速了解项目的组织方式。以下是一个典型的React项目结构:

my-app/
├── node_modules/          # 存放项目依赖包
├── public/                # 存放静态文件,如index.html
├── src/                   # 存放源代码,包含React组件和其他逻辑
│   ├── App.js             # 主要组件文件
│   ├── index.js           # 项目入口文件
│   └── ...                # 其他组件、样式等文件
├── package.json           # 项目配置信息和依赖包列表
├── .gitignore             # Git忽略文件,排除不必要的文件
└── README.md              # 项目的自述文件

  • public/index.html:HTML页面模板,是React应用的HTML入口。React会将生成的内容插入到这个HTML模板中的<div id="root"></div>位置。
  • src/index.js:React应用的入口文件。这里使用ReactDOM.render()方法将React组件渲染到index.html中的DOM节点。
  • src/App.js:React的主要组件文件,它是默认生成的一个组件,可以在这里开始开发自己的UI。

3. 编写React组件

在React中,应用是由多个组件组成的,每个组件负责渲染界面的一个部分。你可以通过以下几种方式创建组件。

函数组件(Functional Component)

React鼓励使用函数组件,它是一个返回UI结构的纯函数。在函数组件中,你可以使用props传递数据,并通过useStateuseEffect等Hook来管理组件的状态和副作用。

function Welcome(props) {return <h1>Hello, {props.name}!</h1>;
}export default Welcome;

类组件(Class Component)

类组件在React中也非常常见,尤其是在较旧的代码中。类组件继承自React.Component,并且拥有更多的功能,例如内部状态管理和生命周期方法。

import React, { Component } from 'react';class Welcome extends Component {render() {return <h1>Hello, {this.props.name}!</h1>;}
}export default Welcome;

尽管类组件仍然广泛使用,但由于Hooks的出现,函数组件逐渐成为React推荐的最佳实践。

4. 使用JSX创建UI

在React中,UI通常使用JSX语法来创建。JSX允许你在JavaScript中编写类似HTML的代码,并将其与JavaScript逻辑无缝集成。虽然JSX在浏览器中无法直接执行,但在构建过程中,Babel会将JSX转换为React的createElement调用。

function App() {return (<div><h1>Hello, React!</h1><p>Welcome to the React world!</p></div>);
}export default App;

在JSX中,你可以嵌入JavaScript表达式,语法上它们被包含在大括号{}中:

function Greeting({ name }) {return <h1>Hello, {name}!</h1>;
}

5. 运行和调试React应用

在开发过程中,create-react-app会启动一个开发服务器,通常监听http://localhost:3000,并且会开启热重载(Hot Reloading)功能。也就是说,每次你保存文件时,浏览器会自动刷新并显示最新的内容。

使用React开发工具

在浏览器中,你可以使用React Developer Tools,它是一个Chrome/Firefox插件,可以帮助你更方便地调试React应用。React DevTools提供了以下功能:

  • 查看React组件树。
  • 检查每个组件的props和state。
  • 查看组件的生命周期。

通过这些工具,你可以更加高效地开发和调试React应用。

6. 打包和部署

当你完成开发并希望将应用部署到生产环境时,可以使用以下命令进行打包:

npm run build

这会生成一个build/目录,包含优化过的生产版本文件。你可以将这些文件部署到任何Web服务器或托管服务(如Netlify、Vercel或GitHub Pages)。

7. 学习资源和社区

React有一个非常活跃的社区,提供了丰富的文档、教程和开源项目,帮助开发者快速掌握和使用React。

  • React官方文档:最权威的React学习资源,包含了从入门到进阶的各种内容。React官方文档
  • React教程和博客:许多开发者和公司发布了优质的React教程,可以通过搜索引擎找到大量的实用资源。
  • React社区:可以通过Stack Overflow、GitHub、Reddit等平台加入React开发者社区,交流心得和经验。

六、总结

React作为一种现代化的前端框架,凭借其高效的性能、组件化的开发方式以及丰富的生态系统,成为了开发者构建Web应用的首选工具。无论是构建单页应用,还是进行跨平台开发,React都提供了强大的支持。如果你还没有尝试过React,不妨开始学习它,体验一下它带来的开发便利。

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

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

相关文章

西电-神经网络基础与应用-复习笔记

此为24年秋研究生课程复习笔记 导论 神经网络的研究方法分为 连接主义&#xff0c;生理学派&#xff0c;模拟神经计算。高度的并行、分布性&#xff0c;很强的鲁棒和容错性。便于实现人脑的感知功能(音频图像的识别和处理)。符号主义&#xff0c;心理学派&#xff0c;基于符号…

Gitlab-Runner配置

原理 Gitlab-Runner是一个非常强大的CI/CD工具。它可以帮助我们自动化执行各种任务&#xff0c;如构建、测试和部署等。Gitlab-Runner和Gitlab通过API通信&#xff0c;接收作业并提交到执行队列&#xff0c;Gitlab-Runner从队列中获取作业&#xff0c;并允许在不同环境下进行作…

LLM 智能视频字幕助手,支持生成、断句、优化、翻译、视频合成全流程

卡卡字幕助手&#xff08;VideoCaptioner&#xff09;是一款功能强大的视频字幕配制软件。操作简单且无需高配置&#xff0c;利用大语言模型进行字幕智能断句、校正、优化、翻译&#xff0c;一键为视频配上效果惊艳的字幕。 &#x1f3af; 可使用强大的语音识别引擎&#xff0c…

GitLab本地服务器配置ssh和克隆项目

1. 本地安装好git git链接&#xff1a;https://git-scm.com/downloads/win 无脑点击下一步安装即可,打开Git Bash命令终端如下&#xff1a; 2. 配置本地用户名和邮箱 git config --global user.name "你的名字" git config --global user.email "你的邮箱&quo…

Unity热更新 之 Addressables(2) 本地/远端打包 流程测试

基础篇&#xff1a;Unity热更新 之 Addressables(1) 资源基础加载-CSDN博客 基础方法来源于唐老狮,我也是初学热更这一块&#xff0c;所有不保证步骤完全正确&#xff0c;如有不足还请斧正 目录 0.前提 1.本地打包 1.1.资源放入包 1.2.简化路径名称给出标签(如有需要的话) …

HDFS架构原理

一、HDFS架构整体概述 HDFS是Hadoop Distribute File System 的简称&#xff0c;意为&#xff1a;Hadoop分布式文件系统。HDFS是Hadoop核心组件之一&#xff0c;作为大数据生态圈最底层的分布式存储服务而存在。HDFS解决的问题就是大数据如何存储,它是横跨在多台计算机上的文件…

Qiskit快速编程探索(进阶篇)

五、量子电路模拟:探索量子世界的虚拟实验室 5.1 Aer模拟器:强大的模拟引擎 在量子计算的探索旅程中,Aer模拟器作为Qiskit的核心组件之一,宛如一座功能强大的虚拟实验室,为开发者提供了在经典计算机上模拟量子电路运行的卓越能力。它打破了硬件条件的限制,使得研究者无…

rust学习——环境搭建

rust安装&#xff1a;https://kaisery.github.io/trpl-zh-cn/ch01-01-installation.html 1、vscode装插件&#xff1a; toml语法支持 依赖管理 rust语法支持 2、创建demo 3、查看目录 4、执行文件的几种方式&#xff1a; rust安装&#xff1a;https://www.rust-lang.org/z…

继承(7)

大家好&#xff0c;今天我们继续来学习一下继承的知识&#xff0c;这方面需要大家勤动脑才能理解&#xff0c;那么我们来看。 1.9 protected关键字 在类和对象章节中&#xff0c;为了实现封装特性,java中引入访向限定符,主要限定:类或者类中成员能否在类外和其他包中被访问. …

玩转大语言模型——langchain调用ollama视觉多模态语言模型

系列文章目录 玩转大语言模型——ollama导入huggingface下载的模型 langchain调用ollama视觉多模态语言模型 系列文章目录前言使用Ollama下载模型查找模型下载模型 测试模型ollama测试langchain测试加载图片加载模型 模型回复 前言 视觉多模态语言模型由预训练的多模态编码器…

J-LangChain - 复杂智能链流式执行

系列文章索引 J-LangChain 入门 介绍 j-langchain是一个Java版的LangChain开发框架&#xff0c;具有灵活编排和流式执行能力&#xff0c;旨在简化和加速各类大模型应用在Java平台的落地开发。它提供了一组实用的工具和类&#xff0c;使得开发人员能够更轻松地构建类似于LangC…

【翻译】2025年华数杯国际赛数学建模题目+翻译pdf自取

保存至本地网盘 链接&#xff1a;https://pan.quark.cn/s/f82a1fa7ed87 提取码&#xff1a;6UUw 2025年“华数杯”国际大学生数学建模竞赛比赛时间于2025年1月11日&#xff08;周六&#xff09;06:00开始&#xff0c;至1月15日&#xff08;周三&#xff09;09:00结束&#xff…

C# GID+绘制不透明和半透明的线条

绘制线条时&#xff0c;必须将 Pen 对象传递给 DrawLine 类的 Graphics 方法。 Pen 构造函数的参数之一是 Color 对象。 若要绘制不透明的线条&#xff0c;请将颜色的 alpha 分量设置为 255。 若要绘制半透明的线条&#xff0c;请将 alpha 分量设置为从 1 到 254 的任何值。 在…

通过可穿戴外骨骼,以更灵活的方式操作你的机器人。

今天&#xff0c;我们将介绍一款专为控制 Mercury X1 和 Mercury B1 机械臂而设计的创新外骨骼。这种外骨骼以人类手臂的结构为蓝本&#xff0c;可实现直观和精确的控制。 开发这种外骨骼的动机源于人们对深度学习和机器学习等领域日益增长的兴趣。这些技术使机器人能够自主学习…

浅尝Appium自动化框架

浅尝Appium自动化框架 Appium自动化框架介绍Appium原理Appium使用安装平台驱动实战 坑 Appium自动化框架介绍 Appium 是一个开源的自动化测试框架&#xff0c;最初设计用于移动应用的测试&#xff0c;但现在它也扩展了对桌面端应用的支持。Appium 使得自动化测试变得更加简单&…

maven多模块项目编译一直报Failure to find com.xxx.xxx:xxx-xxx-xxx:pom:1.0-SNAPSHOT in问题

工作中项目上因为多版本迭代&#xff0c;需要对不同迭代版本升级版本号&#xff0c;且因为项目工程本身是多模块结构&#xff0c;且依然多个其他模块工程。 在将工程中子模块的pom.xml中版本号使用变量引用父模块中定义的版本号时&#xff0c;一直报Failure to find com.xxx.x…

来自通义万相的创意加速器:AI 绘画创作

来自通义万相的创意加速器&#xff1a;AI 绘画创作 通义万相动手搭建“通义万相”部署方案资源准备对象存储OSS&#xff08;手动部署&#xff09;DashScope 模型服务灵积云服务器ECS&#xff08;手动部署&#xff09;一键部署ROS Web文生图艺术与设计创作广告与营销物料生成教育…

【Uniapp-Vue3】组合式API中的组件的生命周期函数(钩子函数)

在Uniapp中生命周期函数用得较多的是onMounted和onUnmounted。 一、onMounted函数 如果我们想要获得DOM元素&#xff0c;就需要给DOM标签上添加ref属性&#xff0c;并定义一个相同属性名的变量。 但是我们输出这个DOM元素为NULL 如果我们使用onMounted就能获得到DOM元素&…

uniapp使用chooseLocation安卓篇

本文章全部以高德地图为例 代码 <view class"bottom"><button click"choose">定位</button> </view> choose() {uni.chooseLocation({success: function(res) {console.log(位置名称&#xff1a; res.name);console.log(详细地…

了解模2除法:原理与应用

模2除法&#xff0c;也被称为二进制除法或XOR除法&#xff0c;是一种在二进制数制下进行的特殊除法运算。与常规的十进制或其他进制的除法不同&#xff0c;模2除法使用异或&#xff08;XOR&#xff09;运算代替减法&#xff0c;并且不涉及进位或借位。这种除法运算在数字通信、…