当前位置: 首页 > news >正文

React(五) 受控组件和非受控组件; 获取表单元素的值。高阶组件(重点),Portals; Fragment组件;严格模式StrictMode

文章目录

  • 一、受控组件
    • 1. 什么是受控组件
    • 2. 收集input框内容
    • 3. 收集checkBox的值
    • 4. 下拉框select
    • 总结
  • 二、非受控组件
  • 三、高阶组件
    • 1. 高阶组件的概念 (回顾高阶函数)
    • 2. 高阶组件应用:注入props
      • (1) 高阶组件给---函数式组件注入props
      • (2) 高阶组件给---类组件注入props
      • (3) 高阶组件注入props+自己需要注入props
    • 3. 高阶组件应用:context的增强
    • 4. 高阶组件应用:登录鉴权
    • 5. 高阶组件应用:生命周期劫持
    • 总结
  • 四、 Portals
  • 五、 Fragment组件
  • 六、 严格模式StrictMode

一、受控组件

1. 什么是受控组件

当表单元素绑定value属性时,就是受控组件,此时按键盘也无法再向输入框里输入信息

若要输入信息,必须绑定onChange事件,获取输入的值,修改state,然后通过value属性将修改后的值显示到输入框里。(很像vue中的v-model)
在这里插入图片描述

2. 收集input框内容

(1) form标签上绑定onSubmit事件,当提交时,触发该事件。
(2) label标签里,htmlFor属性值为所绑定的表单属性的id
(3) 两个不同类型输入框的处理事件合并到一个函数中。e.target.name的值是input标签里的name属性。e.target.value是输入框里的值。(键值读取变量用[]包裹)。

// 提交事件
handleSubmitClick (e) {// 1.阻止默认的行为e.preventDefault()// 2.获取到所有的表单数据, 对数据进行组件console.log("获取所有的输入内容:", this.state.username, this.state.password)// 3.以网络请求的方式, 将数据传递给服务器(ajax/fetch/axios)
}// 处理input框输入
handleInputChange (e) {this.setState({[e.target.name]: e.target.value})
}// 渲染render () {const { username, password } = this.statereturn (<div><form onSubmit={e => this.handleSubmitClick(e)}><label htmlFor="username">用户:<input type="text" id="username" name='username'value={username}onChange={e => this.handleInputChange(e)} /></label><br /><label htmlFor="password">密码:<input type="password" name="password" id="password"value={password}onChange={e => this.handleInputChange(e)} /></label><br /><button type='submit'>注册</button></form></div>)}

3. 收集checkBox的值

单选框
(1) 通过checked属性设置该框是否被选中。实现数据改变页面
(2) 读取e.target.checked来获取用户的输入,判断用户点击后,checkbox是true还是false

 handleAgreeChange (e) {// 根据用户输入修改状态值this.setState({isAgree: e.target.checked})}
{/* 单选框 this.state.isAgree默认值是false */}const { isAgree } = this.state
<label htmlFor="agree"><inputid='agree'type="checkbox"checked={isAgree}onChange={e => this.handleAgreeChange(e)}/>同意协议
</label><br />

多选框
多选框就是循环遍历数据。与单选框处理逻辑类似,注意修改hobbies时,需要浅拷贝。

  hobbies: [{ value: "sing", text: "唱", isChecked: false },{ value: "dance", text: "跳", isChecked: false },{ value: "rap", text: "rap", isChecked: true }],{/* 多选框 */}{hobbies.map((item, index) => {return (<label htmlFor={item.value} key={item.value}><inputtype="checkbox"id={item.value}checked={item.isChecked}onChange={(e) => this.handleHobbiesChange(e, index)} />{item.text}</label>)})}// 注意需要浅拷贝
handleHobbiesChange (e, index) {console.log(e.target.checked, index);const hobbies = [...this.state.hobbies]hobbies[index].isChecked = e.target.checkedthis.setState({ hobbies })
}

4. 下拉框select

单选下拉框
(1)通过value属性来设置默认值,fruit: "apple",
(2) e.target.value来读取用户选了什么水果;

   {/* 下拉框 */}{/*  value={fruit} 设置默认值 */}<select value={fruit} onChange={e => this.handleFruitChange(e)}><option value="orange">橘子</option><option value="apple">苹果</option><option value="banana">香蕉</option></select>// 水果下拉框
handleFruitChange (e) {this.setState({ fruit: e.target.value })
}

多选下拉框
(1)添加multiple属性,设置多选,此时绑定的value值为 fruits: ['apple', 'banana']
(2)e.target.selectedOptions获取用户选择,具体看事件处理函数

 {/* 多选框 */}<select value={fruits} onChange={e => this.handleFruitsChange(e)} multiple><option value="orange">橘子</option><option value="apple">苹果</option><option value="banana">香蕉</option></select>
// 水果下拉多选框
handleFruitsChange (e) {const options = Array.from(e.target.selectedOptions)// options里每一项的value值是用户选择的值const values = options.map(item => item.value)this.setState({ fruits: values })// 额外补充: Array.from(可迭代对象)// Array.from(arguments)const values2 = Array.from(e.target.selectedOptions, item => item.value)console.log(values2)
}

在这里插入图片描述

总结

ElementValue propertyChange callbackNew value in the callback
<input type="text" />value="string"onCahngee.target.value
<input type="checkbox" />checked={boolean}onCahngee.target.checked
<input type="radio" />checked={boolean}onCahngee.target.checked
<textarea/>value="string"onCahngee.target.value
<select/>value="option value"onCahngee.target.value

二、非受控组件

(1) 绑定默认值不能用value,会变成受控组件。应该用defaultValue
(2) 给元素添加监听事件,只能用原生的方式; 首先需要绑定ref,然后添加监听事件addEventListener
(3) 通过this.introRef.current.value来获取输入框里的值。
(4) checkboxradio支持defaultCheckedselecttextarea支持defaultValue

export class App extends PureComponent {constructor() {super()this.state = {intro: '123456'}this.introRef = createRef()}componentDidMount () {this.introRef.current.addEventListener(...)}// 提交事件handleSubmitClick (e) {// 1.阻止默认的行为e.preventDefault()// 2.获取到所有的表单数据, 对数据进行组件console.log(this.introRef.current.value);// 3.以网络请求的方式, 将数据传递给服务器(ajax/fetch/axios)}// 渲染render () {const { intro } = this.statereturn (<div><form onSubmit={e => this.handleSubmitClick(e)}>{/* 非受控组件 */}<input type="text" defaultValue={intro} ref={this.introRef} /><button type='submit'>注册</button></form></div >)}
}

三、高阶组件

1. 高阶组件的概念 (回顾高阶函数)

(1) 高阶函数
满足这两个条件之一的就是高阶函数:
接受一个或多个函数作为输入;
输出一个函数;
比如JS中的map,filter,reduce

funcition foo(){function bar(){}return bar
}
// foo函数返回一个函数,所以这个也是高阶函数
const fn = foo()

(2) 高阶组件(Higher-Order Components) 简称HOC
高阶组件本质是一个函数(并不是组件),这个函数的参数是组件,函数的返回值是一个新组件。

// 1. 定义一个原组件
class OriginHW extends PureComponent {render () {return (<div>HelloWorld</div>)}
}
// 2. 定义一个高阶组件,接收原组件,并对原组件进行一些操作
function hoc (Cpn) {class newHW extends PureComponent {render () {return <Cpn name="why" />}}return newHW
}// 3. 调用高阶组件,这里的参数直接传原组件的名称;接收到的一个新组件
const HelloHOC = hoc(OriginHW)class App extends PureComponent {render () {return (<div>{/* 使用新组件 */}<HelloHOC /></div>)}
}

界面打印:HelloWorld;

可以看出,高阶组件对原来的组件进行了一层拦截,拦截之后就可以对组件进行一些操作,再返回组件。

高阶组件不是React API的一部分,是一种设计模式
高级组件再一些React第三方库中十分常见:
 * 比如:redux中的connect
 * 比如:react-router中的withRouter

2. 高阶组件应用:注入props

  首先定义一个高阶组件,用于给需要特殊数据的组件,注入props数据。比如某些组件需要userInfo这个数据。

src/hoc/enhancedUserInfo.js

// 定义高阶组件,给需要特殊数据的组件,注入props
function enhancedUserInfo (OriginComponent) {class NewComponent extends PureComponent {// 构造函数constructor() {super()this.state = {userInfo: {userName: 'tom',age: '18'}}}render () {return (// 通过props的方式将数据传给组件<OriginComponent {...this.state.userInfo} />)}}// 其实本质上return的是注入了props数据的<OriginComponent/>组件return NewComponent
}
export default enhancedUserInfo

(1) 高阶组件给—函数式组件注入props

App.jsx

import React, { PureComponent } from 'react'
import enhancedUserInfo from './hoc/enhancedUserInfo'
import About from './pages/About'// 增强函数式组件,props接收数据,
// funtion后面可以不写函数名,这里是为了区分增强前后,Friend与NewFriend
const NewFriend = enhancedUserInfo(function Friend (props) {return <h2>Hello--{props.userName}---{props.age}---{props.fruit}</h2>
})// App应用函数式组件
class App extends PureComponent {render () {...<NewFriend />}
}

(2) 高阶组件给—类组件注入props

src/pages/About.jsx:创建类组件About

import enhancedUserInfo from '../hoc/enhancedUserInfo'
class About extends PureComponent {render () {return (<div>{/* 没有构造函数也可以读取this.props */}<h2>About---{this.props.userName}---{this.props.age}</h2></div>)}
}
// 在导出的时候,利用高阶组件增强改类组件,让该组件收到props数据
export default enhancedUserInfo(About)

App.jsx

// App应用函数式组件
class App extends PureComponent {render () {...<About/>}
}

(3) 高阶组件注入props+自己需要注入props

在使用子组件之前,通过高阶组件可以注入一些props数据;如果在App中使用子组件时,也往里传递了数据,该怎么接收。

class App extends PureComponent {render () {return (<div>{/* fruit实际是传给了高阶组件里的NewComponent */}<NewFriend fruit={['apple', 'banana']} /><About fruit={['橘子', '火龙果']} /></div>)}
}

这里传递的fruit,实际上是传到了enhancedUserInfo里的NewComponent类中,然后再通过props的方式传给OriginComponent.
在这里插入图片描述
原组件中仍然是通过props来接收这些数据
在这里插入图片描述

3. 高阶组件应用:context的增强

照旧先创建theme-context

src/context/theme-context.js

import { createContext } from 'react'
const ThemeContext = createContext()
export default ThemeContext

App中应用子组件Product,并用Context包裹子组件,传递数据

class App extends PureComponent {render () {return (<div>{/* 使用新组件 */}<ThemeContext.Provider value={{ color: 'red', size: 20 }}><Product /></ThemeContext.Provider></div >)}
}

子组件接收context数据的方式有两种,指定context类型的只能接收一种context数据。所以一般通过consumer来接收多个context数据。之前的做法是在组件内部使用consumer:
在这里插入图片描述
这样的会让组件可读性不高,且不好维护。

利用高阶组件的做法:在高阶组件中使用consumer,然后将context数据注入原组件中。
(1) 定义高阶组件withTheme;
src/hoc/with-theme.js:

import ThemeContext from "../context/theme-context"
function withTheme (OriginComponent) {return (props) => {return (<ThemeContext.Consumer>{value => {// 通过props将context数据传给子组件return <OriginComponent {...value} />}}</ThemeContext.Consumer>)}
}
export default withTheme

(2) 高阶组件在子组件向外暴露的时候拦截一下,注入数据:

import withTheme from '../hoc/with-theme'
export class Product extends PureComponent {render () {return (// props接收数据。<div>Product---color:{this.props.color}---size:{this.props.size}</div>)}
}
export default withTheme(Product)

4. 高阶组件应用:登录鉴权

(1) 定义一个高阶组件。判断当前是否有token,有就说明登录了(登录就渲染界面),没有就没登录(没登录就返回提示信息)

src/hoc/login-auth .js

function loginAuth (OriginComponent) {// 返回一个函数式组件return (props) => {const token = localStorage.getItem('token')if (token) {      // 登录则渲染该组件return <OriginComponent />} else {      // 没登录则给出提示信息return <h2>请先登录</h2>}}
}
export default loginAuth

(2) 哪个子组件需要登录鉴权,就用高阶组件拦截一下
子组件Cart:

import loginAuth from '../hoc/login-auth'
export class Cart extends PureComponent {render () {return (<div>Cart</div>)}
}
export default loginAuth(Cart)

(3) App中使用子组件
App中设置一个state数据:isLogin,用来渲染数据的变化。

class App extends PureComponent {...login () {localStorage.setItem('token', 'tom')// 设置isLogin变量的目的是,确定登录,修改数据,能够重新调用render函数this.setState({ isLogin: true })// 如果没有isLogin,可以调用强制刷新的API,但是也不建议使用这个API// this.forceUpdate()}render () {return (<div><Cart /><button onClick={e => this.login()}>点击登录</button></div >)}
}

高阶函数里什么时候适合创建类组件,什么适合适合创建函数组件。

5. 高阶组件应用:生命周期劫持

通过生命周期来计算每个组件的挂载时间。

  export class Detail extends PureComponent {UNSAFE_componentWillMount () {this.beginTime = new Date().getTime()}componentDidMount () {this.endTime = new Date().getTime()const interval = this.endTime - this.beginTimeconsole.log(`当前页面花费了${ interval }ms渲染完成!`)}render () {...}}

抽取到高阶组件中:

// 可以对需要计算渲染时间的组件进行拦截
function logRenderTime (OriginComponent) {// 函数式组件没有生命周期,所以返回一个类组件;// 由于是直接返回这个类,所以类名可以省略 class NewComponent extends...return class extends PureComponent {UNSAFE_componentWillMount () {this.beginTime = new Date().getTime()}componentDidMount () {this.endTime = new Date().getTime()const interval = this.endTime - this.beginTimeconsole.log(`当前${ OriginComponent.name }页面花费了${ interval }ms渲染完成!`)}render () {return <OriginComponent {...this.props} />}}
}
export default logRenderTime

OriginComponent.name可以拿到组件的名字;

应用在某个组件上:

import logRenderTime from '../hoc/log_render_time'
export class Detail extends PureComponent {...
}
export default logRenderTime(Detail)

总结

高阶组件主要是方便代码的复用。
高阶组件中什么时候返回类组件,什么时候返回函数式组件,取决于是否

四、 Portals

 某些情况下,我们希望渲染的内容独立于父组件,挂载到其他位置。甚至独立于当前挂载的DOM元素中。

<!--比如当前除了root根节点,还有第二个节点。通过Portals,我们可以将内容挂载到root2中--><div id="root"></div><!-- 新节点 --><div id="root2"></div>

App.jsx
createPortal(child,container)child是任何可渲染的React元素,container是DOM元素,也就是需要挂载的地方。

// 1. 引入createPortal函数
import { createPortal } from 'react-dom'
export class App extends PureComponent {render () {return (<div><h1>AppH1</h1>{createPortal(<h2>App H2</h2>, document.querySelector('#root2'))}</div>)}
}
export default App

在这里插入图片描述

五、 Fragment组件

因为要求只能有一个根节点,所以每次写结构都要包裹一个div
当我们不想多一个div结构时,可以采用Fragment

import React, { Fragment, PureComponent } from 'react'
export class App extends PureComponent {render () {return (// <div>//   <h1>没吃早饭</h1>//   <h2>没吃午饭</h2>//   <h3>没吃晚饭</h3>// </div><Fragment><h1>没吃早饭</h1><h2>没吃午饭</h2><h3>没吃晚饭</h3></Fragment>)}
}

在这里插入图片描述
Fragment标签可以用是用<></>代替(语法糖)。需要注意,当需要在Fragment标签绑定key属性时,不能采用语法糖的形式。

     <><h1>没吃早饭</h1><h2>没吃午饭</h2><h3>没吃晚饭</h3></>

六、 严格模式StrictMode

StrictMode于Fragment一样,不会渲染到结构上面。主要用来显示程序中潜在的问题。严格模式的检查尽在开发模式下运行。

import React, { PureComponent, StrictMode } from 'react'
export class App extends PureComponent {render () {return (<div>{/* 对Home及其后代元素开启严格模式 */}<StrictMode><Home /></StrictMode><Profile /></div>)}
}

严格模式检查什么?

(1) 识别不安全的生命周期,检查是否使用过时的ref API

// Home.jsxUNSAFE_componentWillMount () {console.log("Home UNSAFE_componentWillMount")}render () {return (<div><h2 ref="title">Home Title</h2>{/* <h2>Home</h2> */}</div>)
}

严格模式下,会报错,提醒程序员,避免一些隐藏的bug。
在这里插入图片描述
如果Profile组件使用这两个过时的API及生命周期函数,仍可正常使用,不会报错误。

(2) 检查副作用
  严格模式检查下的组件的生命周期函数会被调用两次,以检查此处的逻辑代码当被多次调用是,是否会产生bug。在生产环境中是不会被调用两次的。
在这里插入图片描述
(3)检查是否使用其他废弃或过时(findDOMNode)的方法 ,给出警告

相关文章:

React(五) 受控组件和非受控组件; 获取表单元素的值。高阶组件(重点),Portals; Fragment组件;严格模式StrictMode

文章目录 一、受控组件1. 什么是受控组件2. 收集input框内容3. 收集checkBox的值4. 下拉框select总结 二、非受控组件三、高阶组件1. 高阶组件的概念 (回顾高阶函数)2. 高阶组件应用&#xff1a;注入props(1) 高阶组件给---函数式组件注入props(2) 高阶组件给---类组件注入prop…...

深入解析 Jenkins 自动化任务链:三大方法实现任务间依赖与状态控制

文章目录 前言1. 使用 “Build Trigger”&#xff08;构建触发器&#xff09;2. 使用 Jenkins Pipeline 实现任务触发3. 使用 Jenkins 的 “Parameterized Trigger Plugin” 插件例子1&#xff1a;任务 A 成功后自动执行任务 B例子2&#xff1a;任务 A 成功后自动执行 Pipeline…...

无人机飞手执照培训为什么需要脱产学习?

无人机飞手执照培训需要脱产学习的原因主要基于以下几个方面&#xff1a; 一、知识体系的系统性与复杂性 无人机飞手培训涵盖的内容广泛且深入&#xff0c;包括无人机基础知识、飞行原理、气象学、法律法规等多个方面。这些知识体系相互关联&#xff0c;需要学员进行系统的学…...

PostgreSQL(十三)pgcrypto 扩展实现 AES、PGP 加密,并自定义存储过程

目录 一、pgcrypto 简介1.1 安装 pgcrypto 扩展1.2 pgcrypto 包含的函数 二、用法①&#xff1a;对称加密&#xff08;使用 AES、Blowfish 算法&#xff09;2.1 密钥2.2 密钥偏移量 三、用法②&#xff1a;PGP加解密3.1 什么是PGP算法&#xff1f;3.2 使用 GPG 生成密钥对3.3 列…...

uniapp使用webView打开的网页有缓存如何解决(APP,微信小程序)

1、给webView的url增加时间戳 this.webviewUrl ${url}?t${new Date().getTime()}; // 添加时间戳 2、在nginx服务器上添加响应头&#xff0c;告诉浏览器不可以使用缓存 location / {root /opt/webs/lcdp-client/dist;index index.html index.htm;try_files $uri $uri/ /…...

HarmonyOS 模块化设计

1.HarmonyOS 模块化设计 模块化设计文档   应用程序包开发与使用文档 1.1. 概述 组件化一直是移动端比较流行的开发方式&#xff0c;有着编译运行快&#xff0c;业务逻辑分明&#xff0c;任务划分清晰等优点&#xff0c;HarmonyOs组件化的使用&#xff0c;有利于模块之间的解…...

解决docker拉取readeck镜像报Error response from daemon: toomanyrequests问题

readeck 是一个内容中心&#xff0c;目前已支持中文翻译 这是本地化部署后的效果&#xff1a; 原命令为&#xff1a; docker run --rm -ti -p 8000:8000 -v readeck-data:/readeck codeberg.org/readeck/readeck:latest Unable to find image codeberg.org/readeck/readeck:la…...

duilib的应用 在双屏异分辨率的显示器上 运行显示不出来

背景&#xff1a;win11&#xff0c;duilib应用&#xff0c;双显示器&#xff0c;两台分辨率相同&#xff0c;分别设置不同的缩放以后&#xff0c;应用运行以后&#xff0c;程序闪一下消失或者程序还在&#xff0c;但是UI显示不出来。 原因 窗口风格设置不合理&#xff0c;所以…...

零代码快速开发智能体 |甘肃旅游通

在互联网信息爆炸的时代&#xff0c;寻找一处让人心动的旅游胜地往往需要花费大量的时间和精力。而今天&#xff0c;我要向大家介绍一款能够帮助你轻松规划甘肃之行的智能体——“甘肃旅游通”。这款智能体通过低代码开发&#xff0c;集合了丰富的旅游信息和个性化推荐功能&…...

【MATLAB源码-第187期】基于matlab的人工蜂群优化算法(ABC)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 Artificial Bee Colony&#xff08;ABC&#xff09;算法是一种模仿蜜蜂觅食行为的优化算法&#xff0c;它通过模拟蜜蜂群体的社会结构和行为来解决数学优化问题。本文将详细介绍ABC算法的基本原理、算法流程、以及在实际应用…...

qt获取本地语言

获取本地语言 #define QSTRING_TO_UTF8(str) std::string(str.toUtf8()) enum LanguageType {kLanguageTypeChinese,kLanguageTypeTradition,kLanguageTypeEnglish };QLocale qlLanguage;QString qstrLangCode qlLanguage.languageToString(qlLanguage.language());LOG(INFO)…...

【Spring篇】Spring中的Bean管理

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f3af;Spring IOC容器 &#x1f6a…...

UV灯 VS LED灯,LED美甲灯是紫外线灯吗?

美甲灯是使甲油胶固化的重要工具&#xff0c;目前最常用的美甲灯一般是UV灯、LED灯以及CCFL灯。 一、不同的灯之间到底有什么区别呢&#xff1f;这次让我们好好看一下 UV灯&#xff1a; UV灯是紫外线灯管的简称。UV灯属于热阴极荧光灯&#xff0c;发出UVA&#xff08;长波紫…...

得物App3D博物馆亮相“两博会”,正品保障助力消费体验升级

近日&#xff0c;2024中国体育文化博览会、中国体育旅游博览会&#xff08;以下简称“两博会”&#xff09;在苏州国际展览中心盛大开幕。本次展会汇聚了众多国内外体育文化、体育旅游领域的顶尖企业和品牌&#xff0c;共同展示体育产业的发展成果和最新趋势。在C展馆C21展位&a…...

rancher安装并快速部署k8s 管理集群工具

主机准备 准备4台主机 3台用于k8s集群 &#xff0c;1台用于rancher 每台服务器新增配置文件 vi etc/sysctl.confnet.ipv4.ip_forward 1 刷新生效 sysctl –p 安装docker 安装的时候可以去github上检索rancher看看最新版本适配那个版本的docker&#xff0c;这里安装23.0.1…...

NVR接入录像回放平台EasyCVR视频融合平台语音对讲配置

国标GB28181视频平台EasyCVR视频融合平台可拓展性强、视频能力灵活&#xff0c;平台可提供视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、云台控制、语音对讲、智能分析接入等功能。其中&#xff0c;在语音对讲方面&#xff0c;NVR接入录像回放平台目前…...

八、Linux 系统安全:守护你的数字堡垒

Linux 系统安全&#xff1a;守护你的数字堡垒 在当今数字化时代&#xff0c;Linux 系统因其稳定性、高效性和开源性而被广泛应用于服务器、工作站以及各种嵌入式设备中。然而&#xff0c;随着网络攻击的日益频繁和复杂&#xff0c;确保 Linux 系统的安全变得至关重要。本文将深…...

PTA数据库编程练习合集

10-1 查询重量在[40,65]之间的产品信息 本题目要求编写SQL语句&#xff0c; 检索出product表中所有符合40 < Weight < 65的记录。 提示&#xff1a;请使用SELECT语句作答。 表结构: CREATE TABLE product (Pid varchar(20), --商品编号PName varchar(50), --商品名…...

分布式链路追踪-01初步认识SkyWalking

一 SkyWaling是什么&#xff1f; Skywalking是分布式系统的应用程序性能监视工具&#xff0c;专为微服务、云原生架构和基于容器&#xff08;Docker、K8s、Mesos&#xff09;架构而设计。SkyWalking 是观察性分析平台和应用性能管理系统&#xff0c;提供分布式追踪、服务网格遥…...

openpnp - 底部相机视觉识别CvPipeLine的参数bug修正

文章目录 openpnp - 底部相机视觉识别的CvPipeLine的参数bug概述笔记openpnp的视觉识别参数的错误原因备注补充 - 如果要直接改默认的底部视觉要注意END openpnp - 底部相机视觉识别的CvPipeLine的参数bug 概述 底部相机抓起一个SOD323的元件&#xff0c;进行视觉识别。 识别…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...