React基础

目录

 

TODO1

React概述

React的使用

React脚手架的使用

全局安装

npx安装

 在脚手架中使用React

 JSX

1. JSX的基本使用

1.1 为什么用JSX

1.2 JSX简介

1.3 使用步骤

1.4 脚手架中能用JSX

1.5 注意点

2. 在JSX中使用JavaScript表达式

2.1 嵌入js表达式

2.2 注意点

3.JSX的条件渲染

 4.JSX的列表渲染

5.JSX的样式处理

5.1 行内样式 style

5.2 类名 className

TODO2

组件

1.组件介绍

2.组件的两种创建方式

2.1 使用函数创建组件

2.2 使用类创建组件

 2.3 将组件抽离为单独的js文件

 

事件处理

1.事件绑定

2.事件对象

 3.有状态组件和无状态组件

4.state和setState（）

4.1 state的基本使用

4.2 setState修改状态

 4.3 从JSX中抽离事件处理程序

this指向

1.箭头函数

2.Function.prototype.bind()

3.class的实例方法

4.总结

表单处理

1.受控组件

2.非受控组件

TODO3

组件通讯

1.组件通讯的定义

2.组件通讯的三种方式

props

props深入

Context

 

TODO1

React概述

1.是用于构建用户界面的JavaScript库

2.特点： 声明式 基于组件 学习一次随处使用

  ①声明式 只需要描述UI看起来是什么样 react负责渲染并在数据变化时更新

  ②组件 表示页面中的部门内容  组合复用多个组件可以实现完整的页面功能 （最重要）

  ③学习一次，随处使用 web应用  移动端原生应用 虚拟现实应用均可使用

3.推荐使用脚手架使用react

React的使用

//引入react和react-dom两个js文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script> //创建react元素//参数一 元素名称 参数二 元素属性 参数三 元素的子节点const title = React.createElement('h1',null,'hello react')//  const title = React.createElement(//     'p',//     { title: '我是标题',id:'p1'},//      'hello react'//      React.createElement('span',null,'我是span节点')//      )//渲染react元素  （仅针对web开发）//参数一 要渲染的react元素 参数二 挂载点-》页面中指定的位置ReactDOM.render(title,document.getElementById('root'))

 

React脚手架的使用

全局安装脚手架和npx安装脚手架的区别

 

全局安装

React脚手架的使用

npm start：执行开发模式，运行该项目

npm run build：执行生产模式，打包该项目

npm test：执行测试模式，测试该项目

npm run eject：将webpack相关文件暴露出来(React设置webpack文件隐藏

633d1364aad842f79f7aefe542639aa9.png

npx安装

npx create-react-app 是固定命令，create-react-app是React脚手架的名称

npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉

不需要进行全局安装（但是我已经安装完了··

初始化项目

npx create-react-app my-app

启动项目

在项目的根目录下执行**  先cd项目

npm start

 在脚手架中使用React

脚手架能够帮助我们自动刷新页面

//1.导入react和react-dom两个包（非script标签导入）使用es6中的模块化语法
import React from 'react'
import ReactDOM from 'react-dom'//2. 调用React.createElement()方法创建react元素
const title = React.createElement('p',null,'hello react')//3. 调用ReactDOM.render()方法渲染react元素到页面中
ReactDOM.render(title,document.getElementById('')  //挂载点

脚手架文件介绍 

脚手架文件介绍

 JSX

1. JSX的基本使用

1.1 为什么用JSX

React.createElement（）过于繁琐不简洁  -》和用模板字符串一样

1.2 JSX简介

1.JavaScript XML 表示在JavaScript中写HTML格式的代码 

2.声明式语法更加直观 开发效率高 学习成本低

3.是React的核心内容 完全利用js语言自身的能力来编写UI 

1.3 使用步骤

//1.使用JSX语法创建 React元素
const title =<h1> hello jsx</h1>//2.使用ReactDOM.render()方法渲染react元素到页面中
ReactDOM.render(title,root)

1.4 脚手架中能用JSX

1.JSX是ECMAScript的扩展

2.需要使用babel编译处理才能在浏览器环境中使用 （脚手架中已有相关配置）

3.编译JSX语法的包为：@babel/preset-react

1.5 注意点

1.元素的属性名用驼峰命名法

2.特殊属性名 class->className  for->htmlFor tabindex->tabIndex

3.没有子节点的React元素可以用/>结束

<span>hello react</span>hello react</span>

4.使用（）包裹JSX （结构清晰 避免JS自动插入分号陷阱） 

const div=(
<div>hello jsx</div>
)

2. 在JSX中使用JavaScript表达式

2.1 嵌入js表达式

1.数据存储在js中

2.语法：{JavaScript}表达式

const name ='cc'
const div ={<div>hello {name}</div>
}

2.2 注意点

1.单大括号中可以使用任意的JavaScript表达式

2.JSX自身也是JavaScript表达式

const sayHi=() => 'Hi'const title =(<h1>可以使用任意的函数表达式</h1><span>{1}</span><span>{'a'}</span><span>{1+2}</span><span>{3>5?1:0}</span><span>{sayHi()}</span>
)const h1=<h1>cc</h1>
const div=(<div> JSX自身也是js表达式 {h1} </div>
)

3.js中的对象一般只会出现在style属性

4.{}中不能出现语句

3.JSX的条件渲染

1.场景：loading效果

2.条件渲染 根据条件渲染特定的jsx结构

3.可以使用if/else或三元运算符或逻辑与运算符实现

//if elseconst loadData=() =>{if(isLoading){return <div>数据加载中 请稍后 </div>}return (<div>数据加载完成，这里显示的是数据</div>)}const div=(<div>{loadData()}</div>)//三元表达式
const loadData =() =>{
return isLoading ?(<div>数据加载中</div>) :(<div>数据加载完成，这里显示的是数据</div>)
}//逻辑与运算符 --适合要么展示 要么隐藏
const loadData=() =>{return isLoading &&( <div> loading</div>)
}
const div=(<div>{loadData()}</div>)

 4.JSX的列表渲染

1.要渲染一组数据  应该使用map（）方法

2.渲染列表时要加key属性 key属性的值要保证唯一-id

3.map（）遍历谁  就给谁加key属性

4.避免使用索引号（索引号会发生改变）

const targets =[{id:1,name:'react基础'}，{id:2,name:'react进阶'},{id:3,name:'git+移动端开发+模块化'},
]const list =(<ul>{targets.map(item=> <li key={item.id>{item.name}</div>)}</ul>
)

5.JSX的样式处理

5.1 行内样式 style

//看起来像双括号 但实际上不是 外侧的表示嵌入对象 
<h1 style={{color:'red',backgroundColor: 'skyblue'}}>jsx样式处理
</h1>

5.2 类名 className

<h1 className="title">jsx样式处理
</h1>//要注意引入css文件
import 'index.css'

TODO2

组件

1.组件介绍

  1. 使用react就是在使用组件
  2. 组件表示页面中的部分功能
  3. 组合多个租金按能实现完整的页面
  4. 特点：可复用、独立、可组合

2.组件的两种创建方式

2.1 使用函数创建组件

函数组件：使用js的函数（或箭头函数）创建的组件

//函数名称必须以大写字母开头
function Hello() {return (<div>函数组件是必须有返回值的，表示该组件的结构，返回值为null表示不渲染任何结构</div>
)
}//渲染函数组件 -》用函数名作为组件标签名 
//组件名要大写的原因是 react据此区分普通组件和 react元素
//组件标签名 可以是单标签 也可以是双标签 //箭头函数创建组件 
const Hello =() => (<div>函数组件</div>)ReactDOM.render(<Hello />,root)

2.2 使用类创建组件

类组件：使用ES6的class创建的组件

  • 类名称也必须以大写字母开头
  • 类组件应该继承 React.Component父类，从而可以使用父类提供的方法或属性
  • 类组件必须提供render（）方法
  • render（）方法必须有返回值 表示该组件的结构
//类名必须用大写字母开头
//继承React.Component父类
class Hello extends React.Component{
//必须提供render()方法render() {
//必须有返回值 表示该组件的结构return (<div>类组件</div>)}
}
ReactDOM.render(</Hello>,root)

 2.3 将组件抽离为单独的js文件

每个组件放到单独的js文件中

  • 创建Cc.js（组件的js文件）
  • 在Cc.js中导入React
  • 创建组件（函数或类）
  • 在Cc.js中导出该组件
  • 在index.js（要使用这个组件的文件）中导入组件
  • 渲染组件
//Cc.js
import React from 'react'
class Cc extends React.Component{render() {return (<div> 啊啊啊啊</div>)}
}
//导出组件
export default Cc//index.js
//导入组件
import Cc from '路径'
//渲染导入的组件
ReactDOM.render(<Cc />, document.getElementById('root'))

事件处理

1.事件绑定

  • 与DOM事件绑定语法类似
  • on+事件名称={事件处理程序} //驼峰命名法
  • 如果是类组件绑定 用this. 如果是函数组件绑定 直接写函数名字即可
//类创建
class App extends React.Component{handleClick(){console.log('类组件中的事件绑定')}render(){return(<button  onClick={this.handleClick}> 点了会发生啥？</button>)}
}//函数
function App() {function handleClick(){console.log('函数组件中的事件绑定')
}return(<button onClick={handleClick}>点</button>
)
}//渲染组件
ReactDOM.render(<App />,document.getElementById('root'))

 

2.事件对象

通过事件处理程序的参数获取到事件对象

React中的事件对象叫合成事件（对象）

合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题（了解即可）

class App extends React.Component{
handleClick(e){
e.preventDefault()
}
render(){return(<a href="" onClick={this.handleClick}>我没加链接</a>)
}
}
//渲染组件
ReactDOM.render(<App/>,document.getElementById('root'))

 3.有状态组件和无状态组件

状态 state即数据

  • 函数组件叫做无状态组件 只负责数据展示（静态）
  • 类组件叫做有状态组件 负责更新UI （动态）

4.state和setState（）

4.1 state的基本使用

  • state是组件内部的私有数据，只能在组件内部使用
  • state的值是对象 表示一个组件中可以有多个数据

如何使用state

class Cc extends React.Component {//es6 class语法constructor(){super() //必须有 是es6的要求//初始化statethis.state ={count :0}
}//简洁版 实验性的public class fields语法
state = {count :0}render(){return (<div>有组件状态</div>
)
}
}

①super()函数用于访问和调用一个对象上的父对象上的函数

②在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。
super关键字也可以调用父对象上的函数。

③ES6 class语法拯救世界了吗 为什么要用它（？）

4.2 setState修改状态

  • 状态可以改变
  • this.setState({要修改的数据})
  • 不要直接修改state中的值
  • setState（） 作用 1.修改state 2.更新UI -》数据驱动视图
this.setState({count:this.state.count + 1
})//错误的
this.state.count += 1

 4.3 从JSX中抽离事件处理程序

如果JSX中有过多的js逻辑代码 会显得很混乱 

   将逻辑抽离到单独的方法中，保证结构的清晰 

但是会出现事件处理程序中的this的值为undefined的情况

  希望this指向组件实例（render方法中的this即为组件实例）

       组件实例本质上就是一个状态集合（或一个对象）

 

this指向

1.箭头函数

①箭头函数自身不绑定this

②render方法中的this为组件实例，可以获取到setState（）

箭头函数中的this指向

class Cc extends React.Component{onIncrement(){this.setState({ })
}
render(){
//箭头函数中的this指向外部环境，此处为：render（） 方法return (<button onClick={() => this.onIncrement()}></button>
)
}
}

2.Function.prototype.bind()

class Cc extends React.Component{constructor() {super()this.onIncrement = this.onIncrement.bind(this)
}
//省略onIncrement
render(){return (<button onClick={this.onIncrement()}></button>
)
}
}

3.class的实例方法

①利用箭头函数形式的class实例方法

②该语法是实验性语法 但是由于babel的存在可以直接用（编译JSX的语法包）

class Cc extends React.Component{onIncrement =() =>{this.setState({...})
}
render(){return (<button onClick={this.onIncrement()}></button>
)
}
}

4.总结

推荐使用的顺序  class的实例方法>箭头函数>bind 

表单处理

1.受控组件

推荐使用受控组件来处理表单

值受到React控制的表单元素

  • HTML的表单元素是可输入的 有自己的可变状态
  • React中的可变状态通常保存在State中，并且只能通过setState（）方法获取

二者冲突  所以 React把state与表单元素值value绑定  由state的值来控制表单元素的值

//1.在state中添加一个状态 作为表单元素的value值（控制表单元素值的来源）
state={txt:''}
//2.给表单元素绑定change事件，将表单元素的值设置为state的值（控制表单元素值的变化）
<input type="text" value={this.state.txt}onChange ={e => this.setState({ txt : e.target.value })}
/>

多表单元素优化步骤

1.给表单元素加name属性，名称与state相同

2.根据表单元素类型，获取对应的值

3.在change事件处理程序中，通过[name]修改对应的state

<inputtype="text"name="txt"  //区分其他表单元素 名称与state相同value={this.state.txt}onChange={this.handleForm}
/>//根据表单元素类型获取值
const value=target.type === 'checkbox'?target.checked:target.value//根据name设置对应的state
this.setState({
//es6的属性表达式[name]:value
})

2.非受控组件

1.借助ref 使用原生DONM方式来获取表单元素的值

        ref的作用：获取DOM组件

2.使用步骤

①调用React.createRef()方法创建一个ref对象

②将创建好的ref对象添加到文本框中

③通过ref对象获取到文本框的值

3.大多数情况下 用受控组件 

//1.调用
constructor() {super()this.txtRef = React.createRef()
}//2.将ref添加到文本框
<input type="text" ref={this.txtRef} />//3.通过ref对象获取到文本框的值
console.log{this.txtRef.current.value}//实践
class App extends React.Component{constructor() {super()this.txtRef = React.createRef()
}
//获取文本框的值
getTxt =() =>{console.log('文本框的值为：', this.txtRef.current)
}
render(){return(<div><input type="text" ref={this.txtRef} /><button onClick={this.getTxt}获取文本框的值</button></div>
)
}
}

完全利用js语言的能力创建组件，这是React的思想 

TODO3

组件通讯

1.组件通讯的定义

因为组件时独立且封闭的单元，默认情况下，只能使用组件自己的数据，在组件化的过程中，我们要将完整的功能拆分为多个组件，这里需要共享一些数据，所以应该让组件与外界进行“通讯”

2.组件通讯的三种方式

2.1 父组件 ->子组件

①父组件提供要传递的state数据

②给子组件标签添加属性，值为state中的数据

③子组件通过props接收父组件传递的数据

2.2 子组件 ->父组件

思路：利用回调函数，父组件提供回调，子组件调用。将要传递的数据作为回调函数的参数。

①父组件提供一个回调函数（用于接收数据）

②将该函数作为属性的值，传递给子组件。

③子组件通过props调用回调函数。

④将子组件的数据作为参数传递给回调函数。

2.3兄弟组件

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

思想：状态提升

公共父组件职责 1.提供共享状态 2.提供操作共享状态的方法

要通讯的子组件只需要通过props接收状态或操作状态的方法

props

  • 组件要接受外部的数据应该通过props来实现
  • props的作用：接受传递给组件的数据
  • 传递数据：给组件标签添加属性
  • 接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据
  • <Hello name="jack" age={19} />
function Hello(props){
return (<div> 接收到的数据：{props.name} </div>
)
}
  • props特点 可以给组件传递任意类型的数据 
    <Hello  name="rose"age={19}colors={['red','green','blue']}fn={() => console.log('传的是函数')}tag={<p>这是一个p标签</p>}
/>

                         props是只读的对象 只能读取值 但是无法修改对象

                         使用类组件时，如果写了构造函数，应该将props传递给super() 否则无法在构造函数中获取到props 

constructor(props) {super(props)
}

props深入

children属性

1.表示组件标签的子节点，当组件标签有子节点时，props就会有该属性、

2.children属性与普通的props一样，值可以是任意值（文本，React元素，组件，函数）

function Hello {props}{return {<div>组件的子节点：{props.children}</div>}
}
<Hello> 我是子节点 </Hello>

props校验

1.因为对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据

2.如果传入数据不对，会导致组件内部报错，且组件的使用者不知道明确的错误原因。

3.添加props校验，允许在创建组件的时候，就指定props的格式和类型。捕获使用组件时因为props导致的错误，增加组件的健壮性。

步骤

1.安装prop-types包

2.导入prop-type是包

3.使用组件名.propTypes={}给组件的props添加校验规则

4.校验规则通过PropTypes对象来指定

约束规则

1.常见类型：array bool func number object string

2.React元素类型 ：element

3.必填项：isRequired

4.特定结构的对象： shape（{}）

//添加props校验
App.propTypes={a:propTypes.number,
fn:propTypes.func.isRequired,
tag:PropTypes.element,
filter:PropTypes.shape({
area:PropTypes.string,
price:PropTypes,number
})
}

props默认值

场景：分页组件-》每页显示条数

作用：给props设置默认值，在未传入props时生效

App.defaultProps ={pageSize:10
}

 

Context

跨多个组件传递数据 （eg 主题  语言） 

Context提供了两个组件  Provider -》用来提供数据和Consumer-》用来消费数据

//1.调用React.creatContext() 创建Provider 和Consumer 两个组件
const { Provider,Consumer} = React.createContext()
//2.使用Provider组件作为父节点
<Provider><div className="App"><Child1 /></div>
</Provider>
//3.设置value属性，表示要传递的数据
<Provider value="pink">
//4.调用Consumer 组件接收数据
<Consumer>{data => <span>data 参数表示接收到的数据 --{data}</span>
</Consumer>

React 官方中文文档        

 

 

 

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

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

相关文章

三.listview或tableviw显示

三.listview或tableviw显示

一.使用qt creator 转变类型 变形为listview或tableviw 二.导出ui文件为py文件 # from123.py 为导出 py文件 form.ui 为 qt creator创造的 ui 文件 pyuic5 -o x:\xxx\from123.py form.uifrom123.py listview # -*- coding: utf-8 -*-# Form implementation generated fro…
阅读更多...
linux编辑器-vim

linux编辑器-vim

1.vim是什么 vim 是从 vi 发展出来的一个文本编辑器。代码补全、编译及错误跳转等方便编程的功能特别丰富&#xff0c;在程序员中被广泛使用。简单的来说&#xff0c; vi 是老式的字处理器&#xff0c;不过功能已经很齐全了&#xff0c;但是还是有可以进步的地方。 vim 则可以…
阅读更多...
虹科分享 | MKA：基于先进车载网络安全解决方案的密钥协议

虹科分享 | MKA：基于先进车载网络安全解决方案的密钥协议

MKA作为MACsec的密钥协议&#xff0c;具有安全、高效、针对性强的特点&#xff0c;为您的汽车ECU通讯创建了一个安全的通信平台&#xff0c;可以助力您的各种汽车创新项目&#xff01; 虹科方案 | 什么是基于MACsec的汽车MKA 一、MACsec在汽车行业的应用 在以往的文章中&#…
阅读更多...
云原生Kubernetes：pod基础

云原生Kubernetes：pod基础

目录 一、理论 1.pod 2.pod容器分类 3.镜像拉取策略&#xff08;image PullPolicy&#xff09; 二、实验 1.Pod容器的分类 2.镜像拉取策略 三、问题 1.apiVersion 报错 2.pod v1版本资源未注册 3.取行显示指定pod信息 四、总结 一、理论 1.pod (1) 概念 Pod是ku…
阅读更多...
《智能网联汽车自动驾驶功能测试规程》

《智能网联汽车自动驾驶功能测试规程》

一、 编制背景 2018 年4 月12 日&#xff0c;工业和信息化部、公安部、交通运输部联合发布《智能网联汽车道路测试管理规范(试行)》&#xff08;以下简称《管理规范》&#xff09;&#xff0c;对智能网联汽车道路测试申请、审核、管理以及测试主体、测试驾驶人和测试车辆要求等…
阅读更多...
Vue.js 中的路由（Route）跳转

Vue.js 中的路由（Route）跳转

Vue.js 中的路由 官方解释 在 Vue.js 中&#xff0c;路由是一种用于导航和页面跳转的重要概念。Vue 提供了一个名为 Vue Router 的官方插件&#xff0c;用于构建单页面应用程序&#xff08;SPA&#xff09;的路由系统。Vue Router 允许您将不同的组件映射到应用程序的不同 URL…
阅读更多...
分享5个和安全相关的 VSCode 插件

分享5个和安全相关的 VSCode 插件

开发高质量的软件应用程序可能是艰巨的&#xff0c;因为许多组成部分必须协同工作才能创建出一个可运行的解决方案。这就是为什么开发人员需要尽可能获得所有帮助和便利&#xff0c;特别是在保护他们的应用程序时。 Visual Studio Code&#xff08;VSCode&#xff09;是最受欢迎…
阅读更多...
eNSP-抓包实验

eNSP-抓包实验

拓扑结构图&#xff1a; 实验需求&#xff1a; 1. 按照图中的设备名称&#xff0c;配置各设备名称 2. 按照图中的IP地址规划&#xff0c;配置IP地址 3. 使用Wireshark工具进行抓ping包&#xff0c;并分析报文 4. 理解TCP三次握手的建立机制 实验步骤&#xff1a; 1、配置P…
阅读更多...
Python之Xlwings操作excel

Python之Xlwings操作excel

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、xlwings简介二、安装与使用1.安装2.使用3.xlwings结构说明 二、xlwings对App常见的操作App基础操作工作簿的基础操作工作表的基础操作工作表其他操作 读取单元格…
阅读更多...
uview indexList 按字母跳转不了

uview indexList 按字母跳转不了

点击字母跳转不到位的问题&#xff1a;在<u-index-list>添加方法select“clickSelect“ 锚点要加id&#xff0c;用对应的字母做为id值&#xff0c; <u-index-anchor :id"key" :index"key"/> <template><view><view class&qu…
阅读更多...
快速排序算法的递归和非递归

快速排序算法的递归和非递归

基本思路 选择一个基准值&#xff0c;将数组划分三个区域&#xff0c;小于基准值的区域位于左侧&#xff0c;等于基准值的区域位于中间&#xff0c;大于基准值的区域位于右侧。将大于和小于区域继续进行分区&#xff0c;周而复始&#xff0c;不断进行分区和交换&#xff0c;直…
阅读更多...
超详细的 pytest 教程（一）使用入门篇

超详细的 pytest 教程（一）使用入门篇

前言 pytest到目前为止还没有翻译的比较好全面的使用文档&#xff0c;很多英文不太好的小伙伴&#xff0c;在学习时看英文文档还是很吃力。本来去年就计划写pytest详细的使用文档的&#xff0c;由于时间关系一直搁置&#xff0c;直到今天才开始写。本文是第一篇&#xff0c;主…
阅读更多...
【JAVA】Object类与抽象类

【JAVA】Object类与抽象类

作者主页&#xff1a;paper jie_的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和…
阅读更多...
Vue--1.4Vue指令

Vue--1.4Vue指令

Vue会根据不同的指令&#xff0c;针对标签实现不同的功能。 指令&#xff1a;带有v-前缀的特殊标签属性 v-前缀"表达式" 1.v-html 作用:动态解析标签innerHTML <!doctype html> <html> <head><meta charset"utf-8"><meta …
阅读更多...
计算机竞赛 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

计算机竞赛 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…
阅读更多...
详解初阶数据结构之顺序表（SeqList）——单文件文件实现SeqList的增删查改

详解初阶数据结构之顺序表（SeqList）——单文件文件实现SeqList的增删查改

目录 一、线性表 二、顺序表 2.1概念及结构 2.2接口实现 2.3动态顺序表的创建 2.3动态顺序表的初始化 2.3.1传值初始化 2.3.2传址初始化 2.4动态顺序表的清空 2.5动态顺序表的扩容 2.6动态顺序表内容的打印 三、动态顺序表的使用 3.1尾插尾删 3.1.1尾插 3.1.2尾删…
阅读更多...
软件测试/测试开发丨ChatGPT：带你进入智能对话的新时代

软件测试/测试开发丨ChatGPT：带你进入智能对话的新时代

简介 人工智能时代来临 我们正处于AI的iPhone时刻。——黄仁勋&#xff08;英伟达CEO&#xff09; ChatGPT 好得有点可怕了&#xff0c;我们距离危险的强人工智能不远了。——马斯克&#xff08;Tesla/SpaceX/Twitter CEO&#xff09; 以上的内容说明我们现在正处于一个技术大…
阅读更多...
【uni-app】

【uni-app】

准备工作 1.下载hbuilder&#xff0c;插件使用Vue3的uni-app项目 2.需要安装编译器 3.下载微信开发者工具 4.点击运行->微信开发者工具 5.打开微信开发者工具的服务端口 效果图 page.json&#xff08;添加路由&#xff0c;修改底层导航栏&#xff0c;背景色&#xff09…
阅读更多...
读书笔记：多Transformer的双向编码器表示法(Bert)-1

读书笔记：多Transformer的双向编码器表示法(Bert)-1

多Transformer的双向编码器表示法 Bidirectional Encoder Representations from Transformers&#xff0c;即Bert&#xff1b; 本笔记主要是对谷歌Bert架构的入门学习&#xff1a; 介绍Transformer架构&#xff0c;理解编码器和解码器的工作原理&#xff1b;掌握Bert模型架构…
阅读更多...
2023.9.7 关于 TCP / IP 的基本认知

2023.9.7 关于 TCP / IP 的基本认知

目录 网络协议分层 TCP/IP 五层&#xff08;四层&#xff09;模型 应用层 传输层 网络层&#xff08;互联网层&#xff09; 数据链路层&#xff08;网络接口层&#xff09; 物理层 网络数据传输的基本流程 网络协议分层 为什么需要分层&#xff1f; 分层之后&#xff0c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023