React 全栈体系（六）

2023-09-13 22:57:06

第三章：React 应用(基于 React 脚手架)

二、组件的组合使用 - TodoList

3. 添加 todo

3.1 App
/* src/App.jsx */
//创建“外壳”组件App
import React,{Component} from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

//创建并暴露App组件
export default class App extends Component{

	//初始化状态
	state = {todos:[
		{id:'001',name:'吃饭',done:true},
		{id:'002',name:'睡觉',done:true},
		{id:'003',name:'打代码',done:false},
		{id:'004',name:'逛街',done:false}
	]}

	//addTodo用于添加一个todo，接收的参数是todo对象
	addTodo = (todoObj) => {
		//获取原todos
		const {todos} = this.state
		//追加一个todo
		const newTodos = [todoObj,...todos]
		//更新状态
		this.setState({todos:newTodos})
	}
	render(){
		const {todos} = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos}/>
					<Footer />
				</div>
			</div>
		)
	}
}
3.2 Header
/* src/components/Header/index.jsx */
import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import './index.css'


export default class Header extends Component {

  handleKeyUp = (event) => {
    //解构赋值获取keyCode,target
    const {keyCode, target} = event
    //判断是否是回车按键
    if(event.keyCode !== 13) return
    //添加的todo名字不能为空
	if(target.value.trim() === ''){
		alert('输入不能为空')
		return
	}
    //准备好一个todo对象
    const todoObj = {id:nanoid(), name:target.value, done:false}
    //将todoObj传递给App
    this.props.addTodo(todoObj)
    //清空输入
	target.value = ''
  }
  render() {
    return (
        <div className="todo-header">
            <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
    )
  }
}

4. 鼠标移入效果

Item
/* src/components/Item/index.jsx */
import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
  state = {mouse:false} //标识鼠标移入、移出

  //鼠标移入、移出的回调
	handleMouse = (flag)=>{
		return ()=>{
			this.setState({mouse:flag})
		}
	}

  render() {
    const {name,done} = this.props
    const {mouse} = this.state
    return (
        <li style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
        <label>
            <input type="checkbox" defaultChecked={done}/>
            <span>{name}</span>
        </label>
        <button className="btn btn-danger" style={{display:mouse?'block':'none'}}>删除</button>
        </li>
    )
  }
}

5. 添加一个 todo

5.1 App
/* src/App.jsx */
//创建“外壳”组件App
import React,{Component} from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

//创建并暴露App组件
export default class App extends Component{
	//状态在哪里，操作状态的方法就在哪里

	//初始化状态
	state = {todos:[
		{id:'001',name:'吃饭',done:true},
		{id:'002',name:'睡觉',done:true},
		{id:'003',name:'打代码',done:false},
		{id:'004',name:'逛街',done:false}
	]}

	//addTodo用于添加一个todo，接收的参数是todo对象
	addTodo = (todoObj) => {
		//获取原todos
		const {todos} = this.state
		//追加一个todo
		const newTodos = [todoObj,...todos]
		//更新状态
		this.setState({todos:newTodos})
	}

	//updateTodo用于更新一个todo对象
	updateTodo = (id,done)=>{
		//获取状态中的todos
		const {todos} = this.state
		//匹配处理数据
		const newTodos = todos.map((todoObj)=>{
			if(todoObj.id === id) return {...todoObj,done}
			else return todoObj
		})
		this.setState({todos:newTodos})
	}

	render(){
		const {todos} = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos} updateTodo={this.updateTodo}/>
					<Footer />
				</div>
			</div>
		)
	}
}
5.2 List
/* src/components/List/index.jsx */
import React, { Component } from 'react'
import Item from '../Item'
import './index.css'

export default class List extends Component {
  render() {
    const {todos,updateTodo} = this.props
    return (
        <ul className="todo-main">
          {
            todos.map(todo=> {
              return <Item key={todo.id} {...todo} updateTodo={updateTodo}/>
            })
          }
        </ul>
    )
  }
}
5.3 Item
/* src/components/Item/index.jsx */
import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
  state = {mouse:false} //标识鼠标移入、移出

  //鼠标移入、移出的回调
	handleMouse = (flag)=>{
		return ()=>{
			this.setState({mouse:flag})
		}
	}

  //勾选、取消勾选某一个todo的回调
	handleCheck = (id)=>{
		return (event)=>{
			this.props.updateTodo(id,event.target.checked)
		}
	}

  render() {
    const {id,name,done} = this.props
    const {mouse} = this.state
    return (
        <li style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
        <label>
            <input type="checkbox" defaultChecked={done} onChange={this.handleCheck(id)}/>
            <span>{name}</span>
        </label>
        <button className="btn btn-danger" style={{display:mouse?'block':'none'}}>删除</button>
        </li>
    )
  }
}

6. 对 props 进行限制

6.1 Header
/* src/components/Header/index.jsx */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'
import './index.css'


export default class Header extends Component {

  //对接收的props进行：类型、必要性的限制
	static propTypes = {
		addTodo:PropTypes.func.isRequired
	}

  //键盘事件的回调
  handleKeyUp = (event) => {
    //解构赋值获取keyCode,target
    const {keyCode, target} = event
    //判断是否是回车按键
    if(event.keyCode !== 13) return
    //添加的todo名字不能为空
		if(target.value.trim() === ''){
			alert('输入不能为空')
			return
		}
    //准备好一个todo对象
    const todoObj = {id:nanoid(), name:target.value, done:false}
    //将todoObj传递给App
    this.props.addTodo(todoObj)
    //清空输入
		target.value = ''
  }
  render() {
    return (
        <div className="todo-header">
            <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
    )
  }
}
6.2 List
/* src/components/List/index.jsx */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Item from '../Item'
import './index.css'

export default class List extends Component {
  //对接收的props进行：类型、必要性的限制
	static propTypes = {
		todos:PropTypes.array.isRequired,
		updateTodo:PropTypes.func.isRequired
	}

  render() {
    const {todos,updateTodo} = this.props
    return (
        <ul className="todo-main">
          {
            todos.map(todo=> {
              return <Item key={todo.id} {...todo} updateTodo={updateTodo}/>
            })
          }
        </ul>
    )
  }
}

7. 删除一个 todo

7.1 App
/* src/App.jsx */
//创建“外壳”组件App
import React,{Component} from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

//创建并暴露App组件
export default class App extends Component{
	//状态在哪里，操作状态的方法就在哪里

	//初始化状态
	state = {todos:[
		{id:'001',name:'吃饭',done:true},
		{id:'002',name:'睡觉',done:true},
		{id:'003',name:'打代码',done:false},
		{id:'004',name:'逛街',done:false}
	]}

	//addTodo用于添加一个todo，接收的参数是todo对象
	addTodo = (todoObj) => {
		//获取原todos
		const {todos} = this.state
		//追加一个todo
		const newTodos = [todoObj,...todos]
		//更新状态
		this.setState({todos:newTodos})
	}

	//updateTodo用于更新一个todo对象
	updateTodo = (id,done)=>{
		//获取状态中的todos
		const {todos} = this.state
		//匹配处理数据
		const newTodos = todos.map((todoObj)=>{
			if(todoObj.id === id) return {...todoObj,done}
			else return todoObj
		})
		this.setState({todos:newTodos})
	}

	//deleteTodo用于删除一个todo对象
	deleteTodo = (id)=>{
		//获取原来的todos
		const {todos} = this.state
		//删除指定id的todo对象
		const newTodos = todos.filter((todoObj)=>{
			return todoObj.id !== id
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	render(){
		const {todos} = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
					<Footer />
				</div>
			</div>
		)
	}
}
7.2 List
/* src/components/List/index.jsx */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Item from '../Item'
import './index.css'

export default class List extends Component {
  //对接收的props进行：类型、必要性的限制
	static propTypes = {
		todos:PropTypes.array.isRequired,
		updateTodo:PropTypes.func.isRequired,
    	deleteTodo:PropTypes.func.isRequired
	}

    render() {
	    const {todos,updateTodo,deleteTodo} = this.props
	    return (
	        <ul className="todo-main">
	          {
	            todos.map(todo=> {
	              return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo}/>
	            })
	          }
	        </ul>
	    )
  	}
}
7.3 Item
/* src/components/Item/index.jsx */
import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
    state = {mouse:false} //标识鼠标移入、移出

    //鼠标移入、移出的回调
	handleMouse = (flag)=>{
		return ()=>{
			this.setState({mouse:flag})
		}
	}

    //勾选、取消勾选某一个todo的回调
	handleCheck = (id)=>{
		return (event)=>{
			this.props.updateTodo(id,event.target.checked)
		}
	}

	//删除一个todo的回调
	handleDelete = (id)=>{
		if(window.confirm('确定删除吗？')){
			this.props.deleteTodo(id)
		}
	}

    render() {
	    const {id,name,done} = this.props
	    const {mouse} = this.state
	    return (
	        <li style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
	        <label>
	            <input type="checkbox" defaultChecked={done} onChange={this.handleCheck(id)}/>
	            <span>{name}</span>
	        </label>
	        <button onClick={()=> this.handleDelete(id) } className="btn btn-danger" style={{display:mouse?'block':'none'}}>删除</button>
	        </li>
	    )
 	}
}

8. 实现底部功能

8.1 App
/* src/App.jsx */
import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

export default class App extends Component {
	//状态在哪里，操作状态的方法就在哪里

	//初始化状态
	state = {todos:[
		{id:'001',name:'吃饭',done:true},
		{id:'002',name:'睡觉',done:true},
		{id:'003',name:'打代码',done:false},
		{id:'004',name:'逛街',done:false}
	]}

	//addTodo用于添加一个todo，接收的参数是todo对象
	addTodo = (todoObj)=>{
		//获取原todos
		const {todos} = this.state
		//追加一个todo
		const newTodos = [todoObj,...todos]
		//更新状态
		this.setState({todos:newTodos})
	}

	//updateTodo用于更新一个todo对象
	updateTodo = (id,done)=>{
		//获取状态中的todos
		const {todos} = this.state
		//匹配处理数据
		const newTodos = todos.map((todoObj)=>{
			if(todoObj.id === id) return {...todoObj,done}
			else return todoObj
		})
		this.setState({todos:newTodos})
	}

	//deleteTodo用于删除一个todo对象
	deleteTodo = (id)=>{
		//获取原来的todos
		const {todos} = this.state
		//删除指定id的todo对象
		const newTodos = todos.filter((todoObj)=>{
			return todoObj.id !== id
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	//checkAllTodo用于全选
	checkAllTodo = (done)=>{
		//获取原来的todos
		const {todos} = this.state
		//加工数据
		const newTodos = todos.map((todoObj)=>{
			return {...todoObj,done}
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	//clearAllDone用于清除所有已完成的
	clearAllDone = ()=>{
		//获取原来的todos
		const {todos} = this.state
		//过滤数据
		const newTodos = todos.filter((todoObj)=>{
			return !todoObj.done
		})
		//更新状态
		this.setState({todos:newTodos})
	}

	render() {
		const {todos} = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
					<Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
				</div>
			</div>
		)
	}
}
8.2 Header
/* src/components/Header/index.jsx */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'
import './index.css'

export default class Header extends Component {

	//对接收的props进行：类型、必要性的限制
	static propTypes = {
		addTodo:PropTypes.func.isRequired
	}

	//键盘事件的回调
	handleKeyUp = (event)=>{
		//解构赋值获取keyCode,target
		const {keyCode,target} = event
		//判断是否是回车按键
		if(keyCode !== 13) return
		//添加的todo名字不能为空
		if(target.value.trim() === ''){
			alert('输入不能为空')
			return
		}
		//准备好一个todo对象
		const todoObj = {id:nanoid(),name:target.value,done:false}
		//将todoObj传递给App
		this.props.addTodo(todoObj)
		//清空输入
		target.value = ''
	}

	render() {
		return (
			<div className="todo-header">
				<input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
			</div>
		)
	}
}
8.3 List
/* src/components/List/index.jsx */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Item from '../Item'
import './index.css'

export default class List extends Component {

	//对接收的props进行：类型、必要性的限制
	static propTypes = {
		todos:PropTypes.array.isRequired,
		updateTodo:PropTypes.func.isRequired,
		deleteTodo:PropTypes.func.isRequired,
	}

	render() {
		const {todos,updateTodo,deleteTodo} = this.props
		return (
			<ul className="todo-main">
				{
					todos.map( todo =>{
						return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo}/>
					})
				}
			</ul>
		)
	}
}
8.4 Item
/* src/components/Item/index.jsx */
import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {

	state = {mouse:false} //标识鼠标移入、移出

	//鼠标移入、移出的回调
	handleMouse = (flag)=>{
		return ()=>{
			this.setState({mouse:flag})
		}
	}

	//勾选、取消勾选某一个todo的回调
	handleCheck = (id)=>{
		return (event)=>{
			this.props.updateTodo(id,event.target.checked)
		}
	}

	//删除一个todo的回调
	handleDelete = (id)=>{
		if(window.confirm('确定删除吗？')){
			this.props.deleteTodo(id)
		}
	}


	render() {
		const {id,name,done} = this.props
		const {mouse} = this.state
		return (
			<li style={{backgroundColor:mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
				<label>
					<input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
					<span>{name}</span>
				</label>
				<button onClick={()=> this.handleDelete(id) } className="btn btn-danger" style={{display:mouse?'block':'none'}}>删除</button>
			</li>
		)
	}
}
8.5 Footer
/* src/components/Footer/index.jsx */
import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {

	//全选checkbox的回调
	handleCheckAll = (event)=>{
		this.props.checkAllTodo(event.target.checked)
	}

	//清除已完成任务的回调
	handleClearAllDone = ()=>{
		this.props.clearAllDone()
	}

	render() {
		const {todos} = this.props
		//已完成的个数
		const doneCount = todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0),0)
		//总数
		const total = todos.length
		return (
			<div className="todo-footer">
				<label>
					<input type="checkbox" onChange={this.handleCheckAll} checked={doneCount === total && total !== 0 ? true : false}/>
				</label>
				<span>
					<span>已完成{doneCount}</span> / 全部{total}
				</span>
				<button onClick={this.handleClearAllDone} className="btn btn-danger">清除已完成任务</button>
			</div>
		)
	}
}

三、总结

1.拆分组件、实现静态组件，注意：className、style的写法
2.动态初始化列表，如何确定将数据放在哪个组件的state中？
			——某个组件使用：放在其自身的state中
			——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
3.关于父子之间通信：
		1.【父组件】给【子组件】传递数据：通过props传递
		2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value
5.状态在哪里，操作状态的方法就在哪里
更多推荐

操作系统读书笔记- 01 x86系统架构概览.md-html

x86系统架构概览真看不懂了…今天就写这些吧2.0.处理器工作模式一般来讲，x86-64处理器具有5种工作模式：实模式(Real-addressMode)：处理器以16位8086的方式工作，只能以简单的段地址:偏移地址方式进行寻址，地址空间只有20位，不具有内存保护、虚拟内存、特权级限制等高级功能。当处理器上电复位之初

WebRTC 的多媒体音视频帧传输协议

WebRTC的多媒体音视频帧传输主要使用RTP（Real-timeTransportProtocol）。以下是相关的协议和组件：1.RTP(Real-timeTransportProtocol)：这是一个传输实时数据，如音频、视频或模拟数据流的协议。在WebRTC中，RTP用于传输音频和视频数据。2.RTCP(Real

ELK日志分析系统

目录1、ELK日志1.1、概述1.2.1、每个组件的简介：1.2.2、可以添加的组件1.3、使用ELK的原因1.4、完整日志系统基本特征1.5、日志服务系统1.6、ELK的工作原理：1.7、日志处理步骤2、Elasticsearch个绍2.1、Elasticsearch的概述2.2、Elasticsearch核心概念2

算法刷题 week4

目录1.斐波那契数列题目题解(递推+滚动变量)O(n)剑指offer10-II青蛙跳台阶问题题目题解10.旋转数组的最小数字题目题解(二分)O(n)1.斐波那契数列题目题解(递推+滚动变量)O(n)这题的数据范围很小，我们直接模拟即可。当数据范围很大时，就需要采用其他方式了，可以参考求解斐波那契数列的若干方法。F(0)

详解WebSocket

目录1.WebSocket是什么？2.WebSocket的通信过程3.WebSocket的报文结构4.JAVA中的WebSocket1.WebSocket是什么？在传统的BS体系中，请求响应一直是单向的，服务器一直扮演的”被动“的角色，浏览器发起请求去访问服务器，服务器才会返回响应。这种单向的模式让实时通信、消息推送一

Vue3项目中使用插槽

前言：此文章仅记录插槽的使用，用于自己后期学习查看。代码实现过程中，HelloWorld为子组件，HomeView为父组件<slot></slot>元素：是一个插槽出口，是写在子组件中的，表示了父组件提供的插槽内容将在子组件哪一个位置展示。默认插槽：HellowVorld组件内容：情况一：HomeView组件不提供插槽

百川的大模型KnowHow

卷友们好，我是rumor。大模型是一个实验工程，涉及数据清洗、底层框架、算法策略等多个工序，每个环节都有很多坑，因此知道如何避坑和技术选型非常重要，可以节省很多算力和时间，说白了就是一摞摞毛爷爷。近期百川智能发布了Baichuan2的7B和13B版本，可能不少卷友被刷屏惯了没有仔细看，他们在放出模型的同时也给了一份技术

vue.js路由如何配置，及全局前置路由守卫(做所有请求登录验证)、路由独享守卫（访问路由前身份验证）

1.编写路由配置文件router.js以及配置全局前置路由守卫和路由独享守卫//路由配置文件//作用是将指定的路由地址切换成对应的模块//eslint-disable-next-lineno-unused-varsimportRouterfrom"vue-router"//eslint-disable-next-lin

HelpLook全新升级！定制AI问答机器人，企业内容中心焕新

一直以来，企业都在努力解决内外部“企业知识管理”问题：从纸质手册发放，转线上电子文档传阅(pdf/ppt/word等)，再到整理客户常见问题(FAQ)和内部知识库(wiki)，但始终没有找到一套完整方案将“企业知识”很好地集中管理及分享查阅。持续困扰大家的⬇️❌要么是软件系统更新太困难、或搭建费用太昂贵❌要么是没人知道

MybatisX快速生成代码（mybatis plus模板）

文章目录1、概述2、基本使用2.1、插件安装2.2、集成数据库1、概述MybatisX是一款基于IDEA的快速开发插件，为效率而生。在开发过程中，相信大家都遇到过一个数据库内有着十几张或比之更多的数据表的情况。而面对这众多的数据表，实体类、服务类、服务实现类、Mapper接口及其对应的XML文件更是头大，这无疑是成倍增

IPV6真的神

ipv6地址短缺的现实，万物互联的未来<全局可达性>1、路由表更小。地址分配遵循聚类原则，路由表用Entry的路由表示一片子网。2、更强的组播以及流控制。为媒体服务质量QoS。控制提供了良好的网络平台。3、DHCPv6,自动配置地址。使得网（尤其是局域网）的管理更加方便和快捷。4、自带IPSec，端对端安全。在网络层的

热文推荐
  1. 服务器数据恢复-ESX SERVER常见故障的数据恢复的可能性分析

    ESXSERVER常见故障表现：1、因光纤存储设备连接至非ESX环境，共享未互斥，对存储进行的改写操作（如：重装系统，WINDOWS初始化，格式化等）导致存储结构损坏。2、卷升级、变更时分区表或VMFS卷结构异常。3、VMFS存储中VMDK被删除。4、VMFS被格式化。ESXSERVER故障解决方案：1、检测是否存在硬

  2. [X3m]Ubuntu 根文件系统制作

    使用ubuntu20.04sudoapt-getinstallwgetca-certificatesdevice-tree-compilerpvbclzopzipbinfmt-support\build-essentialccachedebootstrapntpdategawkgcc-arm-linux-gnueabi

  3. 【Django】 rest_framework接口开发流程及接口组成

    rest_framework接口开发流程及接口组成使用restframework框架开发接口，方式应该有6、7种，每个人的习惯不同，用的方法也不一样，再次不再一一详述。我比较常用：ModelSerializer+GenericAPIView原因是用视图函数+装饰器、视图类+继承APIView、或者混入Mixin这三种封

  4. React 窗口防抖

    假如有这种需求：浏览器的窗口不断缩小变大，此时页面的布局不会自动刷新，需要手动刷新页面才会自适应大小。此时我们立马就会想到使用windows的onresize方法window.onresize=()=>{//重新渲染画面root.render(<App/>)}但是新的问题就会出现这个onresize方法会被调用多次，多

  5. AI实战营第二期 第十节 《MMagic 代码课》——笔记11

    AI实战营第二期第十节《MMagic代码课》MMagic(MultimodalAdvanced,Generative,andIntelligentCreation)是一个供专业人工智能研究人员和机器学习工程师去处理、编辑和生成图像与视频的开源AIGC工具箱。MMagic允许研究人员和工程师使用最先进的预训练模型，并且可

  6. 从四个角度全面认识 ChatGPT

    传统语言模型是什么样的？ChatGPT涌现出了哪些新能力？这些能力都是怎么做到的？在ChatGPT大模型时代，我们应该怎么做？当下最引人注目的语言模型ChatGPT如火如荼，主要还是因为其能力远远超越了传统模型。本文将对ChatGPT与传统模型进行对比，深入探讨ChatGPT具备的强大能力以及其背后的技术来源。此外还将

  7. Linux环境变量

    在Linux系统中，环境变量是用来定义系统运行环境的一些参数。例如，每个用户不同的家目录（HOME）、邮件存放位置（MAIL）等¹。环境变量的名称一般都是大写的，这是一种约定俗成的规范。以下是一些Linux系统中重要的环境变量：HOME：用户的主目录（也称家目录）SHELL：用户使用的Shell解释器名称PATH：定义

  8. 【深度学习实验】线性模型（二）：使用NumPy实现线性模型：梯度下降法

    目录一、实验介绍二、实验环境1.配置虚拟环境2.库版本介绍三、实验内容0.导入库1.初始化参数2.线性模型linear_model3.损失函数loss_function4.梯度计算函数compute_gradients5.梯度下降函数gradient_descent6.调用函数一、实验介绍使用NumPy实现线性模型：梯

  9. 基于量子粒子群算法（QPSO）优化LSTM的风电、负荷等时间序列预测算法（Matlab代码实现）

    💥💥💞💞欢迎来到本博客❤️❤️💥💥🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。⛳️座右铭：行百里者，半于九十。📋📋📋本文目录如下：🎁🎁🎁目录💥1概述📚2运行结果🎉3参考文献🌈4Matlab代码实现💥1概述本文基于QPSO-LSTM算法进行负荷、光伏和风电