React Native性能优化红宝书

一、React Native介绍

React Native 是Facebook在React.js Conf2015 推出的开源框架,使用React和应用平台的原生功能来构建 Android 和 iOS 应用。通过 React Native,可以使用 JavaScript 来访问移动平台的 API,使用 React 组件来描述 UI 的外观和行为。

JS实现调用的能力中间的适配层提供了一些桥接方案

1、RN优势

1.1 HTML/CSS/JS开发成本低,用统一的代码规范开发移动端程序,不用关注移动端差异

1.2 天然跨平台,开发一次,可以生成Android和ios两个系统上的APP,这减少了开发人员需要编写不同版本的应用程序的时间和工作量。

1.3 无审核热更新

1.4 可扩展

1.5 易学易用:React Native 基于 React,开发人员可以使用熟悉的 JavaScript 和 React 组件模型来构建应用程序,因此很容易学习和上手。

RN的本质是把中间的这个桥Bridge给搭好,让JS和native可以互相调用。

RN为我们提供了JS的运行环境,所以前端开发者们只需要关心如何编写JS代码,

画UI只需要画到virtual DOM 中,不需要特别关心具体的平台。

至于如何把JS代码转成native代码的脏活累活,RN底层全干了

2、RN劣势

2.1 不成熟,项目版本更新维护较频繁,学习成本高,试错成本高,有些问题较少解决方案,开发进度慢

2.2 性能:整体性能仍不如原生

2.3 兼容性:涉及底层的功能,需要针对Android和ios双端单独开发

2.4 有限的第三方库:尽管 React Native 社区不断增长,但相对于其他混合应用框架,第三方库和插件的数量还是有限的。这可能使开发人员在某些方面受到限制。

2.5 有些原生功能需要自己实现:虽然 React Native 提供了大量原生组件,但某些原生功能需要开发人员自己实现,这可能需要额外的时间和工作量。

3、跨平台框架比较

开发模式 

原生开发 

混合开发 

Web开发 

运行环境

Android、iOS、Windows

混合App、

React Native,Weex、Flutter

浏览器、WebView

编程语言

Java,Objective-C

JavaScript、Dart

HTML、CSS、JavaScript

可移植性

一般

开发速度

一般

性能

一般

学习成本

一般

4、Hybrid App 优势

4.1  跨平台开发

4.2  离线访问

4.3  原生应用程序的用户体验

4.4  快速开发和迭代

混合应用程序结合了Web应用程序和本地应用程序的优点,既能够在原生应用程序环境中运行,也能够在 Web 浏览器中运行,并且具有更好的用户体验和功能。这种开发方式可以大大减少开发时间和成本,提高开发效率。

5、React Native 0.68之前的架构

5.1、整体UI渲染太过于依赖JsBridge,容易出现阻塞影响整体UI体验

5.2、性能和问题反馈最大的组件:

        ScrollView:一次渲染不做任何回收,启动性能慢,占用内存大

        FlatList:做了组件回收,快速滑动中容易出现白屏和卡顿

        Shadow层最终呈现到原生的UI是异步的,滑动太快会有大量的UI

5.3、事件阻塞在JsBridge,导致了长时间白屏的出现

6、RN中的视图渲染

javascript:JS代码的执行线程,将源码通过Metro打包后传给JS引擎进行解析:

        结构 样式 属性

  1. Main线程(UI线程或原生线程):主要负责原生渲染(Native UI)和调用原生模块(Native Modules 
  2.  Shadow 线程Layout线程:创建Shadow Tree来模拟Reac结构树(类似虚拟DOM),再由Yoga引擎将Flexbox等样式,解析成平台的布局方式:

                宽高  位置

7、RN架构设计--新旧架构对比

7.1、JavaScript层: 

支持React 16+新特性

增强JS静态类型检查(CodeGen)

引入JSI允许替换不同的JavaScript引擎

 7.2、Bridge层:

划分了Fabric和TurboModules,分别负责管理UI和Native模块

 7.3、Native层:

精简核心模块,将非核心部分拆除去,作为社区模块,独立维护

8、从 0.68 版本开始React Native 的新架构

8.1、JSI (JavaScript Interface) 

        一个用 C++ 写成的轻量级框架

        实现JS引擎的互换

        通过JS直接调用Native

        减少不必要的线程通信,省去序列化和反序列化的成本,

        减轻了通信压力,提高了通信性能

8.2、CodeGen

        FaceBook推出的代码生成工具

        加入了类型约束后,减少了数据类型错误

        自动将 Flow 或 TS 有静态类型检查的 JS 代码转换为 Fabric 和 TurboModules 使用的原生代码

8.3、优化Bridge层

        Fabric是整个框架中的新UI层,简化了之前的渲染

        Turbo Modules通过JSI可以让JS直接调用Native模块,实现同步操作,实现Native模块按需加载,减少启动时间,提高性能

8.4、精简核心代码(LEAN Core)

        将React Native核心包进行瘦身,非必要包移到社区单独维护

9、React介绍

Facebook,Learn Once,write anywhere

数据驱动,状态决定界面的变化,虚拟dom(抽象层)

虚拟dom的好处,首先是性能的优化,不直接操作Dom先进行一些比较,计算找出需要变化的部分,在实际的dom中进行操作

        其次,这个抽象层,还提供了逻辑代码跨平台移植的可能性

虚拟dom的下方对接的,是网页,是移动端,是电视端,任何一个可以渲染的端,都可以做接口的适配,使得代码在任何地方使用

主要四个部分:

组件:类组件、函数式组件

属性Props

状态State

jsx:React 和 React Native 都使用JSX 语法,这种语法使得你可以在 JavaScript 中直接输出本质上也就是 JavaScript,所以你可以在其中直接使用变量元素,JSX 

hook api: todo补充

生命周期: todo补充

二、性能优化点

1、RN加载的主要时间消耗

todo:补充

2、RN性能优化-拆包、分包

React Native 页面的 JavaScript 代码包是热更新平台根据版本号进行下发的,每次有业务改动,我们都需要通过网络请求更新代码包。

因此,我们在对JavaScript 代码进行打包的时候,需要将包拆分成两个部分:

2.1、Common 部分,也就是 React Native 源码部分;

2.2、业务代码部分,也就是我们需要动态下载的部分

具体操作:

  • JavaScript 代码包中 React Native 源码相关的部分是不会发生变化的,所以我们不需要在每次业务包更新的时候都进行下发,在工程中内置一份就好了。
  • Common 包内置到工程中
  • 业务代码包进行动态下载
  • 利用 JSContext 环境,在进入载体页后在环境中先加载 Common 包,再加载业务代码包就可以完整的渲染出 React Native 页面

todo:代码示例?

3、首屏渲染

通过拆包的方案,已经减少了动态下载的业务代码包的大小。但是还会存在部分业务非常庞大,拆包后业务代码包的大小依然很大的情况,依然会导致下载速度较慢,并且还会受网络情况的影响。

因此,我们可以再次针对业务代码包进行拆分

将一个业务代码包拆分为一个主包和多个子包的方式

在进入页面后优先请求主包的 JavaScript 代码资源,能够快速地渲染首屏页面,

紧接着用户点击某一个模块时,再继续下载对应模块的代码包并进行渲染,就能再进一步减少加载时间。

4、减少渲染的节点-通过组件懒加载提高应用性能

组件懒加载可以让 react 应用在真正需要展示这个组件的时候再去展示,有效的减少渲染的节点数,提高页面的加载速度

React 官方在 16.6 版本后引入了新的特性:React.lazy 和 React.Suspense,这两个组件的配合使用可以比较方便进行组件懒加载的实现

React.lazy 该方法主要的作用就是可以定义一个动态加载的组件,这可以直接缩减打包后 bundle 的体积,

并且可以延迟加载在初次渲染时不需要渲染的组件

 Suspense组件中的 fallback 属性接受任何在组件加载过程中你想展示的 React 元素。

你可以将 Suspense 组件置于懒加载组件之上的任何位置,你甚至可以用一个 Suspense 组件包裹多个懒加载组件。 代码示例如下:

import React, {Suspense} from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent));
const AnotherComponent = React.lazy(() => import('./AnotherComponent));
function MyComponent() {return(<div><Suspense fallback={<div> loading...</div>}><section><OtherComponent/><AnotherComponent/></section></Suspense></div>)
}

使用懒加载可以减少bundle文件大小,

不同的文件打包到不同的页面组件当中,加快组件的呈现

import React, {lazy, Suspense} from 'react';
const OtherComponentLazy = lazy(() => import('./OtherComponent));
const AnotherComponentLazy = lazy(() => import('./AnotherComponent));
function Suspensed(lazyComponent) {return (props) {<Suspense fallback={<div></div>}><lazyComponent {...props} /></Suspense>}
}
export const OtherComponent = Suspensed(OtherComponentLazy)
export const AnotherComponent = Suspensed(AnotherComponentLazy)

5、提交阶段优化-避免重复无限渲染

当应用程序状态发生更改时,React会调用render方法。

如果在render方法中继续更改应用程序状态,就会发生render方法递归调用,导致应用报错。

Render方法应该作为纯函数,render方法的执行要根据状态的改变,保持组件的行为和渲染方法一致。

执行提交阶段钩子,会阻塞浏览器更新页面。

如果在提交阶段钩子函数中更新组件 State,会再次触发组件的更新流程,造成两倍耗时。

一般在提交阶段的钩子中更新组件状态的场景有:

  • 类组件应使用 getDerivedStateFromProps 钩子方法代替,函数组件应使用函数调用时执行 setState的方式代替。
  • 使用上面两种方式后,React 会将新状态和派生状态在一次更新内完成。
  • 根据 DOM 信息,修改组件状态。在该场景中,除非想办法不依赖 DOM 信息,否则两次更新过程是少不了的,就只能用其他优化技巧了。

6、组件卸载前执行清理操作

React 组件性能优化的核心是减少渲染真实DOM节点的频率,减少Virtual DOM 比对的频率

在组件中为window注册的全局事件,以及定时器,在组件卸载前要清理掉,防止组件卸载后继续执行影响应用性能

import React,{Component
} from 'react';export default class Hello extends Component {componentDidMount() {this.timer = setTimeout(() => { console.log('把一个定时器的引用挂在this上'); },500);}componentWillUnmount() {// 如果存在this.timer,则使用clearTimeout清空。// 如果你使用多个timer,那么用多个变量,或者用个数组来保存引用,然后逐个clearthis.timer && clearTimeout(this.timer);}
};

7、通过使用占位符标记提升React组件的渲染性能

使用Fragment不对应具体的视图,减少了包含的额外标记的数量

仅仅是代表可以包装而已,跟空的标识符一样,视图层级关系减少有利于视图渲染,

满足在组件顶级具有单个父级的条件

<div>
...
</div> 
// 上面会多出一个无意义标记
// 应该改为 
<fragment>
...
</fragment>
// 或者写成下面这样也是可以的
<>
...
</>

8、缩小状态影响范围-状态下放到使用组件的内部

React不直接操作DOM,它在内存中维护一个快速响应的DOM描述,render方法返回一个DOM的描述

React能够计算出两个DOM描述的差异,然后更新浏览器中的DOM,这就是著名的DOM Diff。

就是说React在接收到属性(props)或者状态(state)更新时,就会通过前面的方式更新UI。所以React整个UI渲染是比较快的。但是这里面可能出现的问题是:

假设我们定义一个父组件,其包含了5000个子组件。我们有一个输入框输入操作,每次输入一个数字,对应的那个子组件背景色变红。

父组件更新默认触发所有子组件更新,子组件的props为空对象,{} === {} 永远会返回false

优化思想:将变的和不变的分开(state,props,context)

我们需要先手动创建一个有严重渲染性能的组件,如下所示:

import { useState } from 'react';export default function App() {let [color, setColor] = useState('red');return (<div><input value={color} onChange={(e) => setColor(e.target.value)} /><p style={{ color }}>Hello, world!</p><ExpensiveTree /></div>);
}function ExpensiveTree() {let now = performance.now();while (performance.now() - now < 100) {// Artificial delay -- do nothing for 100ms}return <p>I am a very slow component tree.</p>;
}

很显然,当 App 组件内的状态发生了改变,ExpensiveTree 组件会 re-render, 事实上 ExpensiveTree 组件的 props、state 并未发生改变,这并不是我们期望的结果。

export default function App() {let [color, setColor] = useState('red');return (<div><input value={color} onChange={(e) => setColor(e.target.value)} /><p style={{ color }}>Hello, world!</p><ExpensiveTree /></div>);
}

我们可以看到以上 ExpensiveTree 组件并不依赖 App 组件内部的状态,因此我们是否可以考虑,将依赖 color 的元素抽离到一个依赖 color 的组件中呢?

export default function App() {return (<><Form /><ExpensiveTree /></>);
}function Form() {let [color, setColor] = useState('red');return (<><input value={color} onChange={(e) => setColor(e.target.value)} /><p style={{ color }}>Hello, world!</p></>);
}

此时,将依赖 color 的元素提取到了 Form 组件中,Form 组件内部的状态不再影响 ExpensiveTree 组件的渲染,问题便得到了解决。

9、跳过不必要的组件更新-通过纯组件提升性能

  • 类组件中使用PureComponent
  • 函数式组件中使用React.memo

在 React 工作流中,如果只有父组件发生状态更新,即使父组件传给子组件的所有 Props 都没有修改,也会引起子组件的 Render 过程。

如果子组件的 Props 和 State 都没有改变,那么其生成的 DOM 结构和副作用也不应该发生改变。

纯组件会对组件输入数据进行浅层比较,如果当前输入数据和上次输入数据相同,组件不会重新渲染。

比较引用数据类型在内存中的引用地址是否相同,比较基本数据类型的值是否相同

为什么不直接进行diff操作?而要先进行浅比较?

浅比较只操作当前组件的state和props,diff操作会重新遍历整个VirtualDOM树

10、跳过不必要的组件更新-通过shouldComponentUpdate

纯函数只能进行浅层比较,要进行深层比较,

使用shouldComponentUpdate,它用于编写自定义比较逻辑

ShouldComponentUpdate(nextProps,nextState){if(nextProps……){return true}return false
}

11、跳过不必要的组件更新-通过memo纯组件提升性能

Memo基本使用:将函数组件变为纯组件,当前props和上一次的props进行浅比较,如果相同就阻止组件重新渲染

Memo函数是浅层数据比较,如果遇到引用数据类型,需要传递自定义比较逻辑,传给Memo函数的第二个参数

memo的第二个参数示例如下:

// 给memo传递第二个参数,自定义比较逻辑
import React, { memo, useEffect, useState } from 'react'
function App () {const [person, setPerson] = useState({ name: '张三', age: 20, job: 'waiter' })const [index, setIndex] = useState(0)useEffect(() => {let timer = setInterval(() => {setIndex(prev => prev + 1)setPerson({ ...person, job: 'chef' })}, 1000)return () => {clearInterval(timer)}}, [index, person])return (<div>{index}<ShowName person={person} /></div>)
}
function compare (prevProps, nextProps) {if (prevProps.person.name !== nextProps.person.name ||prevProps.person.age !== nextProps.person.age) {return false}return true
}
const ShowName = memo(function ({ person }) {console.log('render...')return (<div>{person.name} {person.age}</div>)
}, compare)
export default App

12、跳过不必要的组件更新- useMemo、useCallback缓存优化

useMemo、useCallback 实现稳定的 Props 值

useMemo 缓存上次计算的结果,当 useMemo 的依赖未发生改变时,就不会触发重新计算,一般用在非常耗时的场景中,

如:遍历大列表做统计信息。

useCallback ,将父组件传递给子组件时,子组件会因为重新render发生改变的时候,缓存一个值

useCallback 是 React 的一个 Hook,它用于记住函数的引用,避免在每次渲染时都创建一个新的函数实例。这可以帮助优化性能,因为避免不必要的重渲染和子组件的重新渲染。

使用场景:

当你有一个函数,它依赖于某些 props 或 state,但你不希望它在这些依赖发生变化时重新创建,你可以使用 useCallback 来保持引用不变。

如果你有一个子组件,它是纯的(不依赖外部状态,只依赖于传入的 props),并且你希望避免非必要的重渲染,你可以使用 useCallback 来保证传递给子组件的函数引用保持不变。

例子代码:

import React, { useCallback } from 'react';
function ParentComponent() {const [count, setCount] = useState(0);// 使用 useCallback 来避免在每次渲染时都创建一个新的函数实例const incrementCount = useCallback(() => {setCount(count + 1);
}, [count]);
return (<div><p>Count: {count}</p ><button onClick={incrementCount}>Increment</button>ChildComponent onIncrement={incrementCount} /></div>
);
}
function ChildComponent({ onIncrement }) {
// 这里我们不需要每次 ParentComponent 渲染时都创建一个新的函数实例
// 因为 onIncrement 引用没有变化return <button onClick={onIncrement}>Increment from Child</button>;
}

在这个例子中,incrementCount 是一个函数,用于增加计数。我们使用 useCallback 来保证在 ParentComponent 的多次渲染中,incrementCount 函数的引用是不变的,这样 ChildComponent 就不会因为 ParentComponent 的渲染而不必要地重新渲染。

13、列表使用Key属性

遍历展示视图时使用 key,key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}> {number} </li>);

使用 key 注意事项:

这个元素在列表中拥有的一个独一无二的字符串。通常,我们使用数据中的 id 来作为元素的 key

14、不要使用内联函数定义:

如果使用内联函数,函数是引用数据类型,在内存中的地址不会相同,则每次render函数时,都会创建一个新的函数实例

在渲染阶段会绑定新函数并将旧实例扔给垃圾回收,因此绑定内联函数,需要额外的垃圾回收和绑定到DOM的工作

1.Render(){Return (<input type=“button” onClick={(e)=>{this.setState({inputVal:e.target.value})}}>)
}2.setNewState=(e)->{this.setState({inputVal:e.target.value})}
//箭头函数被添加到类的实例对象属性而不是原型对象属性,如果组件被多次重用,每个实例都会有一个相同的函数实例,降低了函数实例的可重用性,造成了资源的浪费
Render(){Return (<input type=“button” onClick={(e)=>{this.setNewState}/> )
}3.Export default class a extends React.Component{constructor(){this.handleClick = this.handClick.bind(this)//构造函数只执行一次}
}
handleClick(){xxxxx}
<input type=“button” onClick={this.handleClick}/>
//render方法每次执行时都会调用bind方法生成新的函数实例
<input type=“button” onClick={this.handleClick.bind(this)}/>

15、避免使用内联样式

使用内联样式时,会被编译为JavaScript代码,JavaScript将样式规则映射到元素上,浏览器需要花费更多时间处理脚本和渲染UI。

它是在执行时为元素添加样式,而不是在编译时为元素添加样式。

因此,性能非常的低,更好的办法是将CSS文件导入组件。能通过css直接做的事情,就不要通过JavaScript去做,因为JavaScript操作DOM非常慢

16、事件节流和防抖

利用debounce、throttle 避免重复回调

节流:

意味着不会立即执行,在触发事件之前会加上几毫秒延迟,

throttle 更适合需要实时响应用户的场景中更适合,

如通过拖拽调整尺寸或通过拖拽进行放大缩小(如:window 的 resize 事件)。实时响应用户操作场景中,如果回调耗时小,

甚至可以用 requestAnimationFrame 代替 throttle。

页面滚动到底部的时候,使用节流,否则触发多个网络请求调用,导致性能问题

防抖:

在输入框中键入数据,直到用户不再输入数据为止,兼容网络调用提升性能

在搜索场景中,只需响应用户最后一次输入,无需响应用户的中间输入值,

debounce 更适合使用在该场景中。

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

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

相关文章

ONLYOFFICE 文档 8.1 现已发布:功能全面的 PDF 编辑器、幻灯片版式等等

0、前言 在技术的快速发展和工作方式的持续演进下&#xff0c;现代办公软件正变得越来越强大和多样化。ONLYOFFICE&#xff0c;作为市场上备受瞩目的一体化办公解决方案&#xff0c;以其全面的文档编辑、表格处理和演示制作功能&#xff0c;满足了用户在不同办公场景下的需求。…

安卓设备优雅的命令 adb 以及 优秀的控制 scrcpy

一、背景 如果有多台安卓设备&#xff0c;并为这些设备安装软件&#xff0c;一个个使用u盘再加上鼠标操作虽然可以做到&#xff0c;但是大概率比较麻烦。试想下&#xff0c;如果坐在电脑旁边&#xff0c;就能鼠标在电脑上点点就能解决问题&#xff0c;是多么优雅的一件事情。 …

使用上海云盾 CDN 和 CloudFlare 后 Nginx、 WordPress、 Typecho 获取访客真实 IP 方法

最近因为被 DDoS/CC 攻击的厉害,明月就临时的迁移了服务器,原来的服务器就空置下来了,让明月有时间对服务器进行了重置重新部署安装生产环境。因为站点同时使用了上海云盾和 CloudFlare(具体思路可以参考【国内网站使用国外 CloudFlare CDN 的思路分享】一文)两个 CDN 服务…

Docker--基础详解

目录 Docker介绍 Docker与传统虚拟机相比的优势 Docker基础插件 Docker镜像 容器和仓库 Docker介绍 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言开发&#xff0c;遵从Apache2.0开源协议&#xff0c;依赖Linux内核的Cgroup和Namespace等技术&#xff0c;对进…

快速欧氏聚类与普通欧氏聚类比较

1、前言 文献《FEC: Fast Euclidean Clustering for Point Cloud Segmentation》介绍了一种快速欧氏聚类方法,大概原理可以参考如下图,具体原理可以参考参考文献。 2、时间效率比较:快速欧氏聚类VS普通欧氏聚类 网上搜集的快速欧式聚类,与自己手写的普通欧式聚类进行对比,…

“了解MySQL中的enum枚举数据类型“

目录 # 开篇 1. 创建包含枚举类型的表 2. 插入枚举类型的数据 3. 查询包含枚举类型的表 4. 更新枚举类型的数据 5. 使用枚举类型的好处 注意事项 示例总结 附加 # 开篇 在数据库中&#xff0c;枚举&#xff08;ENUM&#xff09;是一种数据类型&#xff0c;用于存储一组…

uniapp中Error: project.configjson: libVersion 字段需为 string. string

错误如下 找到manifestjson文件到源码视图 添加这段代码"libVersion": "latest",即可

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第46课-使用json文件

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第45课-使用头像 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎&…

在Maven工程中手动配置并测试SpringBoot(巨详)

本篇博客承继自博客&#xff1a; 在IDEA 2024.1.3 (Community Edition)中创建Maven项目_idea2024.1.3如何创建maven项目-CSDN博客 配置POM文件 打开工程中的pom.xml文件&#xff0c;先向其中写入 <parent><groupId>org.springframework.boot</groupId><…

【挑战100天首通《谷粒商城》】-【第一天】06、环境-使用vagrant快速创建linux虚拟机

文章目录 课程介绍1、安装 linux 虚拟机2、安装 VirtualBoxStage 1&#xff1a;开启CPU虚拟化Stage 2&#xff1a;下载 VirtualBoxStage 2&#xff1a;安装 VirtualBoxStage 4&#xff1a;安装 VagrantStage 4-1&#xff1a;Vagrant 下载Stage 4-2&#xff1a;Vagrant 安装Stag…

[职场] 线上面试的准备工作 #知识分享#经验分享#媒体

线上面试的准备工作 面对求职中的面试&#xff0c;应届毕业生该做些什么准备呢&#xff1f;在这里&#xff0c;向各位分享面试前做好预案不慌张几点准备。现在许多面试是通过线上形式进行的。对于求职者来说&#xff0c;要做好两手准备。在这里&#xff0c;重点与大家分享线上面…

Qt画实时曲线图

Qt引入QcustomPlot 首先下载QcustomPlot源代码&#xff0c;https://github.com/qcustomplot/qcustomplot 下载zip文件 运行所下载的项目生成库文件libqcustomplotd2.a文件和qcustomplotd2.dll文件。 在项目中添加printsupport。 并将qcustomplot.h文件和qcustomplot.cpp文…

基于matlab的图像二值化

1 原理 图像二值化的原理是将彩色或灰度图像转换为只包含两种颜色&#xff08;通常是黑色和白色&#xff09;的二值图像的过程。其关键是通过设定一个阈值&#xff0c;将图像中的像素点的灰度值与阈值进行比较&#xff0c;根据比较结果将像素点设置为白色或黑色。步骤如下&…

ElementPlus组件与图标按需自动引入

按需自动引入组件 1. 安装ElementPlus和自动导入ElementPlus组件的插件 pnpm install element-plus pnpm install -D unplugin-vue-components unplugin-auto-import 2. vite.config.ts进行修改 import { defineConfig } from vite import vue from vitejs/plugin-vue // …

2024CICE电博会·以“链主”企业为核心,推动产业链协同发展

随着全球科技日新月异的发展&#xff0c;消费电子产业已成为推动经济增长、改善人民生活的重要力量。中国国际消费电子博览会&#xff08;简称CICE电博会&#xff09;自2001年创办以来&#xff0c;已经走过了二十余个春秋&#xff0c;凭借其独特的地理位置优势、专业的组织策划…

如何开发、使用 Starter

开发 第一步&#xff1a;创建starter工程hello-spring-boot-starter并配置pom.xml文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchem…

趣味C语言——【猜数字】小游戏

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ &#x1f389;创作不易&#xff0c;请多多支持&#x1f389; &#x1f308;感谢大家的阅读、点赞、收藏和关注&#x1f495; &#x1f339;如有问题&#xff0c;欢迎指正 感谢 目录 代码…

BP神经网络-入门到理解-长文讲述

本文来自&#xff1a;老饼讲解-BP神经网络 https://www.bbbdata.com 目录 一、BP神经网络的仿生意义 二、BP神经网络的结构 三、BP神经网络的前馈与后馈 3.1 BP神经网络的前馈 3.2 什么是BP神经网络的后馈 四、BP神经网络的训练 4.1 BP神经网络归一化 4.2 梯度下降算法…

使用SpringCache实现Redis缓存

目录 一 什么是Spring Cache 二 Spring Cache 各注解作用 ①EnableCaching ②Cacheable ③CachePut ④CacheEvict 三实现步骤 ①导入spring cache依赖和Redis依赖 ②配置Redis连接信息 ③在启动类上加上开启spring cache的注解 ④ 在对应的方法上加上需要的注解 一 什么…

重构大学数学基础_week05_雅各比矩阵与雅各比行列式

这周来讲一下雅各比矩阵和雅各比行列式。 多元函数的局部线性属性 首先我们来回顾一下向量函数&#xff0c;就是我们输入一个向量&#xff0c;输出也是一个向量&#xff0c;我们假设现在有一个向量函数 这个函数意思就是在说&#xff0c;我们在原来的平面上有一个向量(x,y),经…