【热门主题】000027 React:前端框架的强大力量

前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕

共同探索软件研发!敬请关注【宝码香车】
关注描述

csdngif标识

目录

  • 【热门主题】000027 React:前端框架的强大力量
  • 📚 一、React 简介与优势
  • 📚二、React 的缺点及应对
    • 📘(一)缺乏对旧浏览器的支持
    • 📘(二)JSX 带来的困惑
  • 📚三、React 教程指南
    • 📘(一)安装与基本概念
    • 📘(二)创建简单计数器应用
    • 📘(三)组件的 CSS 样式管理
  • 📚四、React 应用案例
    • 📘(一)标准框架简洁网页前端应用
    • 📘(二)待办事项列表应用
  • 📚五、React 常见问题及解决方案
    • 📘(一)组件状态更新不一致
    • 📘(二)性能问题
    • 📘(三)错误边界
    • 📘(四)组件重新渲染过于频繁
    • 📘(五)状态管理
    • 📘(六)异步数据加载
    • 📘(七)跨域问题
    • 📘(八)路由和导航
    • 📘(九)表单处理
    • 📘(十)性能优化
    • 📘(十一)服务端渲染(SSR)
    • 📘(十二)跟踪和调试
    • 📘(十三)第三方库和组件集成


📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

【热门主题】000027 React:前端框架的强大力量

📚 一、React 简介与优势

React 是由 Facebook 开发的用于构建用户界面的 JavaScript 库。它具有诸多优势,使其在前端开发领域备受青睐。
首先,React 的性能卓越。该库最初为 Facebook 打造,工程师们以各种方式优化,确保即使在网络繁忙时也能有出色的性能表现。例如,React 使用虚拟 DOM 技术,通过比较虚拟 DOM 和实际 DOM 的差异来高效更新界面,减少了对实际 DOM 的直接操作,从而提高渲染性能。
其次,组件化开发是 React 的核心优势之一。它将复杂的用户界面拆分成多个小的、独立的、可复用的组件。每个组件都有独立的输入(props)和输出(状态或事件),这大大提高了代码的可维护性和重用性。通过组件化开发,我们可以创建可复用的组件库,减少重复编写代码的工作量,提高开发效率。
在处理依赖关系方面,React 允许定义组件之间的依赖关系,并借助 Facebook 开发的组件依赖管理解决方案 Flux 来处理这些依赖关系。当项目规模和复杂性扩展时,Flux 能在处理跨组件问题上提供很大帮助。
React 还拥有庞大的插件生态系统。这意味着开发者可以找到各种库来满足不同需求,如表单验证、路由等都有简单的 npm 包可供使用。丰富的插件生态系统使得将其他工具集成到应用程序中变得容易,轻松获得所需功能。
最后,React 的安装简便。使用像 create-react-app 这样的工具,建立新的项目只需要几分钟,而且它不仅可以在 npm 或 Yarn 下工作,大大降低了开发环境的设置难度,让开发者能够快速启动新项目。

📚二、React 的缺点及应对

📘(一)缺乏对旧浏览器的支持

React 不支持 IE11 等较老的浏览器,这对于一些企业来说可能是一个较大的问题。在当前互联网环境下,虽然新的浏览器不断推出,但仍有部分用户在使用旧版本浏览器。据统计,全球仍有一定比例的用户在使用老旧浏览器,尤其是在一些特定行业和地区。
为了解决这个问题,可以采取以下策略:
使用插件和 polyfill。例如,可以下载 react-app-polyfill 和 core-js 插件,在项目的入口文件中引入这些插件,并在配置文件中设置兼容性。具体做法是在./src/index.js 的最上方引入插件import ‘core-js/es’; import ‘react-app-polyfill/ie9’; import ‘react-app-polyfill/stable’,同时在 .webpackrc 中配置 browserslist,设置兼容的版本,如"browserslist": [“last 2 versions”, “ie > 9”]。
在打包工具中进行配置。以 Vite 为例,可以通过安装@vitejs/plugin-legacy插件来自动生成传统浏览器的 chunk 及与其相对应 ES 语言特性方面的 polyfill。在vite.config.ts里的build.target配置项指定构建目标为es2015,并配置插件参数,如targets: [‘ie >= 11’, ‘chrome <= 60’],同时设置需要兼容的 polyfills。

📘(二)JSX 带来的困惑

React 使用了一个名为 JSX 的 JavaScript 扩展,这可能会让一些开发人员感到困惑。JSX 虽然不是使用 React 的必要条件,但它可以使开发更快、更容易。
对于 JSX 带来的困惑,可以采取以下措施:
加强学习和熟悉。开发人员可以通过阅读官方文档、教程和示例代码,深入了解 JSX 的语法和用法。了解 JSX 的本质是一个 JS 对象,会被 babel 编译,最终转换为React.createElement。
解决在开发工具中的语法支持问题。例如在 VSCode 中,如果安装插件ES7 React/Redux/GraphQL/React-Native snippets后还是不能完全支持 jsx 语法,可以在设置中搜索includeLanguages,添加javascript:javascriptreact项,以确保对 JSX 语法的支持。

📚三、React 教程指南

📘(一)安装与基本概念

React 的安装方法有多种,其中一种常用的方式是使用 create-react-app 工具。以下是具体步骤:
打开命令行窗口,输入 npm -version,查看当前的 npm 版本。如果 npm 版本是 5.2 以上版本,在 cmd 中输入 npx create-react-app my-app,当前目录下将创建一个名为 my-app 的工程。命令行窗口中将会显示依赖库的一些日志。如果 npm 版本低于 5.2,则全局安装 create-react-app,在 cmd 中输入

npm install -g create-react-app。create-react-app

下载完成后,在 cmd 中输入

create-react-app my-app

回车就可以下载完成!如果下载失败,可以查看 npm 的版本号。如果高于 6.14.8,则降低版本号,输入 npm install npm@6.14.8 -g。如果还是失败,说明可能不是管理员权限运行,在管理员权限下运行降低版本的操作。在 window 图标上右击点击以管理员运行。
React 的核心概念包括组件、JSX、Virtual DOM 和 Data Flow。
组件:React 将用户界面拆分为独立的、可复用的组件。每个组件都有自己的输入(props)和输出(状态或事件),可以提高代码的可维护性和重用性。
JSX:是一种 JavaScript 的扩展语法,允许在 JavaScript 代码中嵌入 HTML 样式,提高代码可读性。例如:

function Example() { return (<div><h1>Hello, World!</h1></div>); }

Virtual DOM:React 使用虚拟 DOM 技术,通过比较虚拟 DOM 和实际 DOM 的差异来高效更新界面,减少了对实际 DOM 的直接操作,从而提高渲染性能。
Data Flow:React 的数据流向是单向的,即从父组件向子组件传递数据。子组件不能直接修改父组件的数据,只能通过父组件传递的方法来更新数据。

📘(二)创建简单计数器应用

创建计数器应用的步骤如下:
组件创建:可以使用函数组件或类组件来创建计数器组件。以下是一个使用类组件的示例:

import React from 'react';

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>
        );
    }
}

export default Counter;

引入主应用:在主应用文件中,引入计数器组件并渲染到页面上。例如:

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';

ReactDOM.render(<Counter />, document.getElementById('root'));

传递数据:可以通过 props 从父组件向子组件传递数据。例如,如果有一个父组件想要传递一个初始计数值给计数器组件,可以这样做:

import React from 'react';
import Counter from './Counter';

class Parent extends React.Component {
    render() {
        return (
            <div>
                <Counter initialCount={5} />
            </div>
        );
    }
}

export default Parent;

在计数器组件中接收这个初始计数值:

import React from 'react';

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: props.initialCount || 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>
        );
    }
}

export default Counter;

处理事件:在计数器组件中,通过按钮的点击事件来触发计数值的增加。例如,在上面的代码中,通过 onClick={this.increment} 绑定了按钮的点击事件到 increment 方法。
使用生命周期方法:React 组件有一些生命周期方法,可以在不同阶段执行特定的操作。例如,在计数器组件中,可以使用 componentDidMount 方法在组件挂载后执行一些初始化操作,使用 componentDidUpdate 方法在组件更新后执行一些操作,使用 componentWillUnmount 方法在组件卸载前执行一些清理操作。

📘(三)组件的 CSS 样式管理

React 中有多种 CSS 样式管理方式,下面介绍 CSS Modules 和使用 styled-components 库。
CSS Modules:允许将 CSS 类名局部化,避免全局命名冲突。它与普通 CSS 语法相同,易于学习和使用。在 React 中,可以使用第三方库如 classnames 来动态生成 CSS 类名。例如:

import styles from './MyComponent.module.css';
import classNames from 'classnames';

function MyComponent() {
    const layoutType = 'grid';
    const layoutClass = classNames({
        [styles.gridLayout]: layoutType === 'grid',
        [styles.flexLayout]: layoutType === 'flex',
    });
    return (<div className={layoutClass}>{/* 内容 */}</div>);
}

export default MyComponent;

使用 styled-components 库:Styled-components 是一个基于 React 的 CSS-in-JS 库,它允许将 CSS 直接嵌入到 JavaScript 中,以函数式的方式定义组件样式。例如:

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
    background: #007bff;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    border: none;
`;

function App() {
    return (<div><Button type="submit">点击我</Button></div>);
}

export default App;

Styled-components 还提供了很多高级特性,如混入、层叠样式、组件间样式分享、动态样式与响应式设计等。例如,可以使用混入来定义一组可复用的样式,然后在多个组件中使用:

const bold = { fontWeight: 'bold' };
const center = { textAlign: 'center' };

const Button = styled.button`
    padding: 8px;
    background: ${props => props.backgroundColor || 'red'};
    color: white;
    ${props => props.bold? bold : ''};
    ${props => props.center? center : ''};
`;

还可以通过将样式逻辑抽象到函数中,实现组件间样式分享:

const buttonStyle = (backgroundColor, isBold) => `
    padding: 8px;
    background: ${backgroundColor};
    color: white;
    ${isBold? 'font-weight: bold;' : ''};
`;

const Button = styled.button`
    ${props => buttonStyle(props.backgroundColor, props.bold)};
`;

📚四、React 应用案例

📘(一)标准框架简洁网页前端应用

标准框架简洁网页前端项目提供了一个轻量级的运行环境,用于实现简单网站的前端功能。它涵盖了首页管理、用户管理、公告管理、论坛管理和指引管理等基础功能。
功能菜单布局:
主页展示:管理员登录系统,默认管理员账户为 admin,密码为 1。不支持直接在界面上添加或修改管理员,需通过数据库手动操作(密码设置需遵循共同组件的加密逻辑)。
网站介绍页面:包含站点介绍、历史、组织结构、联系我们等子菜单。配置说明展示的是示例菜单,包含链接和 JSP 文件。可对每个示例页面进行定制,加入自己的内容。
其他功能页面:如信息广场、客户支持、通知公告等页面均提供了基础架构,可根据需要增加功能并定制化。
系统管理页面:子菜单有日程管理、公告板创建管理、公告板使用管理、公告管理、站点画廊管理。管理员可以登录后注册日程信息或发布公告(公告板可设置)。
环境配置:
开发环境:项目使用 Node.js v18.12.0 和 NPM v8.19.2。
前端启动步骤:
创建项目:通过 Git 克隆项目,并安装所需的依赖模块。
设置后端 URL:将运行的后端服务器 URL 设置到 .env.development 文件中的 REACT_APP_EGOV_CONTEXT_URL 字段中。
运行项目:在开发模式下运行项目使用 npm start。

📘(二)待办事项列表应用

待办事项列表应用是 React 常见的应用案例之一,以下介绍几种不同实现方式的待办事项列表应用。
基础待办事项列表应用:
准备工作:安装 Node.js,创建项目目录,初始化项目并安装 React 和 React DOM。
创建项目结构:包括 index.html 文件用于创建带有 id 为 root 的

元素,用于渲染 React 应用,并引入 index.js 脚本文件作为入口文件。在 src 文件夹下创建 App.js 作为主应用组件文件。
创建 React 组件:App 组件返回一个包含标题的
元素,并在 src/index.js 文件中引入 React 和 React DOM,渲染 App 组件到 root 元素。
添加待办事项功能:在 App 组件中,使用 useState 钩子管理状态,todos 数组存储待办事项列表,inputValue 存储输入框的值。当用户在输入框中输入内容并点击 “添加” 按钮时,新的待办事项将被添加到列表中。
运行项目:使用 npm start 启动开发服务器,在浏览器中访问 http://localhost:3000 查看应用。
使用 React、Redux 和 React Router 的待办事项列表应用:
初始化项目:使用 Create React App 创建项目,安装 Redux 和 React Router 相关库。
设置 Redux:使用 Redux Toolkit 设置 Redux store,在 src/redux 文件夹下创建 store.js 和 todoSlice.js 文件。
设置 React Router:在 src 目录下创建 App.js 文件,使用 BrowserRouter 包裹路由,并根据 React Router v6 的要求进行路由配置。
创建组件:创建 TodoList 和 TodoForm 组件,使用 useDispatch 和 useSelector 钩子与 Redux store 交互。
运行应用:使用 npm start 运行应用,在浏览器中访问 http://localhost:3000/ 查看待办事项列表,访问 http://localhost:3000/add 添加新的待办事项。
React 待办事项列表案例:
功能实现:在文本框中输入内容回车后,内容出现在未完成中;点击未完成中的选择框,其内容出现在已完成中,反之亦然;点击删除按钮会删除。新建一个 todoList.js 文件,定义 todoList 组件,通过 constructor 初始化状态,定义 keyEnter、changeBox、deleteData 等方法处理回车事件、监听事件和删除事件。在 render 方法中返回页面结构,使用 map 方法遍历状态中的列表数据,渲染未完成和已完成的待办事项。
CSS 样式:定义了 .block、.title、.titleleft、.titleright 等 CSS 类,用于设置页面的布局和样式。
写入缓存:封装自定义模块,新建一个 Storage 文件夹,在该文件夹下新建一个名为 Storage.js 的文件,定义 storage 对象,包含 setStorage、getStorage、removeStorage 方法用于操作本地存储。在 todoList.js 中引入 storage 模块,在回车事件、监听事件和删除事件中写入缓存,并在 React 生命周期函数 componentDidMount 中加载缓存。

📚五、React 常见问题及解决方案

📘(一)组件状态更新不一致

问题:在 React 组件中,不正确地处理状态更新可能会导致应用的 UI 不一致。
解决方案:确保使用 setState方法更新状态,并且理解它是异步的。如果新的状态依赖于旧的状态,应该使用 setState的函数形式。例如:
this.setState((prevState, props)=>({
counter: prevState.counter + props.increment
}));

📘(二)性能问题

问题:大型应用中,如果没有正确地优化,可能会遇到性能瓶颈。
解决方案:使用 shouldComponentUpdate、React.memo、useMemo和useCallback钩子来避免不必要的渲染。同时,利用懒加载(如React.lazy和Suspense)来减少初始加载时间。

📘(三)错误边界

问题:组件树中的某个组件抛出错误会导致整个应用崩溃。
解决方案:使用错误边界(Error Boundaries)组件来捕获子组件树中的 JavaScript 错误,并记录这些错误,展示备用 UI 而不是崩溃整个应用。
以下是一个错误边界组件的示例:

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染能够显示降级后的 UI
        return { hasError: true };
    }
    componentDidCatch(error, errorInfo) {
        // 你同样可以将错误日志上报给服务器
        console.log(error, errorInfo);
    }
    render() {
        if (this.state.hasError) {
            // 你可以自定义降级后的 UI 并渲染
            return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
    }
}

使用错误边界组件时,可以像这样包裹可能会抛出错误的子组件:

<ErrorBoundary>
    <YourComponent />
</ErrorBoundary>

📘(四)组件重新渲染过于频繁

问题:组件可能在不必要的情况下重新渲染,导致性能问题。
解决方案:使用memo、PureComponent或React.memo来防止不必要的重新渲染。确保正确使用shouldComponentUpdate或React Hooks的useMemo和useCallback。

📘(五)状态管理

问题:有效地管理组件状态,特别是在大型应用中,可能会变得复杂。
解决方案:使用状态管理工具,如Redux、MobX或React的useContext和useReducer来管理状态。

📘(六)异步数据加载

问题:在组件渲染之前,需要从服务器获取数据,可能会导致闪烁或空数据的显示。
解决方案:使用componentDidMount、useEffect或React的Suspense来处理数据加载,以确保数据准备好后再渲染组件。

📘(七)跨域问题

问题:在开发中,前端和后端可能运行在不同的域上,导致跨域问题。
解决方案:配置服务器允许跨域请求(CORS),或使用代理服务器来处理跨域请求。

📘(八)路由和导航

问题:处理应用的导航和路由可能变得复杂,特别是在单页面应用(SPA)中。
解决方案:使用React Router或其他路由库来管理导航和路由。

📘(九)表单处理

问题:处理表单输入、验证和提交可能会变得繁琐。
解决方案:使用React表单控件,结合状态管理和表单验证库,如Formik或Yup。

📘(十)性能优化

问题:在大型应用中,性能可能成为问题,导致加载时间过长或卡顿。
解决方案:使用性能分析工具(如React DevTools和Profiler)来识别性能问题,并采取相应的优化措施,如懒加载组件、使用Memoization等。

📘(十一)服务端渲染(SSR)

问题:如果需要更好的 SEO 和首屏加载性能,实施服务端渲染可能变得复杂。
解决方案:学习使用Next.js或其他React SSR框架来实现服务端渲染。

📘(十二)跟踪和调试

问题:在复杂的React应用中,跟踪和调试问题可能会变得复杂。
解决方案:学习使用React DevTools、浏览器的开发者工具和适当的日志记录来进行调试。

📘(十三)第三方库和组件集成

问题:将第三方库或组件集成到React应用中可能需要处理不同的生命周期和状态管理。
解决方案:查看文档并按照指南进行集成,可能需要编写适配器或包装器来适应React的方式。

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕,若转载本文,一定注明本文链接。


整理不易,点赞关注宝码香车

更多专栏订阅推荐:
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

win11安装最新rabbitmq

1、安装Erlang 注意&#xff1a;RabbitMQ需要Erlang支持&#xff0c;所以要先安装Erlang&#xff0c;安装RabbitMQ版本需要与之对应的Erlang版本才行查看对应的RabbitMQ对应的Erlang 版本下载Erlang 2、安装RabbitMQ 下载 RabbitMQ Erlang和RabbitMQ安装过程一直点下一步…

distrobox install in ubuntu 22.04 / 在 ubuntu 22.04 上安装 distrobox (***) OK

要点&#xff1a; 本测试实验&#xff0c;采用的是 podman distrobox 在沙盒 snap 中&#xff0c;安装 distrobox 需要使用 --devmode 开发模式&#xff1b;可以避开 distrobox 的版本检查&#xff1f; distrobox 官方文档显示&#xff0c; Installation https://distrobox.i…

leetcode203. Remove Linked List Elements

给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 Given the head of a linked list and an integer val, remove all the nodes of the linked list that has Node.val val, and return …

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-31

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-31 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-31目录1. Large Language Models for Manufacturing摘要创新点算法模型实验效果&#xff08;包含重要数据与结论&#xff09;推荐…

【AI工作流】FastGPT - 深入解析FastGPT工作流编排:从基础到高级应用的全面指南

文章目录 一、工作流编排概述二、FastGPT的节点类型1. 基础功能插件(1) 文本输出(2) 功能调用(3) 工具(4) 外部调用(5) 其他 2. 系统插件3. 团队插件 三、工作流中的流向结语 在当今快速发展的人工智能领域&#xff0c;工作流编排的能力已成为提升用户体验和应用效率的关键因素…

NVR批量管理软件/平台EasyNVR多个NVR同时管理支持对接阿里云、腾讯云、天翼云、亚马逊S3云存储

随着云计算技术的日益成熟&#xff0c;越来越多的企业开始将其业务迁移到云端&#xff0c;以享受更为灵活、高效且经济的服务模式。在视频监控领域&#xff0c;云存储因其强大的数据处理能力和弹性扩展性&#xff0c;成为视频数据存储的理想选择。NVR批量管理软件/平台EasyNVR&…

光通信——WDM/DWDM/CWDM

一、WDM 波分复用原理&#xff1a;将光纤的低损耗窗口可使用的光谱带宽分割为若干子带宽&#xff0c;然后将待传递的电信号调制到各个子带宽的中心波长光载波上同时传输&#xff0c;是一种能在一根光纤中同时实现多波长信道传输的扩容技术。 WDM复用系统可以分为单向和双向两种…

优化EDM邮件营销,送达率与用户体验双赢

EDM邮件营销需选对平台&#xff0c;优化邮件列表&#xff0c;确保内容优质&#xff0c;进行邮件测试&#xff0c;关注用户反馈调整频率&#xff0c;以保高送达率&#xff0c;提升营销效果。 1. 了解电子邮件送达率的重要性 在开始优化邮件送达率之前&#xff0c;首先需要理解电…

TypeScript起航篇·何为TypeScript?

你好&#xff0c;我是安然无虞。 文章目录 什么是 TypeScriptTypeScript 的特性类型系统TypeScript 是静态类型TypeScript 是弱类型总结: 什么是 TypeScript Hello TypeScript 什么是 TypeScript Typed JavaScript At Any Scale. 添加了类型系统的JavaScript&#xff0c;适用…

鸿蒙系统的优势 不足以及兼容性与未来发展前景分析

2024 年 10 月 22 日&#xff1a;华为正式发布原生鸿蒙操作系统 HarmonyOS next&#xff0c;并正式命名为 HarmonyOS 5&#xff0c;这是鸿蒙系统史上最大的升级&#xff0c;实现了国产操作系统从底层架构到应用生态的全面自主可控。 鸿蒙系统与安卓、iOS 相比&#xff0c;具有…

基于凌鸥LKS32MC037鱼缸用FOC潜水泵控制器

随着老百姓生活水平的提高&#xff0c;室内养殖观赏型鱼类的人越来越多&#xff0c;这就催生了鱼缸内小型潜水泵的市场发展。 早期鱼缸潜水泵都采用的方波驱动的控制器。随着技术的进步和芯片成本的下降&#xff0c;本文介绍的基于无感FOC算法潜水泵控制器已经成熟应用并且大批…

WMV怎么转MP4?五个简单好用的视频格式转换方法!

WMV格式&#xff0c;全称为Windows Media Video&#xff0c;是由微软公司开发的一种视频文件格式。采用先进的视频压缩技术&#xff0c;能够在保持较高视觉质量的同时&#xff0c;显著减小文件体积&#xff0c;经常被用于在网络环境下即时观看或收听高质量的音视频内容。同时&a…

unity搭建场景学习

unity搭建场景学习 创建场景创建gameobject创建材质&#xff0c;用于给gameobject上色拖拽材质球上色上色原理设置多个材质方式设置贴图的方式 效果设置光滑度一些预览设置菜单渲染模型与碰撞模型网格渲染参数1. materials(材质)2. lighting(光照)3. reflection probes(反射探针…

C++ Qt

一、概念 跨平台的图形应用界面应用程序框架。 二、常用快捷键 快捷键解释F4在对应的.cpp和.h之间快速切换ctrl b编译程序ctrl r运行程序ctrl shift ↑ / ↓向上 / 下移动选中的代码ctrl i自动对齐选中的代码 三、对象树 总结&#xff1a;父控件被析构&#xff0c;包含…

爬虫笔记22——当当网图书详情页静、动态数据爬取

当当网动态数据爬取 静态数据爬取动态数据爬取接口参数的获取 静态数据爬取 进入图书详情&#xff0c;这里的图书数据信息比如标题、价格、图片都是非结构化数据&#xff0c;可以使用xpath语法提取。是很简单的数据采集了&#xff0c;就不细说了。 动态数据爬取 滑到下面这里的…

zip文件加密成图片文件-到解密

加密 1&#xff0c;准备&#xff1a;图片 zip文件 2&#xff0c;新建一个.txt 根据自己的对应文件修改&#xff1a; copy 图片名.后缀/b压缩包名.后缀自定义图片名.后缀注意&#xff0c;图片后缀最后保持一至&#xff0c;测试了 jpg png 压缩包 zip 3&#xff0c;把上…

【深度学习】Bert下载和使用(以bert-base-uncased为例)

【深度学习】Bert下载和使用&#xff08;以bert-base-uncased为例&#xff09; 代码报错报错原因解决方法解决步骤1.进入Hugging Face&#xff0c;检索bert-base-uncased2.点击Files and versions3.下载文件4.下载的文件放入文件夹5.代码修改 代码报错 bert BertModel.from_p…

Java基于SpringBoot 的校园外卖点餐平台微信小程序(附源码,文档)

大家好&#xff0c;我是Java徐师兄&#xff0c;今天为大家带来的是Java基于SpringBoot 的校园外卖点餐平台微信小程序。该系统采用 Java 语言 开发&#xff0c;MySql 作为数据库&#xff0c;系统功能完善 &#xff0c;实用性强 &#xff0c;可供大学生实战项目参考使用。 博主介…

ES索引:索引管理

索引管理 再讲索引&#xff08;Index&#xff09;前&#xff0c;我们先对照下 ElasticSearch Vs 关系型数据库&#xff1a; PUT /customer/_doc/1 {"name": "DLBOY" }系统默认是自动创建索引的 如果我们需要对这个建立索引的过程做更多的控制&#xff1a…

Python小游戏20——超级玛丽

首先&#xff0c;你需要确保你的Python环境中安装了pygame库。如果还没有安装&#xff0c;可以使用以下命令进行安装&#xff1a; bash pip install pygame 运行效果展示 代码展示 python import pygame import sys # 初始化pygame pygame.init() # 设置屏幕尺寸 screen_width …