React 基础篇(二)

💻 React 基础篇(二)🏠专栏:React
👀个人主页:繁星学编程🍁
🧑个人简介:一个不断提高自我的平凡人🚀
🔊分享方向:目前主攻前端,其他知识也会阶段性分享🍀
👊格言:☀️没有走不通的路,只有不敢走的人!☀️
👉让我们一起进步,一起成为更好的自己!!!🎁

文章目录

  • React 基础知识篇(二)
    • style 样式
    • 注释
    • className 类名
    • 不同的条件添加不同的类名
      • (1) 使用三目运算
      • (2) 使用第三方包实现
        • classnames
        • styled-components
    • props
      • (1) 使用
      • (2) 默认值
      • (3) 校验props接收传递值的数据类型
    • 条件渲染
      • (一) 三目运算符
        • (1) 变量三目
        • (2) style三目
        • (3) class三目
      • (二) 短路运算符
    • 循环渲染
    • 插槽
      • (1) 使用
      • (2) **具名插槽**
    • state
      • 定义state的两种方式
    • setState
    • 解析state中的标签
    • 事件的传参与this的指向
      • this的指向
      • 事件传参
    • 受控组件和非受控组件
      • 表单输入绑定
      • 非受控组件
    • 状态提升
      • 类组件中
      • 函数组件中

React 基础知识篇(二)

style 样式

类组件和函数组件添加样式的方式是完全一样的

注意点

  1. 添加样式的时候,要使用两个大括号{{}},外面是jsx的括号(表示将{}中的值变为js表达式),里面是对象的括号
return <div style={{color:'red'}}>style</div>
  1. 如果有连字符的,要写成小驼峰的语法
return <div style={{color:'red', fontSize:"20px"}}>style</div>
  1. 如果说单位是px的,可以省略单位,并且写成数字

:并不是所有样式属性的px单位都可以省略(如lineHeight原本就不可以省略,省略后代表的是字体小的倍数)

return <div style={{color:'red',fontSize:20,height:'50px',lineHeight:2}}>style</div>
}

注释

jsx中的注释会被{}包裹,因为注释也被默认当作是js表达式

class About extends React.Component {render() {return <>{/* <div>nihao</div> */}</>}
}

className 类名

通过添加className类名修改样式

.test1 {color: red;
}
.test2 {background-color: aqua;
}
import React from 'react'
// 1. 引入css文件
import './class.css'
const testClass = ()=>{return <><div className='test1 test2'>通过class修改样式</div></>
}
export default testClass

:在标签中不能用class属性要用className,因为jsx中使用了类,防止起冲突。

还有一种标签上的属性名在jsx中发生了改变(label标签上的for属性改为htmlFor,防止与for循环起冲突)

<label htmlFor="fos">年龄</label>
<input type="text" id='fos' placeholder='请输入你的年龄'/>

不同的条件添加不同的类名

(1) 使用三目运算

class.css文件

.red {color: red;
}.green {color: green;
}

App.jsx根组件

import React from 'react'
// 1. 引入css文件
import './class.css'
// 2. 设置变量
const red = false;
const App = () => {return (<><h2>不同条件添加不同样式</h2>{/* 通常情况下,可以使用三目来解决问题 */}<p className={red ? "red" : "green"}>hello react!!</p></>);
};
export default App

(2) 使用第三方包实现

classnames

官网
classnames

安装

npm install classnames
yarn add classnames
import { Component } from 'react';
import classNames from 'classnames/bind';
import styles from './class.css';let cx = classNames.bind(styles);
let show = true;class changeColor extends Component {render () {let className = cx({colorRed: show,colorGreen: show,});return <div className={className}>通过第三包classNames修改样式</div>}
};
export default changeColor

styled-components

官网
styled-components
安装

npm install styled-components
yarn add styled-components

使用

import React from 'react'
import styled  from 'styled-components';
// 方式一:
const Title = styled.h  1`font-size: 1.2em;text-align: center;color: palevioletred;
`;
// 方式二:进行函数传参
const Title1 = styled.h2`/* 还可以使用自定义属性进行props的传参 */font-size: ${(props) => props.size + "px"};color: ${(props) => props.color};
`;const testClass = ()=>{return <><Title className={Title}>通过class修改样式</Title><Title1 size='30'>h2</Title1><Title1 color='green'>h2-2</Title1></>
}
export default testClass

安装vscode中的插件:vscode-styled-components(可以在styled.xx后的字符串中进行标签提示)

props

(1) 使用

props是父组件传递给子组件的自定义属性
特点

  • props 具有响应式
  • 遵循 单向数据流
  • 子组件 不能直接修改props的值

注:

  • 类组件通过this.props获取父组件传递的值
  • 函数组件通过函数参数props获取父组件传递的值
import React, { Component } from 'react'
// 类组件通过this.props获取父组件传递的值
class Child1 extends Component {render() {const { name, age } = this.propsreturn (<div>child1 - {name} - {age}</div>);}
}
// 函数组件通过函数参数props获取父组件传递的值
const Child2 = ({ count }) => {return <><div>child2 - {count}</div></>
}class App extends Component {state = { name:'zs'}render() {return <><div>props传参</div><Child1 age={10} name={this.state.name} /><Child2 count={100} /></>}componentDidMount() {setTimeout(() => {this.setState({name: "lisi",});}, 2000);}
}export default App

(2) 默认值

import React, { Component } from 'react'class Child1 extends Component {// 类组件设置默认值的方式一static defaultProps = {name:'ww',age: 18,sex:'男'}render() {const { name, age, sex } = this.propsreturn (<div>child1 - {name} - {age} - {sex}</div>);}
}
// 类组件设置默认值的方式二
// Child1.defaultProps = {
//     name:'ww',
//     age: 18,
//     sex:'男'
// }const Child2 = ({ count, sex }) => {return <><div>child2 - {count} - {sex}</div></>
}
// 函数组件设置默认值的方式
Child2.defaultProps = {count: 18,sex:'女'
}class App extends Component {state = { name:'zs'}render() {return <><div>props传参</div><Child1 name={this.state.name} age={"19"}/><Child2 count={100} /></>}
}export default App

(3) 校验props接收传递值的数据类型

使用第三方包:prop-types 官网

prop-types

安装

npm install --save prop-types
yarn add prop-types --save 

常用的支持检测的数据类型

  optionalArray: PropTypes.array,optionalBigInt: PropTypes.bigint,optionalBool: PropTypes.bool,optionalFunc: PropTypes.func,optionalNumber: PropTypes.number,optionalObject: PropTypes.object,optionalString: PropTypes.string,optionalSymbol: PropTypes.symbol,optionalEnum: PropTypes.oneOf(['News', 'Photos']),optionalUnion: PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)]),requiredFunc: PropTypes.func.isRequired,requiredAny: PropTypes.any.isRequired,

使用

import React, { Component } from 'react'
// 1.直接解构
import {string,number,oneOfType} from 'prop-types';class Child1 extends Component {// 类组件检测数据类型的方式一static propTypes = {name:string,age:oneOfType([string,number]),}render() {const { name, age,sex } = this.propsreturn (<div>child1 - {name} - {age} - {sex}</div>);}
}
// 类组件检测数据类型的方式二
// Child1.propTypes = {
//     name:string,
//     age:number
// }const Child2 = ({ count,sex }) => {return <><div>child2 - {count} - {sex}</div></>
}
// 函数组件检测数据类型的方式
Child2.propTypes = {count:number
}class App extends Component {state = { name:'zs'}render() {return <><div>props传参</div><Child1 name={this.state.name} age={"19"}/><Child2 count={100} /></>}
}export default App

条件渲染

(一) 三目运算符

(1) 变量三目

通过state中的变量控制标签的显示与隐藏(相当于Vue中的v-if)

class TestState extends Component {constructor(){super()this.state = {show: false}}render() {const {show} = this.state;return (<>{/* 变量三目运算 */}{show ? <p>显示1</p>:null}</>);}
}

(2) style三目

通过state中的变量控制标签样式切换来控制标签的显示与隐藏(相当于Vue中的v-show)

class TestState extends Component {constructor(){super()this.state = {show: false}}render() {const {show} = this.state;return (<>{/* style三目运算 */}<p style={{display : show?"block":"none"}}>显示3</p></>);}
}

(3) class三目

通过state中的变量控制标签不同类名的样式切换来控制标签的显示与隐藏(相当于Vue中的v-show)

class TestState extends Component {constructor(){super()this.state = {show: false}}render() {const {show} = this.state;return (<>{/* class三目运算(通过切换类名实现) */}<p className={show?'show':'noshow'}>显示4</p></>);}
}
// 样式文件中:
.show {display: block;
}
.noshow {display: none;
}

(二) 短路运算符

通过短路运算符(&&)来控制标签的显示与隐藏(Vue中的v-if)

class TestState extends Component {constructor(){super()this.state = {show: false}}render() {const {show} = this.state;return (<>{/* 短路运算 */} {show && <p>显示2</p>}</>);}
}

循环渲染

通过数组的map方法的映射来进行标签内容的循环渲染

class TestState extends Component {constructor(){super()this.state = {list: [1,2,3,4,5]}}render() {const {show} = this.state;return (<>{/* 循环渲染 */}<ul>{list.map(item =><li key={item}>{item}</li>)}</ul></>);}
}

插槽

(1) 使用

父组件(在父组件的子组件标签内容中直接写要传递的内容(也可以是标签))

import React, { Component } from 'react'class App extends Component {render() {return <><div>React 插槽</div><Child1><h1>h1</h1></Child1><Child2><span>span1</span></Child2></>}
}
export default App

类组件接收(使用this.props中的children)

import React, { Component } from 'react'
// 类组件使用this.props中的children进行接收父组件的子组件上的标签
class Child1 extends Component {render() {return (<><div>子类组件 - {this.props.children}</div></>);}
}

函数组件接收(使用函数形参children)

import React from 'react'
// 函数组件使用函数形参children进行接收父组件的子组件上的标签
const Child2 = (props) => {return <><div>子函数组件 - {props.children}</div></>
}

(2) 具名插槽

数组形式
可以在父组件传递多个内容时使用数组形式,子组件中使用数组的索引让其使用在不同的位置

  • 父组件
import React, { Component } from 'react'class App extends Component {render() {return <><div>React 插槽</div><Child1><h1>h1</h1><h2>h2</h2></Child1><Child2><span>span1</span><span>span2</span></Child2></>}
}
export default App
  • 子类组件
class Child1 extends Component {render() {return (<><div>{this.props.children[0]} - 子类组件 - {this.props.children[1]}</div></>);}
}
  • 子函数组件
const Child2 = (props) => {return <><div>{props.children[0]} - 子函数组件 - {props.children[1]}</div></>
}

对象形式
可以在父组件传递多个内容时使用对象形式,子组件中使用数组的索引让其使用在不同的位置

  • 父组件
import React, { Component } from 'react'class App extends Component {render() {return <><div>React 插槽</div><Child1>{{h1: <h1>h1</h1>,h2: <h2>h2</h2>}}</Child1><Child2>{{span1: <span>children1</span>,span2: <span>children2</span>}}</Child2></>}
}
export default App
  • 子类组件
class Child1 extends Component {render() {return (<><div>{this.props.children.h1} - 子函数组件 - {this.props.children.h2}</div></>);}
}
  • 子函数组件
const Child2 = (props) => {return <><div>{props.children.span1} - 子函数组件 - {props.children.span2}</div></>
}

state

相当于Vue中的data(响应式数据) 只有类组件可以定义自己的状态(state)

定义state的两种方式

使用构造函数的构造器进行定义

class TestState extends Component {// constructor当类实例化的时候被调用constructor(){// 在constructor里面需要先调用super方式才能使用thissuper()this.state = {name:'zs'}}render() {// 方式一:// return (//     <>//     <div>count:{this.state.count}</div>//     </>// );// 方式二:解构const {count,name} = this.state;return (<><div>count:{count}</div><div>name:{name}</div></>);}
}

ES7 属性初始化器

class TestState extends Component {state = { count:10};render() {const {count,name} = this.state;return (<><div>count:{count}</div><div>name:{name}</div>{/* 添加属性的时候,如果使用了变量({}),不能用引号 */}<p title={this.state.title}>react</p></>);}
}

jsx中添加属性:(如果使用了变量({}),不能用引号)

<p title={this.state.title}>react</p>

setState

不能直接修改state的值,直接修改没有响应式

this.state.count = 10

setState里面有两个参数

  • 第一个参数:对象或函数
  • 第二个参数:回调函数

第一个参数可以是一个对象,这个对象会和state对象合并

this.setState({count:this.state.count+1,name:'ls'
})

当连续修改同一个变量的值,由于setState是异步的会同时执行,所以使用对象形式无法实现+1+1

this.setState({count:this.state.count+1,name:'ls'
})
this.setState({count:this.state.count+1,name:'ls'
})

第一个参数也可以是一个函数

如果一次的改动要基于前一次的值,用函数的写法(场景:上拉加载

this.setState((prevState)=>{return{ count:prevState.count+1}
})
this.setState((prevState)=>{return{ count:prevState.count+1}
})

如果想要省略大括号和return,需要加小括号

this.setState((prevState)=>({count:prevState.count+1
}))
// 此时打印,输出的是修改前的值
console.log(this.state.count);// 修改前的值

第二个参数:可选的回调函数,会在数据改变之后调用

this.setState({count:this.state.count+1,name:'ls'
},()=>{console.log(this.state.count);
})

实现:在数组list中添加一项:4

this.setState((prevState)=>({// 方式一:利用数组的concat方法// list:prevState.list.concat(4)// 方式二:利用拓展运算符list:[...prevState.list,4]
}))
console.log(this.state.count);
// 仅限于复杂数据类型
// 方式三:直接修改list,然后在合并
this.state.list.push(4)
this.setState({})

  • 18版本之后所有的setState都是异步的
  • 18版本之前(定时器、原生js是同步的)、合成事件和生命周期是异步的

解析state中的标签

类似于Vue中的v-html

state = { content:'<h1>v-html</h1>'
}
<div dangerouslySetInnerHTML={{__html:this.state.content}}></div>

事件的传参与this的指向

合成事件:事件名称要写成小驼峰(onClick)

<button onClick={this.handleClick}>btn</button>

this的指向

在类组件中直接写普通函数当事件处理函数的时候会出现this的指向不对的问题

改变this的指向的方式

直接内联地使用 this.xxx.bind(this)(不推荐)

bind函数会产生一个新函数,并且新函数会存在于内存中,会导致内存占用太高

<button onClick={this.handleClick.bind(this)}>btn</button> 

在constructor构造器里面使用 this.xxx = this.xxx.bind(this); (比较推荐,官网在用)

将bind产生的新函数存下来了,不会造成内存增加的问题

constructor() {super()this.handleClick = this.handleClick.bind(this)
}

使用箭头函数 (推荐)

箭头函数的this指向父级,既方便又不会增加内存

handleClick = () => {console.log(this.state.count);
}

事件传参

事件后面不要加括号,函数会自执行

<button onClick={this.handleClick()}>btn</button>

事件传参的方式

内联地使用 this.xxx.bind(this, 2)

bind可以改变this指向。会产生一个新函数,bind的第二个参数会作为新函数的第一个参数 bind函数是不会自动调用的

不推荐,会使得内存增加

class App extends Component {state = {count: 1}handleClick(n) {console.log(this.state.count, n);}render() {return (<><div>事件</div><button onClick={this.handleClick.bind(this, 2)}>btn</button></>);}
}

内联地使用 onClick={() => this.xxx(2)}

不是特别推荐, 用的最多的方式 每一个箭头函数都会指向不同的内存,也会使内存增加

class App extends Component {state = {count: 1}handleClick = (n,e) => {console.log(this.state.count, n,e);}render() {return (<><div>事件</div><button onClick={(e) => this.handleClick(2,e)}>btn</button> </>);}
}

使用柯里化函数

class App extends Component {state = {count: 1}handleClick = (n) => (e) => {console.log(this.state.count, n ,e);}render() {return (<><div>事件</div><button onClick={this.handleClick(2)}>btn</button>);}
}
fn = (n) => () => {
console.log(n);
};

理论上最推荐的方式

受控组件和非受控组件

表单输入绑定

它们都是特指表单控件

  • 受控组件让我们自己来控制的表单
  • 只要input有value属性和onChange事件,那么就是受控组件
import React, { Component } from 'react'class App extends Component {state = {iptvalue: 'zs'}changeIpt = (e) => {this.setState(() => {return {iptvalue: e.target.value}})}render() {return (<><h2>表单绑定</h2><input type="text" value={this.state.iptvalue} onChange={this.changeIpt} /><p>{this.state.iptvalue}</p></>);}
}export default App;

非受控组件

使用createRef去创建内存,获取dom节点,使用变量指向该内存,然后绑定到input上
非受控组件的默认值要用defaultValue

<input type="text" defaultValue='非受控组件' />
import React, { Component, createRef } from 'react'class App extends Component {constructor() {super()this.ipt = createRef()}state = {textValue: 'zs'}chageIpt = () => {console.log(this.ipt);}render() {return (<><h1>非受控组件</h1>{/* 非受控组件的默认值要用defaultValue */}<input type="text" ref={this.ipt} defaultValue='非受控组件' /><button onClick={this.chageIpt}>btn</button></>);}
}export default App;

使用场景:文件上传框(只读,不能去修改信息)

状态提升

就是兄弟组件间传参
实现方式:先使用子传父,在利用父传子实现兄弟组件间的传参

  • 父传子:在父组件的子组件标签上添加自定义属性,然后:
    如果是类组件则通过this.props.属性名进行接收
    如果是函数组件则通过函数参数props.属性名进行接收
  • 子传父:在父组件的子组件标签上添加自定义事件,然后:
    如果是类组件则通过this.props.自定义事件名调用父组件中的事件,并进行参数传递
    如果是函数组件通过函数参数props.自定义事件名调用父组件中的事件,并进行参数传递

类组件中

传值的子组件1

import React, { Component } from "react";class Child1 extends Component {
state = {count: 10,
};render() {return <div>child1组件</div>;
}componentDidMount() {this.props.onGetcount(this.state.count);
}
}export default Child1;

父组件

import React, { Component } from "react";import Child1 from "./Child1";
import Child2 from "./Child2";class App extends Component {
state = {num: null,
};fn = (c) => {// console.log("fn", c);this.setState({num: c,});
};render() {return (<><h2>状态提升</h2><Child1 onGetcount={this.fn} /><Child2 num={this.state.num} /></>);
}
}export default App;

接收的子组件2

import React, { Component } from "react";class Child2 extends Component {
render() {return <div>child2组件 - {this.props.num}</div>;
}
}export default Child2;

函数组件中

传值的子组件1

import React, { useState } from 'react'const Child1 = (props) => {const [age] = useState(20)const handleClick = () => {props.onGetNum(age)}return (<><h3>子组件1</h3><span>C1: {age}</span><button onClick={handleClick}>将age传递给父组件</button></>);
}export default Child1;

父组件

import React, { useState } from 'react'
import Child1 from './Child1';
import Child2 from './Child2';
const App = () => {const [count, setCount] = useState(0)const fn = (n) => {setCount(n)}return (<><h3>父组件</h3><span>Fcount: {count}</span><Child1 onGetNum={fn} /><Child2 count={count} /></>);
}export default App;

接收的子组件2

import React from 'react'const Child2 = (props) => {return (<><h3>子组件2</h3><span>{props.count}</span></>);
}export default Child2;

结束语

希望对您有一点点帮助,如有错误欢迎小伙伴指正。
👍点赞:您的赞赏是我前进的动力!
⭐收藏:您的支持我是创作的源泉!
✍评论:您的建议是我改进的良药!
一起加油!!!💪💪💪

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

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

相关文章

微服务SpringCloud教程——微服务是什么

微服务&#xff08;MicroServices&#xff09;最初是由 Martin Fowler 于 2014 年发表的论文《MicroServices》中提出的名词&#xff0c;它一经提出就成为了技术圈的热门话题。 微服务&#xff0c;我们可以从字面上去理解&#xff0c;即“微小的服务”&#xff0c;下面我们从“…

excel 生成sql技巧

"update 表名 set 字段名"&A2&" where 字段名"&B2&";"

【C语言进阶】程序环境和预处理

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C语言 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、程序的翻译环境和执行环境 二、详解编译和链接 2.1翻译环境 2.2编译的过…

现代控制理论

B站学习视频https://space.bilibili.com/230105574/channel/seriesdetail?sid1569601 一.引入状态-空间表达 &#xff08;本质上是使用一组向量的线性组合来表示整个系统任意物理量&#xff0c;也就是一个特征分解的过程&#xff09; 现代控制理论的基础是 状态-空间表达方…

Emacs之实现跨程序选中自动复制功能(一百一十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

贪心算法重点内容

贪心算法重点内容 4.1部分背包 按照单位重量的价值排序 4.2最小生成树 两种算法 4.3单源最短路径 4.4哈夫曼树

linux下lazarus开发ide里 BGRAControls控件库comboBox示例

下载开发工具 ftp://ftp.freepascal.org/pub/lazarus/releases/Lazarus%20Linux%20amd64%20DEB/Lazarus%202.2.6/https://sourceforge.net/projects/lazarus/files/Lazarus%20Linux%20amd64%20DEB/Lazarus%202.2.6/ sourceforge下载可能比较慢&#xff0c;选择 下载有问题&…

自守数 C语言实现

自守数 描述 自守数是指一个数的平方的尾数等于该数自身的自然数。例如&#xff1a;25^2 625&#xff0c;76^2 5776&#xff0c;9376^2 87909376。请求出n(包括n)以内的自守数的个数 数据范围&#xff1a; 1≤n≤10000 输入描述&#xff1a; int型整数 输出描述&#xf…

【Leetcode】54.螺旋矩阵

一、题目 1、题目描述 给你一个 m m m 行 n n n 列的矩阵 matrix,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例1: 输入:matrix =

AVFoudation - 音频播放

文章目录 简要说明音频播放代码实现多个播放器iOS 中的中断监听AVAudioSession 设置官方文档:https://developer.apple.com/av-foundation/ 简要说明 iOS 系统提供了一个可管理的音频环境(managed audio environment),通过音频会话(audio session)来实现。 AVAudioSess…

k8s: kubectl: logs: rotate 问题

https://kubernetes.io/docs/concepts/cluster-administration/logging/ 当kubenet存放container的日志满了的时候,会发生rotate,当rotate发生的时候,是由kubectl logs 这个命令可能会出现以下两个问题: https://github.com/kubernetes/kubernetes/issues/28369 这里说,当…

Git下载与安装

文章目录 一、Git下载二、Git安装1.双击下载好的安装包进行安装2.Next3.选择Git的安装目录(不要带有中文和空格)→Next4.Next5.Next6.Next7.Next8.Next9.Next10.Next11.Next12.Next13.Next14.Next15.Next16.Install17.等待安装18.Finish19.鼠标光标放到系统桌面右击看到如下图所…

DRS 迁移本地mysql 到华为云

准备工作&#xff1a; 源端的IP地址&#xff08;公网&#xff09;&#xff0c;用户明和密码。如果通过公网迁移&#xff0c;需要在安全组放通drs访问源端数据库的3306端口。目标端的IP地址&#xff0c;用户名和密码。 创建DRS迁移任务 创建迁移任务 登录华为云控制台。单击管…

chatGPT快问快答之linux uboot进阶

文章目录 Uboot引导移植Ubootlinux内核启动流程启动示例代码 Uboot引导 提示&#xff1a;完全不了解可以阅读之前的新手篇 ——Uboot介绍 U-Boot&#xff08;Universal Bootloader&#xff09;是一种开源的引导加载程序&#xff0c;用于启动嵌入式设备的操作系统。下面是一个…

华为eNSP:路由引入

一、拓扑图 二、路由器的配置 1、配置路由器的IP AR1&#xff1a; [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip add 1.1.1.1 24 [Huawei-GigabitEthernet0/0/0]qu AR2&#xff1a; [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip add 1.1.1.2 24 [Huaw…

K8S系统监控:使用Metrics Server和Prometheus

Kubernetes 也提供了类似的linux top的命令&#xff0c;就是 kubectl top&#xff0c;不过默认情况下这个命令不会生效&#xff0c;必须要安装一个插件 Metrics Server 才可以。 Metrics Server 是一个专门用来收集 Kubernetes 核心资源指标&#xff08;metrics&#xff09;的…

一文详解Spring Bean循环依赖

一、背景 有好几次线上发布老应用时&#xff0c;遭遇代码启动报错&#xff0c;具体错误如下&#xff1a; Caused by: org.springframework.beans.factory.BeanCurrentlyInCreationException: Error creating bean with name xxxManageFacadeImpl: Bean with name xxxManageFa…

linux网卡命名规则与修改方法

一.前言&#xff1a; 在早期的的操作系统中例如fedora13或者ubuntu15之前网卡命名的方式为eth0&#xff0c;eth1&#xff0c;eth2&#xff0c;属于biosdevname 命名规范。当然这是针对intel网卡的命名规则&#xff0c;对于realtek类型的网卡会命名为ens33。但是这个编号往往不一…

elevation mapping学习笔记1之Ubuntu18.04+ROS-melodic编译安装elevation mapping高程图及示例运行

文章目录 0 引言1 安装依赖1.1 grid map1.2 Eigen1.3 kindr1.4 Point Cloud Library (PCL) 2 编译和问题解决3 运行示例3.1 turtlesim3_waffle_demo3.2 simple_demo 和 Ground Truth Demo 0 引言 苏黎世开源的elevation mapping指的是苏黎世联邦理工学院&#xff08;ETH Zuric…

Redis学习 知识总结 一

Redis学习 知识总结 一 1 Redis初识1.1 Redis八大特性1.2 redis使用场景1.3 Docker安装redis 2 API的理解和使用2.1 通用命令2.2 字符串&#xff08;String&#xff09;类型2.3 哈希&#xff08;Hash&#xff09;类型2.4 有序列表&#xff08;list&#xff09;2.5 集合&#xf…