react 学习笔记

一、创建虚拟dom

ReactDOM.render(虚拟dom，要渲染的节点)

<body><div id="test"></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom，用于支持操作dom --><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script src="../js/babel.min.js"></script><!-- 这里用 babel 意思是：使用jsx语法，而不是js语法 --><script type="text/babel">// 1、创建虚拟dom// jsx 中，这里不需要加引号，因为不是字符串，而是节点let VDOM = <h1>hello react</h1>// 2、渲染虚拟dom到页面ReactDOM.render(VDOM, document.getElementById("test"))</script>
</body>

二、虚拟dom的两种创建方式

法一：js (不需要引入babel.min.js转换文件)
React.createElement("标签名"， 属性对象，”标签内容“)

<body><div id="test"></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom，用于支持操作dom --><script src="../js/react-dom.development.js"></script><script type="text/javascript">// 1、创建虚拟dom// createElement 是react中创建节点的方法，接受3个参数：1、标签名（字符串），2、属性（对象），3、标签内容（字符串）// 如果要创建嵌套的节点，需要将内容 3 替换为 createElement 创建的节点// 以上是js创建虚拟节点的方法，而jsx只需要按照 html 方式，将节点罗列// let VDOM = React.createElement("h1", { id: "react" }, "hello react");let VDOM = React.createElement("h1", { id: "react" }, React.createElement("span", { class: "title" }, "hello react"));// 2、渲染虚拟dom到页面ReactDOM.render(VDOM, document.getElementById("test"))</script>
</body>

法二：jsx
ReactDOM.render(虚拟DOM, 目标节点)

<body><div id="test"></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom，用于支持操作dom --><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script src="../js/babel.min.js"></script><!-- 这里用 babel 意思是：使用jsx语法，而不是js语法 --><script type="text/babel">// 1、创建虚拟dom// jsx 中，这里不需要加引号，因为不是字符串，而是节点let VDOM = (<h1 id="react"><span className="title">hello react</span>  </h1>)// 2、渲染虚拟dom到页面ReactDOM.render(VDOM, document.getElementById("test"))</script>
</body>

jsx 创建虚拟dom，其实是 js 创建虚拟dom的语法糖，内部使用的仍然是 js 语法。

关于虚拟 DOM

  1. 本质上是 Object 类型的对象（一般对象）
  2. 虚拟 DOM 比较“轻”（属性较少），真实 DOM 比较“重”，因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性。
  3. 虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上。
  4. 虚拟 DOM 和真实 DOM 数据如下图：
    在这里插入图片描述
    在这里插入图片描述

三、jsx 语法规则

  1. 定义虚拟 DOM 时，不要用引号
  2. 标签中混入 js 表达式时，要用 {}
  3. 样式的类名不要用 class，要用 className
  4. 内联样式，要用 style={{key:value}} 的形式去写，key用小驼峰
  5. 只能有一个根标签
  6. 标签必须闭合
  7. 标签首字母位小写时，浏览器会将标签转换为 html 同名元素，如 html 中没有该标签对应的同名元素，则报错
  8. 标签首字母位大写时，react 就去渲染对应的组件，若组件没有定义，就会报错
<body><style>.title {background-color: aqua;width: 400px;}</style><div id="test"></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom，用于支持操作dom --><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script src="../js/babel.min.js"></script><!-- 这里用 babel 意思是：使用jsx语法，而不是js语法 --><script type="text/babel">let myId = "react",myContent="hello react";let VDOM = (<div><h1 className="title" id={myId}><span style={{fontSize: "40px", color: "red"}}>{myContent}</span>  </h1><h1 className="title" id={`${myId}-copy`}><span style={{fontSize: "40px", color: "red"}}>{myContent}</span>  </h1>  </div>)ReactDOM.render(VDOM, document.getElementById("test"))</script>
</body>

jsx 练习

在这里插入图片描述

<body><div id="test"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">let arr = ["angular","vue","react"]let VDOM = (<div><h1>前端js框架</h1><ul>{arr.map((item, index) => {return <li key={index}>{item}</li>})}</ul></div>)ReactDOM.render(VDOM, document.getElementById("test"))</script>
</body>

注意区分：js 语句（代码）与 js表达式

  • 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方(可以用变量接受)
    • 下面这些都是表达式
      （1）a（变量）
      （2）a+b
      （3）func(1)
      （4）arr.map()
      （5）function test () {}
  • 语句（代码）
    • 下面这些都是语句（代码）
      （1）if () {}
      （2）for () {}
      （3）switch () {}

四、组件与模块

1、模块

  • 理解：向外提供特定功能的 js 程序，一般是一个 js 文件
  • 为什么要拆成模块：随着业务逻辑增加，代码越来越复杂
  • 作用：复用 js ，简化 js 的编写，提高运行效率

2、组件

  • 理解：用来实现局部功能效果的代码和资源的集合（html/css/js/image等）
  • 为什么：一个页面的功能更复杂
  • 作用：复用编码，简化项目代码，提高运行效率

3、模块化

当应用的js都以模块来编写，这个应用就是一个模块化的应用

4、组件话

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

五、函数式组件（适用于简单组件的定义）

  • 定义函数，函数内部返回dom节点
  • 函数名首字母要大写，在react中，标签首字母大写表示是组件，小写则匹配对应的html标签
  • 使用 ReactDOM.render(<MyComponent />, document.getElementById("test")) 将函数组件渲染到页面上
    • React 解析组件标签，找到 MyComponent 组件
    • 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DON，随后呈现到页面中
  • 也可使用 ReactDOM.render(MyComponent(), document.getElementById("test")) 将组件渲染到页面上
<body><div id="test"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">// 1、创建函数式组件（首字母必须大写）function MyComponent () {console.log(this) // 这里的 this 是 undefined ，因为 babel 将jsx编译为js后，开启了严格模式return <h1>使用函数定义的组件（适用于简单组件的定义）</h1>}// 2、渲染组件到页面（有两种写法）//    2.1 使用组件标签（首字母要大写，小写的话会默认匹配html标签），React 内部发现是函数式组件，会自动调用该函数//    2.2 直接调用函数方法// ReactDOM.render(<MyComponent />, document.getElementById("test"))ReactDOM.render(MyComponent(), document.getElementById("test"))/*执行 ReactDOM.render(<MyComponent />, document.getElementById("test"))后发生了什么？1、React 解析组件标签，找到 MyComponent 组件2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DON，随后呈现到页面中*/</script>
</body>

六、类式组件（适用于复杂组件的定义）

复习 ES6 的 class：

  • 类中的构造器 constructor 不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时在写
  • 如果 A 类继承 B 类，且 A 类中写了构造器，那么 A 类构造器中的 super 是必须要调用的
  • 类中所定义的方法，都是放在了类的原型对象上，供实例去使用
  <script>class Person {constructor(name, age) {this.name = name;this.age = age;}sperak() {console.log(`我叫${this.name}, 今年${this.age}岁`)}}// Student 类继承 Person 类class Student extends Person {constructor(name, age, grade) {super(name, age)this.grade = grade;}// 子类、父类具有同名方法时，子类会覆盖父类sperak() {console.log(`我叫${this.name}, 今年${this.age}岁，上${this.grade}年级`)}}let p1 = new Person("张三", 18)let s1 = new Student("李四", 16, "高一")console.log(p1)console.log(s1)p1.sperak()	//我叫张三, 今年18岁s1.sperak()	//我叫李四, 今年16岁，上高一年级</script>

创建类式组件

  • 创建一个类，该类继承于 React.Component 类
  • 类中必须要定义 render 方法，方法里面要 return 出需要的节点
  • 通过 ReactDOM.render(<MyComponent />, document.getElementById("test")) 方法将类式组件渲染到页面
    • 1、React 解析组件标签，找到 MyComponent 组件
    • 2、发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法
    • 3、将 render 返回到虚拟DOM转化为真实DOM，随后呈现在页面中
<body><div id="test"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">// 1、创建类式组件class MyComponent extends React.Component {render() {// render 是放在哪里的？ --- MyComponent 的原型对象上，供实例使用// render 中的 this 是谁？ --- MyComponent 的实例对象 《===》 MyComponent组件实例对象return <h1>使用类定义的组件（适用于复杂组件的定义）</h1>}}// 2、渲染组件到页面上ReactDOM.render(<MyComponent />, document.getElementById("test"))/*执行 ReactDOM.render(<MyComponent />, document.getElementById("test")) 后，发生了什么？1、React 解析组件标签，找到 MyComponent 组件2、发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法3、将 render 返回到虚拟DOM转化为真实DOM，随后呈现在页面中*/</script>
</body>

七、react 组件实例三大对象 state、props、ref

1、state

1）理解

  • state 是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）
  • 组件被称为“状态机”，通过更新组件的 state 来更新对应的页面显示（重新渲染组件，通过 render 函数）

2）注意：

  • 组件中的 render 方法中的 this 是组件实例对象
  • 组件自定义的方法中 this 是 undefined，如何解决？
    a、强制绑定 this：通过函数对象的 bind() this.changeWeather = this.change.bind(this)
    b、剪头函数
  • 状态数据，不能直接修改或更新，要使用 this.setState({isHot: !isHot})

案例：点击文字，切换状态

在这里插入图片描述

标准写法：
<body><div id="test"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">class Weather extends React.Component {// 构造器调用几次？---1次（页面初始化时调用1次）constructor(props) {super(props)this.state = {isHot: true,wind: "大风"}// 解决 chengWeather 中 this 指向问题// 这里也可以用 this.change = this.change.bind(this)，render方法中用 onClick={this.change}// 说明：上面赋值语句右边的 change 方法是挂到 Weather 的原型对象上的，等号左边的 change 是挂到 实例对象上的，// 点击的时候，其实是实例对象调用change，因为实例对象上有 change ，所以会执行 实例对象上的change而不是原型对象上的changethis.changeWeather = this.change.bind(this)}// render 调用几次？---1+n次，1是初始化那次，n 是状态更新的次数render() {let { isHot, wind } = this.state// return <h1 id="title" onClick={this.change}>今天天气很{ this.state.isHot ? '炎热':'凉爽' }</h1>return <h1 id="title" onClick={this.changeWeather}>今天天气很{ isHot ? '炎热':'凉爽' }, { wind }</h1>}// change 调用几次？---id="title" 元素点击几次就调用几次change() {// change 放在哪里？ --- Weather 的原型对象上，供实例使用// <h1 id="title" onClick={this.change}>今天天气很{ this.state.isHot ? '炎热':'凉爽' }</h1>// 上一行中 由于 change 是作为 onClick 的回调，所以 change 不是通过实例调用的，是直接调用，// 又由于类中的方法默认开启了局部的严格模式，所以 change 中的 this 为 undefined。// 要解决这个问题，需要在构造函数中，通过 bind 重新指定 this ==》this.changeWeather = this.change.bind(this)// 意思是，将 change 中的 this 指向实例对象，并将这个方法赋值给 实例对象的 changeWeather 属性上面// 最后在 render 方法中为节点绑定事件时，使用 changeWeather ，这样在点击节点时，changeWeather 里面拿到的 this 就是实例对象// console.log(this)let { isHot } = this.state;// ！！！注意：状态必须通过 setState 进行更新，页面才会更新，且这里是合并（不影响其他键值对），不是直接替换 state 对象this.setState({isHot: !isHot})// ！！！注意：状态（state）不能直接（赋值）更改，直接更改，页面不会更新，下面这行代码就是直接更改，数据会被修改，但是页面不会重新渲染// this.state.isHot = !this.state.isHot;// console.log(this.state.isHot)}}ReactDOM.render(<Weather/>, document.getElementById("test"))// 1、绑定事件：addEventListener// document.getElementById("title").addEventListener("click", () => {//   alert("123")// })// 2、绑定事件：onclick// document.getElementById("title").onclick = () => {//   alert("456")// }// 3、绑定事件：行内 onClick// 注：元素上必须要用小驼峰 onClick，而不能用 onclick，值为函数，所以要用 {demo}//    方法加括号的话，意思是将 demo 函数调用的返回值，赋值给onClick 作为回调，//    也就是会在初始化时执行1次，后续点击无效，所以这里不能加括号//    这里区别于 vue，vue 中，加括号表示要传值// function change () {//   alert("789")// }</script>
</body>
简写：
<body><div id="test"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">class Weather extends React.Component {// 初始化状态state = { isHot: false, wind: "大风" }render() {let { isHot, wind } = this.state;return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}, {wind}</h1>}// 自定义方法，放到实例上的 -- 要用赋值语句 + 剪头函数的形式changeWeather = () => {// 剪头函数里的this指向定义函数时的thislet { isHot } = this.state;this.setState({isHot: !isHot})}}ReactDOM.render(<Weather />, document.getElementById("test"))</script>
</body>
简写方式与标准写法对比：

在这里插入图片描述

2、props

  • 每个组件对象都会有 props 属性
  • 组件标签的所有属性都保存在 props 中

作用：

  • 通过标签属性从组件外向组件内传递变化的数据
  • 注意：组件内部不要修改 props 数据

1）基本使用

  • 在使用组件标签时，以属性的形式传入，会以对象键值对的形式，在 render 方法中 this（实例对象）上面的 props 中获取到。
  • 组件标签上要传对象时，可以使用{...obj}，react 内部会将对象中的键值对展开，以 key=value 的形式当到标签上
案例：

在这里插入图片描述

<body><div id="test1"></div><div id="test2"></div><div id="test3"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">class Person extends React.Component {render() {console.log(this) // Person 的实例对象let { name, age, sex } = this.props;return (<ul><li>姓名：{ name }</li><li>性别：{ sex }</li><li>年龄：{ age }</li></ul>)}}ReactDOM.render(<Person name="张三" sex="女" age="18"/>, document.getElementById("test1"))let p = { name: "李四", sex: "女", age: "18" }ReactDOM.render(<Person name={p.name} sex={p.sex} age={p.sex}/>, document.getElementById("test2"))// 这里的 { ...p } 是由 jsx 和 react 处理的，会将对象 p 里的键值对拆开分别以键值对的形式放到标签上面，// 是上面一行代码的语法糖ReactDOM.render(<Person { ...p }/>, document.getElementById("test2"))ReactDOM.render(<Person name="王五" sex="女" age="18"/>, document.getElementById("test3"))</script>
</body>

2）对属性进行限制

有两种写法，可以使用 Person.xxx方式，也可以在类里面使用 static关键字实现。

// 法一：
// 对标签属性进行类型、必要性的限制
// PropTypes 是文件 prop-types.js 提供的
Person.propTypes = {name: PropTypes.string.isRequired
}
// 指定默认标签属性值
Person.defaultProps = {sex: "未知",
}// 法二：
class Person extends React.Component {static propTypes = {}static defaultProps = {}
}
  • Person.propTypes对标签属性进行类型、必要性的限制
    • 定义对组件的类上面有 propTypes 属性，值为对象
    • 旧版本的 React 上面挂载了 PropTypes ，新版react要另外引入 prop-types.js，该文件提供了全局的 PropTypes
  • Person.defaultProps指定默认标签属性值
案例
<body><div id="test1"></div><div id="test2"></div><div id="test3"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script src="../js/prop-types.js"></script><script type="text/babel">class Person extends React.Component {// 对标签属性进行类型、必要性的限制// PropTypes 是文件 prop-types.js 提供的// static 标记为静态属性，只能通过类去访问，不能通过实例对象访问static propTypes = {name: PropTypes.string.isRequired, // 限制name为必传，且类型为字符串sex: PropTypes.string, //限制sex为字符串age: PropTypes.number, //限制age为数值speak: PropTypes.func}// 指定默认标签属性值static defaultProps = {sex: "未知",  // sex 默认值为 未知age: 0  // age 默认值为 0}render() {let { name, sex, age } = this.props;return (<ul><li>姓名：{ name }</li>  <li>性别：{ sex }</li>  <li>年龄：{ age }</li>  </ul>)}}// 对标签属性进行类型、必要性的限制// PropTypes 是文件 prop-types.js 提供的// 这里 propTypes、defaultProps 是静态属性，只能通过类去访问，无法通过实例访问，也可以在定义类的时候通过 static 增加类的静态属性// Person.propTypes = {//   name: PropTypes.string.isRequired, // 限制name为必传，且类型为字符串//   sex: PropTypes.string, //限制sex为字符串//   age: PropTypes.number, //限制age为数值//   speak: PropTypes.func// }// // 指定默认标签属性值// Person.defaultProps = {//   sex: "未知",  // sex 默认值为 未知//   age: 0  // age 默认值为 0// }ReactDOM.render(<Person name="张三" sex="男" age={18}/>, document.getElementById("test1"))let p = { name: "李四" }ReactDOM.render(<Person {...p} speak={speak}/>, document.getElementById("test2"))function speak () {console.log("123")}</script>
</body>

构造器（constructor）和props

  • 如果构造器不接受 props，或者 super 方法不传递 pros，在构造器里就不能通过 this.props 获取数据，此时 this.props 值为 undefined
  • 如果构造器里正常接受 props ，super 正常传递 props，那么 this.props 可以拿到实例传过来的对象
  • 其实这里影响不大，因为不管接不接受 props，都不影响页面的显示， super 不传递 props 的话，可以直接使用 constructor 接受到的 props 代替 this.props
class Person extends React.Component {// 构造器是否接受 props，是否传递给 super，取决于：是否希望在构造器中通过 this 访问 propsconstructor(props) {super(props)console.log(this.props)}
}

函数式组件中的 props

注：三大属性state、props、refs中，只有props可以使用在函数式组件中，其他两个只能在类式组件中使用。

案例：

在这里插入图片描述

<body><div id="test1"></div><div id="test2"></div><div id="test3"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script src="../js/prop-types.js"></script><script type="text/babel">// 函数式组件中，函数接受一个参数，这个参数是组件标签里的属性键值对组成的对象function Person (props) {let { name, age, sex } = props;return (<ul><li>姓名：{ name }</li>  <li>性别：{ sex }</li>  <li>年龄：{ age }</li>  </ul>)}// 对标签属性进行类型、必要性的限制// PropTypes 是文件 prop-types.js 提供的// 这里 propTypes、defaultProps 是静态属性，只能通过类去访问，无法通过实例访问，也可以在定义类的时候通过 static 增加类的静态属性Person.propTypes = {name: PropTypes.string.isRequired, // 限制name为必传，且类型为字符串sex: PropTypes.string, //限制sex为字符串age: PropTypes.number, //限制age为数值speak: PropTypes.func}// 指定默认标签属性值Person.defaultProps = {sex: "未知",  // sex 默认值为 未知age: 0  // age 默认值为 0}ReactDOM.render(<Person name="张三" sex="男" age={18}/>, document.getElementById("test1"))let p = { name: "李四" }ReactDOM.render(<Person {...p} />, document.getElementById("test2"))</script>
</body>

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

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

相关文章

基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

效果图&#xff1a; 组件&#xff1a;MultipleSelect.vue <template><el-select v-model"selectValues" v-bind"$attrs" v-on"listeners" multiple placeholder"请选择" style"width: 50%" change"changeSel…
阅读更多...
接口测试快速上手指南

接口测试快速上手指南

大量线上BUG表明&#xff0c;对接口进行测试可以有效提升产品质量&#xff0c;暴露手工测试时难以发现的问题&#xff0c;同时也能缩短测试周期&#xff0c;提升测试效率。但在实际执行过程中&#xff0c;接口测试被很多同学打上了“上手难&#xff0c;门槛高”的标签。 本文旨…
阅读更多...
【书生·浦语大模型实战营04】《(4)XTuner 大模型单卡低成本微调实战》学习笔记

【书生·浦语大模型实战营04】《(4)XTuner 大模型单卡低成本微调实战》学习笔记

《(4)XTuner 大模型单卡低成本微调实战》 课程文档&#xff1a;《XTuner 大模型单卡低成本微调实战》 1 Finetune简介 LLM的下游应用中&#xff0c;增量预训练和指令跟随是经常会用到两种的微调模式 1.1 增量预训练微调 使用场景&#xff1a;让基座模型学习到一些新知识&a…
阅读更多...
matplotlib教程（一）—— 入门基础

matplotlib教程（一）—— 入门基础

前言 Matplotlib 是 Python 的绘图库&#xff0c;它能让使用者很轻松地将数据图形化&#xff0c;并且提供多样化的输出格式&#xff1b;它可以绘制线图、散点图、等高线图、条形图、柱状图、3D 图形、甚至是图形动画等 在使用它之前&#xff0c;应导入&#xff1a;import matp…
阅读更多...
【计算机组成原理】程序的转换及机器级表示 常用计算机术语英文缩写汇总

【计算机组成原理】程序的转换及机器级表示 常用计算机术语英文缩写汇总

编码 二进制编码的十进制数&#xff08;BCD&#xff09;&#xff1a;Binary Coded Decimal美国信息交换标准代码&#xff08;ASCII&#xff09;&#xff1a;American Standard Code for Information Interchange 数据的排列顺序 最低有效位&#xff08;LSB&#xff09;&…
阅读更多...
Docker安装Elesticsearch7详细步骤

Docker安装Elesticsearch7详细步骤

​ 1、创建安装目录 mkdir -p /usr/local/docker/es-docker 2、配置虚拟内存 如果不配置&#xff0c;后面启动es会报错。 max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144] 配置如下 vi /etc/sysctl.conf vm.max_map_coun…
阅读更多...
基于Hadoop的网上购物行为大数据分析及预测系统【flask+echarts+机器学习】前后端交互

基于Hadoop的网上购物行为大数据分析及预测系统【flask+echarts+机器学习】前后端交互

有需要本项目或者部署的系统可以私信博主&#xff0c;提供远程部署和讲解 本研究基于淘宝用户行为的开源数据展开大数据分析研究&#xff0c;通过Hadoop大数据分析平台对阿里天池公开的开源数据集进行多维度的用户行为分析&#xff0c;为电商销售提供可行性决策。 首先我们将大…
阅读更多...
Paddle模型转ONNX

Paddle模型转ONNX

深度学习模型在硬件加速器上的部署常常要用到ONNX&#xff08;Open Neural Network Exchange&#xff0c;开放神经网络交换&#xff09;格式&#xff0c;也可以通过ONNX实现不同AI框架&#xff08;如Pytorch、TensorFlow、Caffe2、PaddlePaddle等&#xff09;之间的模型转换。 …
阅读更多...
[渗透测试学习] Surveillance -HackTheBox

[渗透测试学习] Surveillance -HackTheBox

文章目录 信息搜集getshell提权信息搜集 nmap扫描端口 nmap -sV -sC -v -p- --min-rate 1000 10.10.11.245扫出来两个端口，其中80端口有http服务并且重定向到surveillance.htb 那么我们添加下域名然后访问80端口，发现是企业网站尝试扫描子域名和目录无果后，用Wappalyzer插…
阅读更多...
云防护概念及云防护作用

云防护概念及云防护作用

云防护是什么 云防护是一种网络安全技术&#xff0c;旨在保护云计算环境中的数据和系统免受恶意攻击和未授权访问。 云防护适用场景 一切http.https.tcp协议&#xff0c;如游戏、电商、金融、物联网等APP PC 网站。 云防护的主要作用 云防护的主要作用是通过搭规模庞大的云防…
阅读更多...
NowinAndroid—2024 Android现代开发全功能应用

NowinAndroid—2024 Android现代开发全功能应用

NowinAndroid—2024 Android现代开发全功能应用 现代Android开发全功能示例应用Now-in-Android&#xff0c;它是用Kotlin和Jetpack Compose开发的&#xff0c;功能非常强大。这个应用遵循了安卓设计和开发的最佳方法&#xff0c;旨在给开发者提供实用的参考资料。无论你是新手…
阅读更多...
【控制篇 / 策略】(7.4) ❀ 04. 修改IP地理位置数据库 ❀ FortiGate 防火墙

【控制篇 / 策略】(7.4) ❀ 04. 修改IP地理位置数据库 ❀ FortiGate 防火墙

【简介】虽然通过FortiGuard服务可以更新IP地理位置数据库&#xff0c;但是实际使用环境中&#xff0c;总会有部分IP地址不符合我们的愿景&#xff0c;这种情况下&#xff0c;可以通过修改IP地理位置数据库来达到我们的目标。 更新IP地理位置数据库 更新IP地理位置数据库是Fort…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023