React基本知识点整理

React中引入样式的2种方式

1,内联样式

import React, { Component } from 'react'
export default class index extends Component {render() {return (<div><div style={{color:"red",fontSize:"18px"}}>内联样式</div></div>)}
}

2,声明式内联样式

import React, { Component } from 'react'
const styleCss={"font-size":"20px",color:"red"
}
export default class index extends Component {render() {return (<div><div style={styleCss}>声明式内联样式</div></div>)}
}

props参数传递(父传子)

//父组件
import React, { Component } from 'react'
import Child from './reac'
export default class index extends Component {state={data:[{id:"001",name:"张三"},{id:"002",name:"李四"},{id:"003",name:"王五"},]}render() {return (<div>接受父组件传递过来的数据<Child data={this.state.data}></Child></div>)}
}//子组件
import React, { Component } from 'react'export default class index extends Component {render() {console.log(this.props.data)return (<div><ul>{this.props.data.map((item)=>{return <li key={item.id}>{item.name}</li>})}</ul></div>)}
}

子组件传参给父组件(子传父)

//父组件
import React, { Component } from 'react'
import Child from './reac'
export default class index extends Component {state={name:""}getdata=(msg)=>{this.setState({name:msg})}render() {return (<div>接受子组件传递过来的数据{this.state.name}<Child getdata={this.getdata}></Child></div>)}
}//子组件
import React, { Component } from 'react'export default class index extends Component {render() {return (<div><button onClick={()=>{this.props.getdata("哈哈")}}>点击获取数据</button></div>)}
}

路由组件传递params参数(父传子)

//父组件
import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'export default class Message extends Component {state = {messageArr:[{id:'01',title:'消息1'},{id:'02',title:'消息2'},{id:'03',title:'消息3'},]}render() {const {messageArr} = this.statereturn (<div><ul>{messageArr.map((msgObj)=>{return (<li key={msgObj.id}>{/* 向路由组件传递params参数 */}<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link></li>)})}</ul><hr/>{/* 声明接收params参数 */}<Route path="/home/message/detail/:id/:title" component={Detail}/></div>)}
}//子组件
import React, { Component } from 'react'const DetailData = [{id:'01',content:'张三'},{id:'02',content:'李四'},{id:'03',content:'王五'}
]
export default class Detail extends Component {render() {console.log(this.props);// 接收params参数const {id,title} = this.props.match.paramsconst findResult = DetailData.find((detailObj)=>{return detailObj.id === id})return (<ul><li>ID:{id}</li><li>TITLE:{title}</li><li>CONTENT:{findResult.content}</li></ul>)}
}

路由组件传递search参数(父传子)

//父组件
import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'export default class Message extends Component {state = {messageArr:[{id:'01',title:'消息1'},{id:'02',title:'消息2'},{id:'03',title:'消息3'},]}render() {const {messageArr} = this.statereturn (<div><ul>{messageArr.map((msgObj)=>{return (<li key={msgObj.id}>{/* 向路由组件传递search参数 */}<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link></li>)})}</ul><hr/>{/* search参数无需声明接收,正常注册路由即可 */}<Route path="/home/message/detail" component={Detail}/></div>)}
}//子组件
import React, { Component } from 'react'
import qs from 'querystring'const DetailData = [{id:'01',content:'张三'},{id:'02',content:'李四'},{id:'03',content:'王五'}
]
export default class Detail extends Component {render() {console.log(this.props);// 接收search参数const {search} = this.props.locationconst {id,title} = qs.parse(search.slice(1))const findResult = DetailData.find((detailObj)=>{return detailObj.id === id})return (<ul><li>ID:{id}</li><li>TITLE:{title}</li><li>CONTENT:{findResult.content}</li></ul>)}
}

路由组件传递state参数(父传子)

//父组件
import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'export default class Message extends Component {state = {messageArr:[{id:'01',title:'消息1'},{id:'02',title:'消息2'},{id:'03',title:'消息3'},]}render() {const {messageArr} = this.statereturn (<div><ul>{messageArr.map((msgObj)=>{return (<li key={msgObj.id}>{/* 向路由组件传递state参数 */}<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link></li>)})}</ul><hr/>{/* state参数无需声明接收,正常注册路由即可 */}<Route path="/home/message/detail" component={Detail}/></div>)}
}//子组件
import React, { Component } from 'react'
// import qs from 'querystring'const DetailData = [{id:'01',content:'你好,中国'},{id:'02',content:'你好,尚硅谷'},{id:'03',content:'你好,未来的自己'}
]
export default class Detail extends Component {render() {console.log(this.props);// 接收state参数const {id,title} = this.props.location.state || {}const findResult = DetailData.find((detailObj)=>{return detailObj.id === id}) || {}return (<ul><li>ID:{id}</li><li>TITLE:{title}</li><li>CONTENT:{findResult.content}</li></ul>)}
}

路由的其本知识点(react-router6)

1,一级路由

//父元素
import React from 'react'
import {NavLink,Routes,Route} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'export default function App() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 路由链接 */}<NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}<Routes><Route path="/about" element={<About/>}/><Route path="/home" element={<Home/>}/></Routes></div></div></div></div></div>)
}//两上要接受的子元素 about和Home
import React from 'react'export default function About() {return (<h3>我是About的内容</h3>)
}import React from 'react'export default function Home() {return (<h3>我是Home的内容</h3>)
}

2,重定向

//父组件
import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'export default function App() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 路由链接 */}<NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}<Routes><Route path="/ABOUT" element={<About/>}/><Route path="/home" element={<Home/>}/><Route path="/" element={<Navigate to="/about"/>}/></Routes></div></div></div></div></div>)
}//about和home
import React from 'react'export default function About() {return (<h3>我是About的内容</h3>)
}import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'export default function Home() {const [sum,setSum] = useState(1)return (<div><h3>我是Home的内容</h3>{sum === 2 ? <Navigate to="/about" replace={true}/> : <h4>当前sum的值是:{sum}</h4>}<button onClick={()=>setSum(2)}>点我将sum变为2</button></div>)
}

3,react导航高亮

//父元素   这里的样式reactStyle需要提前声明import React from 'react'
//引入路由
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
//引入组件
import About from './Pages/About'
import Home from './Pages/Home'export default function App() {function computetClassStyle({isActive}){return isActive?'list-group-item reactStyle':'list-group-item'}return (<div><div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className={computetClassStyle} to="about">About</NavLink><NavLink className={computetClassStyle} to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><h3>新路由</h3>{/* 注册路由 */}<Routes><Route path='/About' element={<About></About>}></Route><Route path='/Home' element={<Home></Home>}></Route><Route path='/' element={<Navigate to="/About"></Navigate>}></Route></Routes></div></div></div></div></div></div>)
}//两上要接受的子元素 about和Home
import React from 'react'export default function About() {return (<h3>我是About的内容</h3>)
}import React from 'react'export default function Home() {return (<h3>我是Home的内容</h3>)
}

4,路由的统一管理

//在主文件中使用
import React from 'react'
//引入路由
import {NavLink,useRoutes} from 'react-router-dom'
import router from './router'export default function App() {//路由表的使用const element=useRoutes(router)return (<div><div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group"><NavLink className="list-group-item" to="about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><h3>新路由</h3>{/* 注册路由 */}{element}</div></div></div></div></div></div>)
}//router中的路由列表
import Home from "../Pages/Home"
import About from "../Pages/About"
import { Navigate } from "react-router-dom"
export default [{path:'/about',element:<About></About>},{path:'/Home',element:<Home></Home>},{path:'/',element:<Navigate to="/about"></Navigate>}
]

5,路由的嵌套,父里面包含子

6,search传递参数

//参数传递组件
import React,{useState} from 'react'
import { Link,Outlet } from 'react-router-dom'export default function Message() {const [message] =useState([{id:'001',title:'张三',content:'kdjfkdfj'},{id:'002',title:'李四',content:'45612'},{id:'003',title:'王五',content:'kdjferetdkdfj'},{id:'004',title:'赵六',content:'kdjadffkdfj'}])return (<div><ul>{message.map((m)=>{return (<li key={m.id}>{/* 使用search带参数 */}<Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link></li>)})}			</ul>{/* 规定路由展示的位置 */}<Outlet></Outlet></div>)
}//参数接收组件
import React from 'react'
import { useSearchParams } from 'react-router-dom'export default function Detail() {const [search]=useSearchParams()console.log(search.get('id'))const id=search.get('id')const title=search.get('title')const content=search.get('content')return (<div><ul><li>{id}</li><li>{title}</li><li>{content}</li></ul></div>)
}

7,state传递参数

//传递组件
import React,{useState} from 'react'
import { Link,Outlet } from 'react-router-dom'export default function Message() {const [message] =useState([{id:'001',title:'张三',content:'kdjfkdfj'},{id:'002',title:'李四',content:'45612'},{id:'003',title:'王五',content:'kdjferetdkdfj'},{id:'004',title:'赵六',content:'kdjadffkdfj'}])return (<div><ul>{message.map((m)=>{return (<li key={m.id}>{/* 使用state带参数 state里面需要包含一个对象*/}<Link to="detail" state={{id:m.id,title:m.title,content:m.content}}>{m.title}</Link></li>)})}			</ul>{/* 规定路由展示的位置 */}<Outlet></Outlet></div>)
}//接受组件
import React from 'react'
//需要使用useLocation
import { useLocation } from 'react-router-dom'export default function Detail() {const {state:{id,title,content}}=useLocation()return (<div><ul><li>{id}</li><li>{title}</li><li>{content}</li></ul></div>)
}

8,编程式路由导航

//传递组件
import React,{useState} from 'react'
import { Link,Outlet,useNavigate } from 'react-router-dom'export default function Message() {const [message] =useState([{id:'001',title:'张三',content:'kdjfkdfj'},{id:'002',title:'李四',content:'45612'},{id:'003',title:'王五',content:'kdjferetdkdfj'},{id:'004',title:'赵六',content:'kdjadffkdfj'}])//编辑式路由导航,需要借助useNavigate//2,useNavigate还可以实现前进和后退 传入对应的参数即可const Nav=useNavigate()function showDetail(m){Nav('Detail',{replace:false,state:{id:m.id,title:m.title,content:m.content}})}return (<div><ul>{message.map((m)=>{return (<li key={m.id}>{/* 使用state带参数 state里面需要包含一个对象*/}<Link to="detail" state={{id:m.id,title:m.title,content:m.content}}>{m.title}</Link><button onClick={()=>showDetail(m)}>查看详情</button></li>)})}			</ul>{/* 规定路由展示的位置 */}<Outlet></Outlet></div>)
}//接受组件
import React from 'react'
//需要使用useLocation
import { useLocation } from 'react-router-dom'export default function Detail() {const {state:{id,title,content}}=useLocation()return (<div><ul><li>{id}</li><li>{title}</li><li>{content}</li></ul></div>)
}

setState更新状态的2种写法

(1). setState(stateChange, [callback])------对象式的setState
            1.stateChange为状态改变对象(该对象可以体现出状态的更改)
            2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
                    
    (2). setState(updater, [callback])------函数式的setState
            1.updater为返回stateChange对象的函数。
            2.updater可以接收到state和props。
            4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
总结:
        1.对象式的setState是函数式的setState的简写方式(语法糖)
        2.使用原则:
                (1).如果新状态不依赖于原状态 ===> 使用对象方式
                (2).如果新状态依赖于原状态 ===> 使用函数方式
                (3).如果需要在setState()执行后获取最新的状态数据, 
                    要在第二个callback函数中读取

//父组件 App.js
//import logo from './logo.svg';
import React, { Component } from 'react'
import './App.css'
import SetStateA from './components/SetState1'export default class App extends Component{render(){return(<div><SetStateA></SetStateA></div>)}
}//子组件 components
import React, { Component } from 'react'export default class SetStateA extends Component {//对象式的setStatestate={count:0}add=()=>{//获取原来count的值const {count}=this.state//更新状态this.setState({count:count+1},()=>{console.log('监测值的改变'+this.state.count)})}//函数式的写法addNum=()=>{this.setState((state,props)=>{console.log(props)return {count:state.count+1}})}render() {return (<div><h1>当前求和为{this.state.count}</h1><button onClick={this.add}>对象式</button><button onClick={this.addNum}>函数式</button></div>)}
}

路由组件的lazyLoad

1,lazyLoad主要用于大量路由切换的时候,根据需要加载对应的路由信息

2,通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包

3,通过<Suspense>指定在加载得到路由

//在父组件App.js中引入子组件
//import logo from './logo.svg';
import React, { Component } from 'react'
import './App.css'
import Lazyload from './components/Layload'export default class App extends Component{render(){return(<div><Lazyload></Lazyload></div>)}
}
//lazyload组件里面包含两个子组件home和about
import React, { Component,lazy,Suspense } from 'react'
import {NavLink,Route} from 'react-router-dom'
//以前的加载方式
// import Home from './Home'
// import About from './About'//使用lazy
const Home=lazy(()=>import('./Home'))
const About =lazy(()=>import('./About'))export default class Lazyload extends Component {render() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 在React中靠路由链接实现切换组件--编写路由链接 */}<NavLink className="list-group-item" to="/About">About</NavLink><NavLink className="list-group-item" to="/Home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}<Suspense fallback={<h1>正在加载中......</h1>}><Route path="/About" component={About}/><Route path="/Home" component={Home}/></Suspense></div></div></div></div></div>)}
}//about和home两个子组件中的内容
//about
import React, { Component } from 'react'export default class About extends Component {render() {return (<div>About</div>)}
}
//home
import React, { Component } from 'react'export default class Home extends Component {render() {return (<div>Home</div>)}
}

State Hook

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)  
(3). useState()说明:
        参数: 第一次初始化指定的值在内部作缓存
        返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:
        setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
        setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

//app.js
import React, { Component } from 'react'
import './App.css'
import SetStateA from './components/Hooks'export default class App extends Component{render(){return(<div><SetStateA></SetStateA></div>)}
}//函数式子组件
import React from 'react'
//函数式组件的
function Demo(){const [count,setCount] = React.useState(0)const [name,setName]=React.useState('张三')//console.log(count,setCount)function add(){console.log("点击事件")//setCount(count+1)//第一种写法//第二种写法setCount((count)=>{return count+1})}function changeName(){setName("李四")}return (<div><h2>当前求和为{count}</h2><h2>名字是{name}</h2><button onClick={add}>加1</button><button onClick={changeName}>点我改名字</button></div>)
}
export default Demo

Ref Hook

(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()

//父组件
import React, { Component } from 'react'
import './App.css'
import SetStateA from './components/Hooks'export default class App extends Component{render(){return(<div><SetStateA></SetStateA></div>)}
}
//子组件
import React from 'react'
//函数式组件的
function Demo(){const myRef = React.useRef()function show(){alert(myRef.current.value)}return (<div><input type="text" ref={myRef} /><button onClick={show}>点我提示</button></div>)
}
export default Demo

Fragment

可用于取代一个真实的DOM根标签

import React, { Component,Fragment } from 'react'export default class FragMent extends Component {render() {return (<Fragment><input type="text" /><button>点击</button></Fragment>)}
}

Component

> 1. 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低
>
> 2. 只当前组件重新render(), 就会自动重新render子组件,纵使子组件没有用到父组件的任何数据 ==> 效率低

### 效率高的做法

>  只有当组件的state或props数据发生改变时才重新render()

### 原因

>  Component中的shouldComponentUpdate()总是返回true

### 解决

    办法1: 
        重写shouldComponentUpdate()方法
        比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
    办法2:  
        使用PureComponent
        PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
        注意: 
            只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
            不要直接修改state数据, 而是要产生新数据
    项目中一般使用PureComponent来优化

 render props(向组件内部动态传入带内容的结构)

Vue中: 
        使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
    React中:
        使用children props: 通过组件标签体传入结构
        使用render props: 通过组件标签属性传入结构,而且可以携带数据,一般用render函数属性

### children props

    <A>
      <B>xxxx</B>
    </A>
    {this.props.children}
    问题: 如果B组件需要A组件内的数据, ==> 做不到 

### render props

    <A render={(data) => <C data={data}></C>}></A>
    A组件: {this.props.render(内部state数据)}
    C组件: 读取A组件传入的数据显示 {this.props.data} 

//父组件
import React, { Component } from 'react'
import './App.css'
import SetStateA from './components/RenderProps'export default class App extends Component{render(){return(<div><SetStateA></SetStateA></div>)}
}//子组件  父组件中包含子组件的子组件,并实现传递数据
import React, { Component } from 'react'
import './index.css'export default class Parent extends Component {render() {return (<div className='parent'><h3>我是props样式</h3><h4>这是父组件里面又包含了一个子组件</h4><A render={(name)=><B name={name}/>}/></div>)}
}class A extends Component{state={name:"张三"}render(){const {name} = this.statereturn(<div className='a'><h3>我是A组件</h3><h4>{this.props.render(name)}</h4></div>)}
}class B extends Component{render(){return(<div className='b'><h3>我是B组件{this.props.name}</h3></div>)}
} 

错误边界

1,错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面

2,只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

3,使用方式getDerivedStateFromError

//父组件
import React, { Component } from 'react'
import './App.css'
import SetStateA from './components/ErrorDer'export default class App extends Component{render(){return(<div><SetStateA></SetStateA></div>)}
}//子组件里面包含子组件
import React, { Component } from 'react'
import Child from './child'export default class index extends Component {//用于标识子组件是否产生错误state={hasError:""}static getDerivedStateFromError(error){console.log("@@@",error)return {hasError:error}}//用于子组件会出现的问题,在父组件提交做预判render() {return (<div>{this.state.hasError?<h2>请稍后在试吧</h2>:<Child></Child>}</div>)}
}
//child组件
import React, { Component } from 'react'export default class index extends Component {//对应的子组件里面出现的错误state={// users:[//     {id:"01",name:"张三"},//     {id:"02",name:"李四"},//     {id:"03",name:"王五"}// ]users:'张三'}//只能处理生命周期里面处理的错误  一般用于处理render里面出现的错误render() {return (<div><h2>我是子组件</h2>{this.state.users.map((userObj)=>{return <h3 key={userObj.id}>{userObj.name}</h3>})}</div>)}
}

组件通信方式总结

1,组件间的关系:

- 父子组件
- 兄弟组件(非嵌套组件)
- 祖孙组件(跨级组件)

2,几种通信方式:

        1.props:
            (1).children props
            (2).render props
        2.消息订阅-发布:
            pubs-sub
        3.集中式管理:
            redux
        4.conText:
            生产者-消费者模式

3, 比较好的搭配方式:
        父子组件:props
        兄弟组件:消息订阅-发布、集中式管理
        祖孙组件(跨级组件):消息订阅-发布、集中式管理、conText(开发用的少,封装插件用的多)

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

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

相关文章

Promise自定义封装

目录 Promise构造函数 then方法封装 catch方法封装 resolve方法封装 reject方法封装 all方法封装 race方法封装 这篇文章主要是介绍如何自己封装Promise构造函数以及其相应的方法。Promise是JS中的重点&#xff0c;很多的面试都会问到。因此需要对其有比较深入地认识。看…

创意项目开源,文生图、排序/优选等...,持续开源更新!!

热烈欢迎大家在git上star&#xff01;&#xff01;&#xff01;冲鸭&#xff01;&#xff01;&#xff01; 1.dalle1在厨房家具中文场景上训练。 GitHub - leeguandong/DALLE1: dalle1在中文家具场景的微调&#xff0c;效果并不好dalle1在中文家具场景的微调&#xff0c;效果…

【JavaSE】异常(学习笔记)

一、异常概述 异常&#xff1a;程序出错了 1、异常的分类 编译时异常&#xff1a;受检异常运行时异常&#xff1a;非受检异常 2、异常体系&#xff1a;Throwable Error&#xff1a;严重问题&#xff0c;不需要处理Exception&#xff1a;异常类&#xff0c;程序本身可以处理…

MYSQL报错 [ERROR] InnoDB: Unable to create temporary file; errno: 0

起因 服务器的mysql不支持远程访问&#xff0c;在修改完相关配置后重启服务出错。 2023-12-03T10:12:23.895459Z 0 [Note] C:\Program Files\MySQL\MySQL Server 5.7\bin\mysqld.exe (mysqld 5.7.22-log) starting as process 15684 ... 2023-12-03T10:12:23.908886Z 0 [Note…

Google Guava 事件总线工具使用详解

文章目录 事件总线特点使用 事件总线 Guava 事件总线&#xff08;EventBus&#xff09;是 Google Guava 库中的一个组件&#xff0c;用于实现发布-订阅模式的事件通信。它提供了一种简单而强大的方式&#xff0c;让不同的组件之间能够解耦、相互通信、完成事件处理。 特点 注…

C语言--每日选择题--Day33

第一题 1. 在以下给出的表达式中&#xff0c;与do-while(E)语句中的(E)不等价的表达式是&#xff08; &#xff09; A&#xff1a;(!E 0) B&#xff1a;(E > 0 || E < 0) C&#xff1a;(E 0) D&#xff1a;(E ! 0) 答案及解析 C 首先要知道(E)这个条件成立无非两种&…

nodejs基于vue的社区物业缴费报修管理系统7vwc6

运行软件:vscode 前端nodejsvueElementUi 语言 node.js 框架&#xff1a;Express/koa 前端:Vue.js 数据库&#xff1a;mysql 开发软件&#xff1a;VScode/webstorm/hbuiderx均可 数据库用MySQL,后台用vue框架 基本要求&#xff1a; 1. 对项目进行详细实际的需求分析。 2. 在网…

前端面试灵魂提问(1)

1.自我介绍 2.在实习中&#xff0c;你负责那一模块 3.any与unknow的异同 相同点&#xff1a;any和unkonwn 可以接受任何值 不同点&#xff1a;any会丢掉类型限制&#xff0c;可以用any 类型的变量随意做任何事情。unknown 变量会强制执行类型检查&#xff0c;所以在使用一个…

小杨X型矩阵

对于这道题&#xff0c;我们首先需要了解它的思路 他一共要考虑两条线 左斜线和右斜线 --- --- ---- --- --- 像上面这样&#xff1b; 两条线的判断条件分别为 ij 及 ijn1 代码如下&#xff1a; #include<iostream> using namespace std; int main() {int n;cin&g…

2024年天津财经大学珠江学院专升本专业课报名缴费操作流程

天津财经大学珠江学院专升本专业课报名缴费操作流程 天津财经大学珠江学院专升本专业课报名就是缴费&#xff0c;只需要使用中国银行交专业课报名费即可。 缴费操作流程如下&#xff1a; 登录中国银行手机 APP—点击“生活”—在界面 最左上角选择定位为“天津市”—点击“生…

❀My学习Linux命令小记录(6)❀

目录 ❀My学习Linux命令小记录&#xff08;6&#xff09;❀ 26.ps指令 27.grep指令 28.awk指令 29.sed指令 30.wc指令 ❀My学习Linux命令小记录&#xff08;6&#xff09;❀ 26.ps指令 功能说明&#xff1a;报告当前系统的进程状态。 (ps.ps命令 用于报告当前系统的进…

Jupyter NoteBook未授权访问漏洞

任务一&#xff1a; 复现未授权访问的漏洞 任务二&#xff1a; 利用Jupter Notebook控制台执行系统命令&#xff0c;读取/etc/passwd内容 1.搭建环境 2.new下面直接进入终端&#xff0c;而且也不需要登录&#xff0c;我就直接进入了管理界面 3.直接把指令输入进入&#xf…

linux 下ttyAMA0,ttyS0,ttyUSB0啥区别

技术上讲&#xff0c;ttyS0 的原始含义似乎是“第一个串行端口*使用与原始 IBM PC UART、8250 芯片兼容的 UART 实现。ARM 上的 ttyAMA0 和例如 ttySAC0 将意味着“使用另一个特定硬件实现实现的第一个串行端口”。ttyUSB0 指的是第一个 USB 到串行转换器。ttyACM0 指的是使用 …

【自动化测试教程】Java+Selenium自动化测试环境搭建

本主要介绍以Java为基础&#xff0c;搭建Selenium自动化测试环境&#xff0c;并且实现代码编写的过程。 1.Selenium介绍 Selenium 1.0 包含 core、IDE、RC、grid 四部分&#xff0c;selenium 2.0 则是在两位大牛偶遇相互沟通决定把面向对象结构化&#xff08;OOPP&#xff09…

【NGINX--11】利用访问日志、错误日志和 请求跟踪进行调试和故障排除

1、配置访问日志 需要配置访问日志格式&#xff0c;以将内置变量添加到请求日志中。 配置访问日志格式&#xff1a; http {log_format geoproxy[$time_local] $remote_addr $realip_remote_addr $remote_user $proxy_protocol_server_addr $proxy_protocol_server_port $r…

TCP三次握手与四次挥手

TCP三次握手与四次挥手 TCP三次握手与四次挥手解析 客户端连接服务器&#xff08;三次握手&#xff09;客户端关闭与服务器连接&#xff08;四次挥手&#xff09; 总结 TCP三次握手与四次挥手、流量控制(滑动窗口)、拥塞控制、半连接状态、2MSL TCP三次握手与四次挥手 TCP标…

fasterxml 注解组装实体

使用 FasterXML Jackson 的注解 JsonTypeInfo 和 JsonSubTypes 可以实现多态类型的处理。在你的 User 类上&#xff0c;你可以添加这些注解来指示 Jackson 如何处理多态类型。 以下是使用 JsonTypeInfo 和 JsonSubTypes 注解的 User 类的修改&#xff1a; import com.fasterx…

【C语言】【数据结构】【手搓二叉树】用数组实现一个二叉树

这里用数组&#xff08;顺序表&#xff09;实现一个二叉树 Heap.h #include<stdio.h> #include<stdlib.h> #include<assert.h> #include<stdbool.h> typedef int HPDataType; typedef struct Heap {HPDataType* a;int size;int capacity; }HP; void …

LongAddr

目录 1. 引言 2. AtomicInteger的局限性 3. AtomicInteger与LongAdder 的性能差异 4.LongAdder 的结构 LongAddr架构 Striped64中重要的属性 Striped64中一些变量或者方法的定义 Cell类 5. 分散热点的原理 具体流程图 6. 在实际项目中的应用 7. 总结 1. 引言 在这一…

抖音外卖商品模型

目录 一、抖音外卖商品模型 二、商家运营流程 &#xff08;一&#xff09;商家入驻流程 &#xff08;二&#xff09;商品发布流程 三、推广带货流程 &#xff08;一&#xff09;短视频带货 &#xff08;二&#xff09;直播视频带货 【直播工具】 【直播流程】 直播前…