后端程序员入门react笔记（一）

  • 相关参考

react

首先，我们先大概了解一下什么是react以及react可以干什么。
React 是 Facebook 开源的一个用于构建用户界面的一款 JavaScript 库，主要用于构建 UI。

react的特点

  • 声明式编程
    react使用jsx进行渲染，这是一种类似html的语法，可以通过定义属性来描述要呈现的内容。
  • 组件化
  • react将应用程序分解为组件，每个组件都是一个独立的模块，可以独立的开发和测试，组件可以包含状态、属性、事件处理等程序。并且可以互相通信和交互。
  • 状态管理
    react提供了一个状态管理库Redux,用于管理应用程序的装填。Redux将应用程序的状态存储在单个状态树种，并提供了各种操作来修改状态
  • 虚拟dom
    react使用虚拟dom来跟踪应用程序状态，而不是实际DOM,这使得react能够快速响应用户输入，并且可以更高效的渲染
  • 社区支持
    react拥有庞大的社区支持，有许多可用的插件、库和工具，快速帮助开发人员构建和优化应用程序

基于组件：页面中部分内容
学习一次 随处使用
react-native

  • 安装react 创建功能
  • react 核心库 react-dom dom相关功能渲染功能

常见组件

以下是常见的React组件：

  • ReactDOM.render()：用于将React组件渲染到DOM中。
  • ReactDOM.createPortal()：用于创建一个将子组件渲染到指定容器中的React组件。
  • ReactDOM.Fragment()：用于将多个React元素包装在一个不可展开的元素中。
  • ReactDOM.StrictMode()：用于启用React的严格模式，使React在渲染过程中更严格地检查组件的依赖关系。
  • ReactDOM.createContext()：用于创建一个上下文（Context）对象，可以在组件中使用该上下文对象来获取共享的状态和数据。
  • ReactDOM.useContext()：用于在组件中使用上下文对象来获取共享的状态和数据。
  • ReactDOM.useState()：用于在组件中定义状态（state）并更新状态。
  • ReactDOM.useEffect()：用于在组件中定义副作用（side effects）并更新状态。
  • ReactDOM.useReducer()：用于在组件中定义一个reducer函数，该函数将处理状态更新的逻辑。
  • ReactDOM.useCallback()：用于在组件中定义一个回调函数，该函数将在组件第一次渲染时被调用，并返回一个缓存的函数，以避免每次渲染时都重新计算。
  • ReactDOM.useMemo()：用于在组件中定义一个memoized函数，该函数将在第一次调用时计算结果，并在之后的调用中缓存结果，以避免重复计算。
  • ReactDOM.useDebugValue()：用于在调试时向React堆栈中添加调试信息。
  • ReactDOM.createRef()：用于创建一个引用（ref），可以在组件中使用该引用来访问其DOM元素或子组件。
  • ReactDOM.forwardRef()：用于将一个React组件转发给另一个React组件，以使其可以访问父组件的props和refs。
  • ReactDOM.memo()：用于创建一个memoized函数，该函数将在第一次调用时计算结果，并在之后的调用中缓存结果，以避免重复计算。

箭头函数

在es6之后，出现了一种函数，叫箭头函数，它比普通函数更加简洁方便。我们来举一个简单的例子

//普通函数
const add=function (a,b){return a+b
}//箭头函数
const addNew=(a,b)=>{return a+b
}

箭头函数的特性

那么箭头函数和普通函数相比有哪些特性呢，我们来看看

  • 箭头函数没有this，当访问this的时候，会获取外部的this
  • 箭头函数没有自己的 arguments 对象
  • 箭头函数不能用作构造函数，当使用 new 调用时会出错。它们也没有 prototype 属性。
  • 箭头函数作为表达式的时候，=> 的优先级低于大多数运算符

npm

在了解react之前，我们还需要了解一些基础工具，比如npm，npm 全称是 node package manager,其实就是一个管理js编写的软件包的管理工具，可以下载，安装，升级，上传js软件包。
node.js内置了npm，所以只要安装了node.js，就可以使用npm。node.js的安装非常简单，官方地址下载就可以安装了。安装完毕后，使用npm install npm@latest -g命令将npm升级到最新版本。

npm镜像源配置

为了在国内尽快的下载js库，我们需要配置一下npm的镜像源，即从哪个源下载，这里我指定了华为，其他的还有腾讯，淘宝等镜像源。

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

npm配置解读

我们可以通过npm config list查看npm的相关配置项

$ npm config list
; "builtin" config from /usr/local/lib/node_modules/npm/npmrc
prefix = "/usr/local" 
; "user" config from /Users/zhangguofu/.npmrc
registry = "https://mirrors.huaweicloud.com/repository/npm/"
; node bin location = /usr/local/Cellar/node/21.5.0/bin/node
; node version = v21.5.0
; npm local prefix = /Users/zhangguofu/website/react
; npm version = 10.2.4
; Run `npm config ls -l` to show all defaults.
  1. prefix：指定npm的安装路径。
  2. registry：设置JavaScript库的镜像源。在这个例子中，设置为"https://mirrors.huaweicloud.com/repository/npm/"。
  3. node bin location：指定Node.js二进制文件的位置。
  4. node version：表示已安装的Node.js版本。
  5. npm local prefix：指定npm的本地安装路径。即我下载的js组件的位置
  6. npm version：表示已安装的npm版本。

react的安装

接下来我们就开始讲react的安装

npm安装

我们前面安装了npm，下面我们通过npm来下载react，我执行命令npm i react react-dom，那么在我的npm local prefix路径下，就会生成一个node_modules的目录。注意这里面，react.js可以说是我们的核心文件，用来执行业务逻辑和数据，但是数据完成之后还是要需要渲染成dom才能被用户看到，那么这些数据怎么样才能转换成真正的domn呢，这就用到了react-dom。
在这里插入图片描述
在这里插入图片描述

  • hello react
    接下来我用一段简单的代码先来演示一下react
<body>
<div id="root"></div>
</body>
<!--引入react.js-->
<script src="../node_modules/react/umd/react.development.js"></script>
<!--引入react-dom.js-->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script>//这个方法需要三个参数 type prop  childrenconst title=  React.createElement('div',null,'hello world')// 渲染到root里面ReactDOM.render(title,document.getElementById("root"));
</script>

脚手架安装

我们知道，脚手架是开发现代web应用的必备，比如webpack babel eslint等工具辅助项目开发，为了让我们更专注的开发业务，减少配置项目，我们使用脚手架来安装和使用react

  • 执行命令npx create-react-app my-app即可创建一个my-app的目录，其中npx是npm5.2版本中的一个命令，create-react-app是脚手架的名字。my-app 就是我们的项目了。
$ ls
README.md         node_modules      package-lock.json package.json      public            src
  • 我们进入项目目录并执行npm start即可启动项目，默认是3000端口,接下来我们只需使用三行代码就可以实现一个hello react
//导入文件
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<div>hello react </div>,document.getElementById('root'))

JSX

我们在上面代码可以看到，在js里面我们竟然可以直接写html，而且还不报错，其实这个有趣的标签语法既不是字符串也不是 HTML，而是JSX，它是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。
那我们可能会很奇怪，为什么js里面的写JSX不会报错呢？其实这就是脚手架的功劳，脚手架已经帮我们下载安装了三个包

  • @babel/cli
  • @babel/core
  • @babel/preset-react
    这个babel包负责将JSX编译为react可执行的文本，举个例子const h1 = <h1>this is a H1 Tag</h1>经过编译后会变成const h1 = React.createElement("h1", null, "this is a H1 Tag");，接下来我们看看JSX的功能。

一般使用

//导入文件
import React from 'react'
import ReactDOM from 'react-dom'
// 注意 dom的属性命名必须是小驼峰  整个jsx推荐用小括号包裹  dom如果没有子节点,可以省略闭合标签
const content=(<div className='content'>hello react <span/> </div>)
ReactDOM.render(content,document.getElementById('root'))

我们来对比一下渲染后的dom

<div id="root"><div class="content">hello react <span></span> </div></div>

js变量的嵌入

const myName='张三'
const content=(<div className='content'>{myName}</div>)

三元表达式

const age=19
const content=(<div className='content'><li>是否成年:{age>18?'成年':'未成年'}</li></div>
)

函数表达式

const func=()=>{return <div>i am a function</div>
}
const content=<h1>{func()}</h1>

条件和逻辑运算符

const age=20
const func=()=>{//逻辑运算return age >18 && <div>i am a function</div>
}const func2=()=>{if (age>18){return <div>i am {age}</div>}
}
const content=<h1>{func()}{func2()}</h1>

列表渲染

const heros=[{name:'batman',id:20},{name:'x-police',id:21},
]
const content=<h1>{heros.map(item=><li key={item.id}>{item.name}</li>)}</h1>

引入css文件

可以通过类名或者行内样式写样式

import './css/index.css'
const content=<div><h1 style={{color:"red"}}>i am h1</h1><h2 className='tag2'>i am h2</h2>
</div>

react的组件

组件是react的一等公民，你的每一个业务，可能都是多个组件拼装起来的。每个组件可能代表一个功能。组件实现了代码之间的独立性，复用性和耦合性。
组件有两种实现方式，一种是以函数形式实现，一种是以class的形式实现。

函数创建组件

接下来我们看一下函数实现的组件长什么样子,其中我们要注意，函数的名称必须大写，为什么？我们写普通的jsx，可能会有div ul 这些，那么babel如何知道你写的这个是普通的jsx还是组件？就是看第一个字母是否大写，另一方面，组件必须有返回值，也可以返回null

function GetName() {return <div>i am x</div>
}
const content=<GetName/>
  • 箭头函数创建组件
    这里遇到一个小插曲，浏览器一直报Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17,这里我们一下改一下rendder的方式
//导入文件
import React from 'react'
import ReactDOM from 'react-dom/client'
import './css/index.css'
const GetName=()=> {return <div>i am x</div>
}
const content=<GetName/>
const root= ReactDOM.createRoot(document.getElementById('root'))
root.render(content)

类创建组件

其实对于一个后端人员来说，class对我们来说实在太熟西了。但是这里需要有两个地方注意，一个是class必须继承自父类React.Component,第二是必须提供render方法，且该方法必须有返回值，我们举例看一下

class Hello extends React.Component{render() {return <div>i am class hello</div>}
}
const content=<Hello/>

那么我们也看到了，既然可以使用class创建组件，那么我们不可能将很多个class堆在一个js文件中，下面我们看怎么组件抽离

组件抽离

组件抽离其实很简单，就是注意两点，一是js文件中导入react库，第二是导出即可export，我们新建一个hello.js的文件,

import React  from "react";
class Hello extends React.Component {render(){return <div>i am hello </div>}
}
//导出组件
export default Hello;
  • 文件中引入
import Hello from './Hello'
const content=<Hello/>

react事件处理

我们知道，在js里面有很多事件
在这里插入图片描述
那么react里面是怎么绑定事件的呢？其实和js很像，就是这样的形式on+事件名称={()=>{}}，但是注意一点，事件名称必须是驼峰命名，比如我们绑定一个点击事件

class Hello extends React.Component {Haha(){alert("haha");}render(){return <button onClick={this.Haha}>i am hello </button>}
}

合成事件

事件可以通过合成事件进行实例传递，比如我们想调用浏览器原生事件，因为原生事件对所有浏览器都是兼容的。那么我们怎么使用这些原生事件呢，我们举个例子

class Hello extends React.Component {Haha(e){//禁止跳转e.preventDefault();}render(){return <a href='https://www.acurd.com' onClick={this.Haha}>i am hello </a>}
}

state

我们前面说过，react是有状态管理的，通过state和setState来配合完成，但是函数组件是没有状态的。而类组件才有状态，为什么？很简单，因为class里面可以定义自己的属性，修改状态是通过this指向。函数明显不能实现这些功能。比如我们现在来定义一个

class Hello extends React.Component {//利用构造函数完成state初始化// constructor(props){//     super(props);//     this.state={//         name:'x',//         age:18//     }// }//简洁化state初始化state={name:'x',age:18}render() {return (<ul><li>name:{this.state.name}</li><li>age:{this.state.age}</li></ul>)}
}
}
  • 我们怎么让数据动起来呢，这里就用到了setState方法,注意，setState里面是一个对象，想要修改哪个属性就修改哪个属性。
    render() {return (<ul><li>name:{this.state.name}</li><li>age:{this.state.age}</li><button onClick={()=>{this.setState({age:this.state.age+1})}}>点我加一岁</button></ul>)}
  • 那么我们能否把 onClick方法提出来呢，这个当然是可以的，我们前面就做过了，如果我们做一写业务，逻辑处理自然是没有问题，但是如果想要改state，就得先绑定state,我们来看看
    ChangeAge(){this.setState({age:this.state.age+1})}render() {return (<ul><li>name:{this.state.name}</li><li>age:{this.state.age}</li><button onClick={this.ChangeAge}>点我加一岁</button></ul>)}
  • 呃，报错了Uncaught TypeError: Cannot read properties of undefined (reading 'setState')，这个this可不是onClick的this，而是 this.setState的this,为啥函数内部的this是undefined，其实这是babel编译后的结果，babel是在use strict模式下编译的，不允许this指向函数以外的对象，那么this只能指向undefined。

this的指向问题

好了，我们说了函数内部的this是undefined，也解释了原因，那么我们怎么使用到外部的this呢。

  • 利用箭头函数去找外面的this
    render() {return (<ul><li>name:{this.state.name}</li><li>age:{this.state.age}</li><button onClick={()=>this.ChangeAge()}>点我加一岁</button></ul>)}

或者我们直接把函数定义为箭头函数

    ChangeAge=()=>{this.setState({age:this.state.age+1})}
  • 第二种方法就是在构造函数中将class的this绑定到函数的this上面
    //利用构造函数完成state初始化constructor(props){super(props);this.state={name:'x',age:18}this.ChangeAge=this.ChangeAge.bind(this)}

props

props是什么东西？它类似于你在声明对象的时候，给对象添加的属性,它具有以下特性

  • 传递数据，props可以用于向子组件传递数据，这些数据可能是父组件的状态也可能是其他兄弟组件的状态。子组件获取到数据更新自己的状态
  • 外部控制，通过props,父组件可以对子组件进行控制，例如设置初始状态，或者传递回调函数，这种控制方式让react组件之间可以具有更好的互动性和协作性。
  • 属性约束：props是只读的，子组件不能修改父组件传过来的数据。

我们举个例子看一下

const content=<Hello name='张三' age='18' />
  • 那么我们在使用的使用只需要读取到就行了
		   <ul><li>name:{this.props.name}</li><li>age:{this.props.age}</li></ul>
  • 或者一次性从props里面取出来
 render() {const {name,age} = this.propsreturn (<ul><li>name:{name}</li><li>age:{age}</li></ul>)}
  • 展开运算符的用法
//展开符
const arr=[1,2,3,4,5,6,7,8,9,10]
const arr2=[11,21,13]
console.log(...arr);
//合并数组
let arr3=[...arr,...arr2]
console.log(arr3);
//展开对象
let obj={name:'张三',age:18,sex:'男'
}
//展开对象需要用花括号表示对象
console.log({...obj});
//给对象添加属性
let obj2={...obj,addr:"xxxx"}
console.log(obj2);
  • 既然对象可以展开，那么我们就可以利用展开符批量添加props
let p={name:'张三1',age:'182',sex:'男'
}
const content=<Hello {...p} ></Hello>
  • props限制
    我们还可以对props进行限制，比如类型，是否必填等，追忆，这种方式对class 和函数都是适用的
//对类型进行限制
Hello.propTypes={name:PropTypes.string.isRequired,sex:PropTypes.string.isRequired,age:PropTypes.number.isRequired,speak:PropTypes.func.isRequired
}
//初始默认值
Hello.defaultProps={name:'张三',sex:'男',age:18
}
  • props的简写方式
    我们也可以以对象的属性的形式来限制，比如下面这种，写在类的里面，这对我们后端程序员来说就熟悉的多了
    static propTypes = {name:PropTypes.string,age:PropTypes.number,sex:PropTypes.string}static defaultProps={name:'李四',sex:'女',age:20}
  • 函数中怎么使用props
function Speak(props){let {age, name, sex}=propsreturn (<div><ul><li>age:{age}</li><li>name:{name}</li><li>sex:{sex}</li></ul></div>)
}
Speak.propTypes={age:PropTypes.number,name:PropTypes.string,sex:PropTypes.string
}const content=<Speak {...p}  ></Speak>

refs与事件处理

  • 组件内的标签可以通过ref打标识，react就是通过ref识别到对应的元素，来完成对元素的操作。
class Hello extends React.Component {Msg=()=>{//input1 就是ref=input1指定的那个domlet msg=this.refs.input2.value;alert(msg);}render() {return (<ul><li><input type="text" ref='input1' placeholder='输入数据'/></li><li><input type="text" ref='input2' placeholder='输入数据'/></li><button onClick={this.Msg} >点击提示数据</button></ul>)}
}
  • 但是上面的ref的值其实是一个字符串，字符串效率不高，第二方面不方便识别，可能在使用中不小心使用错误。接下来我们看使用回调怎么使用，这种写法相当于通过回调函数给class赋值了一个属性。
    Msg=()=>{alert(this.input1.value)}render() {return (<ul><li><input type="text" ref={(dom)=>{this.input1=dom}} placeholder='输入数据'/></li><button onClick={this.Msg} >点击提示数据</button></ul>)}
  • 当然了，能用箭头函数内嵌的，我们肯定可以提到外面来使用，e就是当前dom对象
    setInput=(e)=>{this.input1=e}
  • 但是，这种回调似乎没有字符串写起来方便啊，怎么办？react又做了更新，既然原来你是在直接声明了字符串，容易出问题，那么这样，我先让你声明ref,让后你只需要像使用字符串一样，把你声明的ref赋值给ref就可以了。比如下面
    input1=React.createRef()Msg=()=>{alert(this.input1.current.value)}
  • 如果发生事件的元素恰好就是我们要操作的元素，我们就可以使用对象e作为参数来处理，比如下面
class Hello extends React.Component {Msg = (e) => {alert(e.target.value)}render() {return (<li><input onBlur={this.Msg} type="text" ref={this.input1} placeholder='输入数据'/></li>)}
}

class中的constructor函数的使用场景

  • 通过this.state初始化内部的state
  • 为时间处理函数绑定实例

事件处理

  • 通过on属性指定事件处理函数，合成事件是为了更好的兼容
  • 委托给了最外层的元素，比如div 为了高效
  • 通过event.target活得到dom对象。

收集表单数据

  • 非受控组件
    所有输入类的dom ，如果是现用现取，则属于非受控组件。主动获取值
  • 受控组件
    由事件去驱动修改状态或者数据，这些就是受控组件

高阶函数

  • 高阶函数：如果函数接收或者返回值有一个是函数类型，那么该函数是高阶函数。
    比如这种用户名: <input onChange={this.setData} type="text"/>,其实就是onChange这个事件执行了setData()的这个方法，返回了一个操作指令，所以，如果你传了参数，必须返回一个函数给onChange
    setData=(dataType)=>{return (e)=>{this.setState({[dataType]:e.target.value})}}getData=(e)=>{e.preventDefault()let {name,pwd}=this.stateconsole.log(name,pwd)}render() {return (<form onSubmit={this.getData}>用户名: <input onChange={this.setData("name")} type="text"/>pwd: <input  onChange={this.setData("pwd")} type="text"/><button>提交</button></form>)}
  • 函数的柯里化：继续通过调用高阶函数的返回的函数，实现多次接收参数最后统一处理函数的编码方式。其实就是一次调用多个函数，将一组数据通过多个函数的处理而得到结果
let sum = (a) => {return (b) => {return (c) => {return a + b + c}}
}
console.log(sum(1)(2)(3));

相关参考

官方文档
技术栈为：React + Hook + React-router-v6 + Mobx + AntD

尚硅谷react分章

尚硅谷React
源码地址：https://gitee.com/react-cp/react-pc-code
React基础讲义: https://www.yuque.com/fechaichai/qeamqf/xbai87
React和Mobx讲义: https://www.yuque.com/fechaichai/qeamqf/apomum
ReactPc项目讲义: https://www.yuque.com/fechaichai/tzzlh1

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

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

相关文章

前端框架学习 Vue(3)vue生命周期,钩子函数,工程化开发脚手架CLI,组件化开发,组件分类

前端框架学习 Vue(3)vue生命周期,钩子函数,工程化开发脚手架CLI,组件化开发,组件分类

Vue 生命周期 和生命周期的四个阶段 Vue生命周期:一个Vue实例从创建 到 销毁 的整个过程 生命周期四个阶段 :(1)创建 (2)挂载 (3)更新 (4)销毁 Vue生命周期函数(钩子函数) Vue生命周期过程中,会自动运行一些函数,被称为[生命周期钩子] ->让开发者可以在[特定阶段] 运行自…
阅读更多...
视频美颜SDK开发指南：从入门到精通的技术实践

视频美颜SDK开发指南：从入门到精通的技术实践

美颜SDK是一种强大的工具&#xff0c;它不仅仅可以让用户在实时视频中获得光滑的肌肤和自然的妆容&#xff0c;从简单的滤镜到复杂的人脸识别&#xff0c;美颜SDK涵盖了广泛的技术领域。 一、美颜SDK的基本原理 美颜SDK包括图像处理、人脸检测和识别、滤镜应用等方面。掌握这些…
阅读更多...
vue2 el-table新增行内删除行内（两种写法）里面第一个是树组件，第二个是数字组件，第一个数组件只能勾选最后一个节点

vue2 el-table新增行内删除行内（两种写法）里面第一个是树组件，第二个是数字组件，第一个数组件只能勾选最后一个节点

第一种 <template><div class"time_table"><div style"margin-bottom: 10px"><el-button click"addRowFn">新增</el-button></div><el-form ref"costForm" :model"formData">&l…
阅读更多...
uniapp中使用EelementPlus

uniapp中使用EelementPlus

uniapp的强大是非常震撼的&#xff0c;一套代码可以编写到十几个平台。这个可以在官网上进行查询uni-app官网。主要还是开发小型的软件系统&#xff0c;使用起来非常的方便、快捷、高效。 uniapp中有很多自带的UI&#xff0c;在创建项目的时候&#xff0c;就可以自由选择。而E…
阅读更多...
FPGA高端项目：IMX327 MIPI 视频解码 USB3.0 UVC 输出，提供FPGA开发板+2套工程源码+技术支持

FPGA高端项目：IMX327 MIPI 视频解码 USB3.0 UVC 输出，提供FPGA开发板+2套工程源码+技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 MIPI 编解码方案 3、本 MIPI CSI-RX IP 介绍4、个人 FPGA高端图像处理开发板简介5、详细设计方案设计原理框图IMX327 及其配置MIPI CSI RX图像 ISP 处理图像缓存UVC 时序USB3.0输出架构 6、vivado工程详解FPGA逻辑设计 7、工…
阅读更多...
16.docker删除redis缓存数据、redis常用基本命令

16.docker删除redis缓存数据、redis常用基本命令

1.进入redis容器内部 &#xff08;1&#xff09;筛选过滤出redis容器 docker ps | grep "redis"&#xff08;2&#xff09;进入redis容器 #说明&#xff1a;d24为redis容器iddocker exec -it d24 /bin/bash2.登陆redis (1) 进入redis命令行界面 redis-cli说明&a…
阅读更多...
Java并发之synchronized详解

Java并发之synchronized详解

☆* o(≧▽≦)o *☆嗨~我是小奥&#x1f379; &#x1f4c4;&#x1f4c4;&#x1f4c4;个人博客&#xff1a;小奥的博客 &#x1f4c4;&#x1f4c4;&#x1f4c4;CSDN&#xff1a;个人CSDN &#x1f4d9;&#x1f4d9;&#x1f4d9;Github&#xff1a;传送门 &#x1f4c5;&a…
阅读更多...
ensp实验合集（二）

ensp实验合集（二）

实验6 VLAN划分....................................................................... - 30 - 实验7 路由器调试及常用命令使用........................................ - 42 - 实验8 配置静态路由器............................................................…
阅读更多...
R语言学习case10：ggplot基础画图Parallel Coordinate Plot 平行坐标图

R语言学习case10：ggplot基础画图Parallel Coordinate Plot 平行坐标图

step1: 导入ggplot2库文件 library(ggplot2)step2&#xff1a;带入自带的iris数据集 iris <- datasets::irisstep3&#xff1a;查看数据信息 dim(iris)维度为 [150,5] head(iris)查看数据前6行的信息 step4&#xff1a;利用ggplot工具包绘图 plot5 <- ggparcoord(…
阅读更多...
如何从 iPhone 上恢复永久删除的照片

如何从 iPhone 上恢复永久删除的照片

您的 iPhone 上缺少照片吗&#xff1f;讽刺的是&#xff0c;iPhone 的许多高级功能可能正是这个问题如此普遍的原因。幸运的是&#xff0c;还有很多方法可以从 iPhone 恢复已删除的照片&#xff0c;具体取决于您设备的设置方式。 本文涵盖了所有这些内容。该过程根据您的具体情…
阅读更多...
Oracle12c之Sqlplus命令行窗口基本使用

Oracle12c之Sqlplus命令行窗口基本使用

Oracle12c之Sqlplus命令行窗口基本使用 文章目录 Oracle12c之Sqlplus命令行窗口基本使用1. 连接1. 超级用户2. 普通用户1. 创建普通用2. 连接 2. 修改用户连接数1. 查看默认连接最多用户数1. PL/SQL developer中查看2. Sqlplus中查看 2. 查看目前已经连接的用户数3. 修改用户连…
阅读更多...
unordered_map和unordered_set

unordered_map和unordered_set

目录 一、unordered_map 1.1、unordered_map的特点 1.2、unordered_map和map的区别 二、unordered_set 2.1、unordered_set的特点 2.2、unordered_set和set的区别 三、哈系桶的改造 3.1 结构设置 3.2 构造函数和析构函数 3.3 数据插入 3.4 数据查找 3.5 数据删除 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023