当前位置: 首页 > news >正文

重拾React框架学习笔记总结

重拾React框架学习笔记总结

环境搭建

  • nvm

nvm用来管理node版本。

brew install nvmnvm ls-remote  // 查看所有的node可用版本
nvm list  // 查看已安装node版本
nvm install 版本号  // 下载指定node版本,如nvm install v11.14.0
nvm use 版本号  // 使用指定版本
nvm alias default  // 设置默认版本,每次启动终端都使用该版本
  • yarn

yarn管理依赖包

npm install -g yarn在国内,某些情况使用npm和yarn可能无法正常安装一个库,这个时候我们可以选择使用cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org
  • create-react-app

React脚手架

npm install -g create-react-app// 创建一个项目
create-react-app demo_app
// 启动项目
cd demo_app  
yarn start

知识点

  • 组件分类

1、函数组件和类组件
2、有状态组件和无状态组件
3、展示型组件和容器型组件

类组件的定义有如下要求:
组件的名称是大写字符开头(无论类组件还是函数组件)
类组件需要继承自React.Component
类组件必须实现render函数

函数组件是使用function来进行定义的函数,只是这个函数会返回和类组件中render函数返回一样的内容。
函数组件有自己的特点:
没有生命周期,也会被更新并挂载,但是没有生命周期函数
没有this(组件实例)
没有内部状态(state)

  • 常用生命周期
constructor() {super();
}render() {return (<div></div>)
}componentDidMount() {
}componentDidUpdate(prevProps, prevState, snapshot) {
}componentWillUnmount() {
}
  • 组件之间的通信

1、props传值
2、回调函数
3、Context
4、事件总线events

  • 参数校验以及默认值

传递给子组件的数据,有时候我们希望进行验证。
1、如果你项目中默认继承了Flow或者TypeScript,那么直接就可以进行类型验证。
2、通过prop-types 库来进行参数验证。
3、如果没有传递,希望有默认值,可以使用defaultProps

import PropTypes from 'prop-types';static propTypes = {name: PropTypes.string
}static defaultProps = {name: "default"
}
  • setState异步结果获取
1、在setState的回调函数中获取
this.setState({index: index
}, () => {console.log("获取setState异步结果 index = " + this.state.index);
})2、在生命周期方法中获取componentDidUpdate
componentDidUpdate() {console.log("获取setState异步结果 index = " + this.state.index);
}

setState一定是异步的吗?
其实分成两种情况:
在组件生命周期或React合成事件中,setState是异步;
在setTimeout或者原生dom事件中,setState是同步;

  • 渲染优化

1、通过控制shouldComponentUpdate的返回值来判断是否需要重新渲染页面
2、PureComponent组件默认实现了shouldComponentUpdate
3、高阶memo组件(可以包裹函数组件进行渲染优化)

  • ref的使用

在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作:
1、管理焦点,文本选择或媒体播放
2、触发强制动画
3、集成第三方DOM库

创建ref的三种方式
1、传入一个对象
2、传入一个函数


import React, { Component, createRef } from 'react'constructor() {super()// 方法一:this.testRef = createRef();// 方法二:this.testRef2 = null;
}render() {return (<div>// 方法一:<div ref={this.testRef}>获取ref</div>// 方法二:<div ref={arg => this.testRef2 = arg}>获取ref2</div></div>)
}// 方法一
console.log(this.testRef.current);
// 方法二
console.log(this.testRef2);
  • 高阶组件

定义:高阶组件是一个函数,参数是一个组件,返回值是一个组件

  • ref的转发

因为函数式组件没有实例,所以不能获取到对应的组件对象.
在开发中我们可能想要获取函数式组件中某个元素的DOM,可以通过forwardRef高阶函数;

import React, { Component, createRef, forwardRef } from 'react'const Home = forwardRef(function(props, ref) {return (<div><div ref={ref}>ref div</div></div>)
});export default class App extends Component {constructor(props) {super();this.devRef = createRef();}render() {return (<div><Home ref={this.devRef}/><button onClick={e => this.getRef()}>获取ref</button></div>)}getRef() {console.log(this.devRef.current);}
}
  • fragment

在之前的开发中,我们总是在一个组件中返回内容时包裹一个div元素.
我们又希望可以不渲染这样一个div应该如何操作呢?
使用Fragment,Fragment 允许你将子列表分组,而无需向 DOM 添加额外节点;

React还提供了Fragment的短语法:
它看起来像空标签 <> </>;
但是,如果我们需要在Fragment中添加key,那么就不能使用短语法

render() {return (<Fragment key="fragment"><Home ref={this.devRef}/><button onClick={e => this.getRef()}>获取ref</button></Fragment>)
}render() {return (<><Home ref={this.devRef}/><button onClick={e => this.getRef()}>获取ref</button></>)
}
  • React中编写CSS

1、内联样式

内联样式是官方推荐的一种css样式的写法:
style 接受一个采用小驼峰命名属性的 JavaScript 对象,,而不是 CSS 字符串;
并且可以引用state中的状态来设置相关的样式;

内联样式的优点:
1.内联样式, 样式之间不会有冲突
2.可以动态获取当前state中的状态

内联样式的缺点:
1.写法上都需要使用驼峰标识
2.某些样式没有提示
3.大量的样式, 代码混乱
4.某些样式无法编写(比如伪类/伪元素)

<h2 style={{fontSize: "50px", color: "red"}}>标题</h2>

2、普通的CSS

普通的css我们通常会编写到一个单独的文件,之后再进行引入。
这样的编写方式和普通的网页开发中编写方式是一致的:
1、如果我们按照普通的网页标准去编写,那么也不会有太大的问题;
2、但是组件化开发中我们总是希望组件是一个独立的模块,即便是样式也只是在自己内部生效,不会相互影响;
3、但是普通的css都属于全局的css,样式之间会相互影响;
4、这种编写方式最大的问题是样式之间会相互层叠掉;

3、css modules

React的脚手架已经内置了css modules的配置:
1、.css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等;
2、之后就可以引用并且进行使用了;
3、css modules确实解决了局部作用域的问题。

但是这种方案也有自己的缺陷:
1、引用的类名,不能使用连接符(.home-title),在JavaScript中是不识别的;
2、所有的className都必须使用{style.className} 的形式来编写;
3、不方便动态来修改某些样式,依然需要使用内联样式的方式;

// style.module.css文件
.title {color: blue;
}// 引入
import appStyle from './style.module.css';export default class App extends PureComponent {render() {return (<div id="app"><h2 className={appStyle.title}>title</h2></div>)}
}

4、CSS-in-JS

利用第三方库styled-components

  • Craco对项目进行高级配置

包括主题配置、项目目录别名配置等。

antd主题配置参考链接

1、安装插件

yarn add @craco/craco

2、在项目根目录创建craco.config.js文件

3、修改package.json文件内容

  "scripts": {// "start": "react-scripts start",// "build": "react-scripts build",// "test": "react-scripts test","start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"},

4、在craco.config.js配置相关内容

const path = require("path");
const resolve = dir => path.resolve(__dirname, dir);module.exports = {webpack: {// 别名配置alias: {'@': resolve("src"),'pages': resolve("src/pages")}}
}
  • react-transition-group

过渡动画的使用
github介绍
1、添加库依赖
yarn add react-transition-group
2、CSSTransition使用

import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group'export default class TransitionDemo extends Component {constructor() {super();this.state = {inProp: false}}render() {const { inProp } = this.state;return (<div><CSSTransitionin={inProp}timeout={2000}classNames="my-node"unmountOnExit={true}onEnter={el => console.log("开始进入")}onEntering={el => console.log("正在进入")}onEntered={el => console.log("进入完成")}onExit={el => console.log("开始退出")}onExiting={el => console.log("退出状态")}onExited={el => console.log("退出完成")}><div className="my-node-style">{"I'll receive my-node-* classes"}</div></CSSTransition><button type="button" onClick={() => this.changeState()}>Click to Enter</button></div>);}changeState() {const { inProp } = this.state;console.log(`changeState = ${inProp}`);this.setState({inProp: !inProp});}
}// css
.my-node-enter {opacity: 0;
}.my-node-enter-active {opacity   : 1;transition: opacity 200ms;
}.my-node-exit {opacity: 1;
}.my-node-exit-active {opacity   : 0;transition: opacity 200ms;
}.my-node-style {font-size: 20px;color    : red;
}
  • 常用Hooks

1、useCallback

useCallback在什么时候使用?
场景: 在将一个组件中的函数, 传递给子元素进行回调使用时, 使用useCallback对函数进行处理.

import React, {useState, useCallback, memo} from 'react';const HYButton = memo((props) => {console.log("HYButton重新渲染: " + props.title);return <button onClick={props.increment}>HYButton +1</button>});export default function CallbackHookDemo02() {console.log("CallbackHookDemo02重新渲染");const [count, setCount] = useState(0);const [show, setShow] = useState(true);const increment1 = () => {console.log("执行increment1函数");setCount(count + 1);}//   const increment2 = () => {
//     console.log("执行increment2函数");
//     setCount(count + 1);
//   }const increment2 = useCallback(() => {console.log("执行increment2函数");setCount(count + 1);}, [count]);return (<div><h2>CallbackHookDemo01: {count}</h2>{/* <button onClick={increment1}>+1</button><button onClick={increment2}>+1</button> */}<HYButton title="btn1" increment={increment1}/><HYButton title="btn2" increment={increment2}/><button onClick={e => setShow(!show)}>show切换</button></div>)
}

2、useMemo

使用场景:
1、函数进行大量的计算操作,使用useMemo避免每次渲染时都重现计算
2、对子组件传递相同的对象时,使用useMemo进行性能优化

场景一:
import React, {useState, useMemo} from 'react';function calcNumber(count) {console.log("calcNumber重新计算");let total = 0;for (let i = 1; i <= count; i++) {total += i;}return total;
}export default function MemoHookDemo01() {const [count, setCount] = useState(10);const [show, setShow] = useState(true);// MemoHookDemo01每次渲染都会调用calcNumber重新计算//const total = calcNumber(count);// useMemo优化只依赖count去重新计算const total = useMemo(() => {return calcNumber(count);}, [count]);return (<div><h2>计算数字的和: {total}</h2><button onClick={e => setCount(count + 1)}>+1</button><button onClick={e => setShow(!show)}>show切换</button></div>)
}场景二:
import React, { useState, memo, useMemo } from 'react';const HYInfo = memo((props) => {console.log("HYInfo重新渲染");return <h2>名字: {props.info.name} 年龄: {props.info.age}</h2>
});export default function MemoHookDemo02() {console.log("MemoHookDemo02重新渲染");const [show, setShow] = useState(true);// MemoHookDemo02每次渲染导致HYInfo重新渲染// const info = { name: "why", age: 18 };// 优化const info = useMemo(() => {return { name: "why", age: 18 };}, []);return (<div><HYInfo info={info} /><button onClick={e => setShow(!show)}>show切换</button></div>)
}

3、useRef

useRef返回一个ref对象,返回的ref对象再组件的整个生命周期保持不变。
最常用的ref是两种用法:
用法一:引入DOM(或者组件,但是需要是class组件)元素;
用法二:保存一个数据,这个对象在整个生命周期中可以保存不

用法一:
import React, { useEffect, useRef } from 'react';class TestCpn extends React.Component {render() {return <h2>TestCpn</h2>}
}export default function RefHookDemo01() {const titleRef = useRef();const inputRef = useRef();const testRef = useRef();const testRef2 = useRef();function changeDOM() {titleRef.current.innerHTML = "Hello World";inputRef.current.focus();console.log(testRef.current);}return (<div><h2 ref={titleRef}>RefHookDemo01</h2><input ref={inputRef} type="text"/><TestCpn ref={testRef}/><button onClick={e => changeDOM()}>修改DOM</button></div>)
}用法二:
import React, { useRef, useState, useEffect } from 'react'export default function RefHookDemo02() {const [count, setCount] = useState(0);const numRef = useRef(count);useEffect(() => {numRef.current = count;}, [count])return (<div><h2>count上一次的值: {numRef.current}</h2><h2>count这一次的值: {count}</h2><button onClick={e => setCount(count + 10)}>+10</button></div>)
}

4、useImperativeHandle

useImperativeHandle并不是特别好理解,我们一点点来学习。
我们先来回顾一下ref和forwardRef结合使用:
通过forwardRef可以将ref转发到子组件;
子组件拿到父组件中创建的ref,绑定到自己的某一个元素中;

import React, { useRef, forwardRef } from 'react';const HYInput = forwardRef((props, ref) => {return <input ref={ref} type="text"/>
})export default function ForwardRefDemo() {const inputRef = useRef();return (<div><HYInput ref={inputRef}/><button onClick={e => inputRef.current.focus()}>聚焦</button></div>)
}

forwardRef的做法本身没有什么问题,但是我们是将子组件的DOM直接暴露给了父组件:
直接暴露给父组件带来的问题是某些情况的不可控;
父组件可以拿到DOM后进行任意的操作;
但是,事实上在上面的案例中,我们只是希望父组件可以操作的focus,其他并不希望它随意操作;

通过useImperativeHandle可以只暴露固定的操作:
通过useImperativeHandle的Hook,将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起;
所以在父组件中,使用 inputRef.current时,实际上使用的是返回的对象;
比如我调用了 focus函数,甚至可以调用 printHello函数;

import React, { useRef, forwardRef, useImperativeHandle } from 'react';const HYInput = forwardRef((props, ref) => {const inputRef = useRef();useImperativeHandle(ref, () => ({focus: () => {inputRef.current.focus();}}), [inputRef])return <input ref={inputRef} type="text"/>
})export default function UseImperativeHandleHookDemo() {const inputRef = useRef();return (<div><HYInput ref={inputRef}/><button onClick={e => inputRef.current.focus()}>聚焦</button></div>)
}

5、useLayoutEffect

useLayoutEffect看起来和useEffect非常的相似,事实上他们也只有一点区别而已:
useEffect会在渲染的内容更新到DOM上后执行,不会阻塞DOM的更新;
useLayoutEffect会在渲染的内容更新到DOM上之前执行,会阻塞DOM的更新;

如果我们希望在某些操作发生之后再更新DOM,那么应该将这个操作放到useLayoutEffect。

6、自定义Hook

自定义 Hook 是一个函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook。

export default function CustomLifeHookDemo01() {useLoggingLife("CustomLifeHookDemo01");return (<div><h2>CustomLifeHookDemo01</h2><Home/><Profile/></div>)
}// 自定义生命周期打印
function useLoggingLife(name) {useEffect(() => {console.log(`${name}组件被创建出来了`);return () => {console.log(`${name}组件被销毁掉了`);}}, []);
}

7、react-redux的hook用法

// 未使用hooks
import React, { Component } from 'react'
import { connect } from 'react-redux';
import { changeInputValue } from './store_react_redux/actionCreators';class App extends Component {render() {return (<div><inputplaceholder="请输入信息"style={{ width: "200px", height: '40px', border: '1px solid red' }}value={this.props.inputValue}onChange={this.props.handleChangeInput}/></div>);}
}const mapStateToProps = (state) => {return {inputValue: state.inputValue}
}const mapDispatchToProps = (dispatch) => {return {handleChangeInput(e) {dispatch(changeInputValue(e.target.value));}}
}export default connect(mapStateToProps, mapDispatchToProps)(App);// 使用hooks
import React, { Component } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { changeInputValue } from './store_react_redux/actionCreators';export default function App() {const dispatch = useDispatch();const {inputValue} = useSelector(state => state, shallowEqual);return (<div><inputplaceholder="请输入信息"style={{ width: "200px", height: '40px', border: '1px solid red' }}value={inputValue}onChange={(e) => dispatch(changeInputValue(e.target.value))}/></div>);
}
  • React SSR

SSR(Server Side Rendering,服务端渲染),指的是页面在服务器端已经生成了完成的HTML页面结构,不需要浏览器解析;

对应的是CSR(Client Side Rendering,客户端渲染),我们开发的SPA页面通常依赖的就是客户端渲染;

同构:
一套代码既可以在服务端运行又可以在客户端运行,这就是同构应用。
同构是一种SSR的形态,是现代SSR的一种表现形式。
当用户发出请求时,先在服务器通过SSR渲染出首页的内容。
但是对应的代码同样可以在客户端被执行。
执行的目的包括事件绑定等以及其他页面切换时也可以在客户端被渲染;

React SSR成熟框架 Next.js

官方文档

  • React 构建打包优化

1、yarn build打包

文件说明:

js文件目录
[hash].chunk.js
代表是所有依赖的第三方库, vendor(第三方库) 的代码;main.[hash].chunk.js 
我们自己编写的应用程序代码;runtime~main.[hash].js 
Webpack runtime逻辑的chunk;
用于加载和运行你的应用程序;media
一些字体文件和图片

2、打包优化

很多模块,其实没有必要一开始就进行加载,会影响首屏加载速度;
我们可以让某些组件用到时再加载(懒加载);
如何可以让一个组件进行懒加载呢?
使用react给我们提供的lazy函数即可

import Discover from "../pages/discover";
改为
const Discover = React.lazy(_ => import("../pages/discover"));然后渲染路由的地方增加Suspense标签
<Suspense fallback={renderLoading()}>
{renderRoutes(routes)}
</Suspense>function renderLoading() {return <div>loading...</div>
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

numpy练习题

numpy 练习题 numpy 的array操作 1.导入numpy库 import numpy as np2.建立一个一维数组 a 初始化为[4,5,6], (1)输出a 的类型&#xff08;type&#xff09;(2)输出a的各维度的大小&#xff08;shape&#xff09;(3)输出 a的第一个元素&#xff08;值为4&#xff09; anp.ar…...

机器学习中分类与聚类的本质区别

机器学习中分类与聚类的本质区别 机器学习中有两类的大问题&#xff0c;一个是分类&#xff0c;一个是聚类。 在我们的生活中&#xff0c;我们常常没有过多的去区分这两个概念&#xff0c;觉得聚类就是分类&#xff0c;分类也差不多就是聚类&#xff0c;下面&#xff0c;我们就…...

SDKD 2021 C1 8th Round

A - Parity 签到&#xff0c;根据奇数偶数的预算性质。 #include <iostream> #include <cstdio> using namespace std; int a,b,k,ans; int main() {cin>>b>>k;for(int ik-1;i>0;i--){scanf("%d",&a);if(b%2&&a%2||a%2&…...

copy代码常出的报错~持续更新

一 AttributeError: DataFrame object has no attribute ixpandas的1.0.0版本后&#xff0c;已经对该函数进行了升级和重构。 只需要将 ix改成 loc二在pycharm中使用 %matplotlib inline 语句会报错 改成 删掉这行代码&#xff0c;用 plt.show() 展示图表%matplotlib inlin…...

极客时间架构师训练营,实战案例

正文 我在做技术面试官的时候&#xff0c;在问完问题后&#xff0c;照例会问一句&#xff1a;你期望的工资是多少&#xff1f;对此&#xff0c;我只会记录下候选人的回答然后上报&#xff0c;没有同意权&#xff0c;更没有批驳权。 判断候选人能否通过面试&#xff0c;主要看…...

暑假acwing算法总结11:STL总结

1、vector 倍增自变长数组&#xff0c;插入均摊o(1)size() 返回元素个数empty() 判断是否为空clear() 清空front()/back() 返回第一/最后一个数push_back()/pop_back() 添加/删除元素begin()/end() 首/尾迭代器遍历方式 for(int i0;i<s.size();i)cout<<a[i]<< …...

事件循环机制(Event Loop)刨根问底

事件循环是什么&#xff1f; 为什么有事件循环机制 因为js是单线程的&#xff0c;注意&#xff0c;浏览器是多线程的。浏览器只给一个线程给js渲染&#xff0c; 假设是多线程&#xff0c;可能会存在这种情况&#xff1a; 若一个线程要操作dom,另一个线程要删除dom&#xff0c;就…...

Kafka学习----Kafka高级理论

Kafka高级理论一 . Kafka 工作流程二. Kafka文件存储机制①. Kafka文件存储机制②. index文件和log文件详解三. Kafka 生产者①. 分区策略1. 分区的原因2. 分区的原则②. 数据可靠性保证1. 副本数据同步策略2. ISR3. ack 应答机制4. 故障处理细节③. Exactly Once 语义四. Kafk…...

ABB喷涂机器人吹扫系统的主要作用

ABB喷涂机器人吹扫系统主要作用是什么 两个字&#xff1a;防爆&#xff01; ABB喷涂 何处简单爆&#xff1f; 如下喷涂机械臂部位 ABB机器人 那么防爆是什么原理 通过吹扫系统不断向机械臂内部输入气体&#xff08;压力可控&#xff09;使机械手内部形成稳定的安全过压环…...

wxWidgets:窗口删除

wxWidgets:窗口删除 wxWidgets:窗口删除关闭窗口默认窗口关闭行为用户呼叫退出菜单优雅地退出应用程序自动删除子窗口其他种类的窗户wxWidgets:窗口删除 窗口删除可能是一个令人困惑的主题,因此提供此概述是为了帮助您明确删除窗口的时间和方式,或响应用户关闭窗口的请求…...

Node.js-EJS模板

EJS是一个JavaScript模版库&#xff0c;用来将EJS模版结合着JSON数据转换为HTML 并且可以直接在模版中写JavaScript的语法 安装ejs包 //控制台输入 npm i ejs简单示例 let template <h1>Hello, <% name %></h1> let data {name: World }let renderStr …...

Windows没有MySQL服务及MySQL无法启动解决办法

下载MySQL并把MySQL的路径配置到系统环境后执行命令&#xff1a;mysql -u root -p 报错&#xff1a;ERROR 2003 (HY000): Cant connect to MySQL server on localhost (10061) 猜测原因可能是windows没有mysql服务或mysql服务没有启动&#xff0c;这篇文章主要讲windows没有my…...

PTA 基础编程题目集 7-2 然后是几点

目录 题目&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 分析&#xff1a; 答案&#xff1a; 题目&#xff1a; 有时候人们用四位数字表示一个时间&#xff0c;比如 1106 表示 11 点零 6 分。现在&#xff0c;你…...

为什么建立连接是三次握手,而关闭连接却是四次挥手呢?

这是因为服务端在LISTEN状态下&#xff0c;收到建立连接请求的SYN报文后&#xff0c;把ACK和SYN放在一个报文里发送给客户端。 而关闭连接时&#xff0c;当收到对方的FIN报文时&#xff0c;仅仅表示对方不再发送数据了但是还能接收数据&#xff0c;己方是否现在关闭发送数据通…...

采坑记录之node-sass

node-sass这货很容易安装失败 下面是node-sass官网给出的对应node.js版本的图 一定要按照node-sass官网给出的对应node.js版本来安装&#xff0c;不然很容易安装失败 下面是sass-loader版本图 我自己安装的是node.js 14.x版本的&#xff0c;对应的node-sass的版本是4.14.x&a…...

C# 打包windows服务安装包后,安装后自动启动服务

在服务的安装程序&#xff0c;通常是ProjectInstaller&#xff0c;重写他的Commit方法 public override void Commit(IDictionary savedState){base.Commit(savedState);ServiceController sc new ServiceController("你的服务名称");if (sc.Status.Equals(Service…...

MATLAB 数学应用 微分方程 时滞微分方程 ddesd

求解带有常规时滞的时滞微分方程 (DDE) 语法 sol ddesd(ddefun,delays,history,tspan) sol ddesd(ddefun,delays,history,tspan,options) 参数 参数说明ddefun用于对微分方程 y′(t) f(t,y(t),y(d(1),…,y(d(k))) 的右侧进行计算的函数句柄。此函数必须为以下形式&#…...

Java 从多线程到并发编程(七)—— wait notify 生产者消费者问题 管程法 信号灯法

文章目录前言 &#xff65;ᴗ&#xff65;wait 与 notifynotify 和 notifyAll深入了解 阻塞线程的状态切换生产者消费者模型wait notify深入一点管程法管程法 仓库管程法 生产者管程法 消费者管程法 main调用管程法结果if还是while信号灯法总结 ◡前言 &#xff65;ᴗ&#xff…...

雨课堂期末考试答案----查了好多份答案,一道一道的进行查找正确答案,基本可以保证是正确答案

1.主观题 (10分) 工程为何总是伴随着风险?导致工程风险的因素有哪些? 2.判断题 (1分) 目前对水利工程价值的伦理判断基本是遵循功利主义原则。()对 3.单选题 (1分) 下列哪一项不属于工程实践全球性特征?( )C A 生态性 B 深远性 C 社会性 D 整体性 4.单选题 (1分) …...

阿里面试官力荐:Java面试必刷的17套一线大厂真题(含答案)

金三银四过去之后&#xff0c;回顾好多同学的面试经历&#xff0c;总结出了这份大厂面试真题的合集&#xff08;含答案&#xff09;&#xff0c;里面包含了Java中级到Java架构师的方方面面&#xff0c;其中大厂也包含了阿里巴巴&#xff0c;京东&#xff0c;百度&#xff0c;拼…...

客户端负载均衡Ribbon

文章目录Ribbon1&#xff09;、Ribbon模块2&#xff09;、RestTemplate结合Ribbon使用I、使用RestTemplateII、整合Ribbon3&#xff09;、负载均衡策略介绍4&#xff09;、自定义负载策略5&#xff09;、配置详情I、常用配置II、代码配置RibbonIII、配置文件方式配置Ribbon6&am…...

用Python搭建股票舆情分析系统

写在前面 下面的这篇文章将手把手教大家搭建一个简单的股票舆情分析系统&#xff0c;其中将先通过金融界网站爬取指定股票在一段时间的新闻&#xff0c;然后通过百度情感分析接口&#xff0c;用于评估指定股票的正面和反面新闻的占比&#xff0c;以此确定该股票是处于利好还是…...

python学习之路(第八天)---re模块正则表达式

python学习之路&#xff08;第八天&#xff09;—re模块正则表达式 python学习之路&#xff08;第八天&#xff09;---re模块正则表达式在线正则匹配正则匹配语法re.compile方法re.match方法re.search方法re.finditer方法转义匹配findall()正则表达式的实例正则表达式&#xff…...

win10开启局域网远程桌面连接

要求&#xff1a;两台电脑&#xff0c;同时连接在同一局域网。假设是电脑A开启允许局域网远程桌面&#xff0c;然后电脑B连接。这两台电脑需要按照下面的步骤来做。 一、电脑A 1.点击此电脑图标&#xff0c;右键&#xff0c;属性。 2.点击远程设置 3.开启允许被远程连接 4.打开…...

740_CTEX安装

全部学习汇总&#xff1a; https://github.com/GreyZhang/g_Tex 最终还是走上了这条路&#xff0c;没有抵制住这个神秘的诱惑。其实&#xff0c;TEX对我来说似乎并不是一个必须要接触的东西&#xff0c;接触的最大原因也是因为高德纳创造了他&#xff0c;我想看看这一套工具背后…...

Python Day9函数

一函数使用步骤 &#xff08;1&#xff09;定义函数 &#xff08;2&#xff09;调用函数 如&#xff1a; 若不调用函数&#xff0c;函数内部的代码不会执行 二函数的参数的作用 三函数的返回值的作用 在函数中&#xff0c;如果需要返回结果给用户需要使用函数返…...

《零基础安装 Oracle 数据库》RAC集群系列 ❸ 简单两步快速安装 Oracle 18C RAC 数据库

前言 很多朋友吐槽我的脚本不会用&#xff0c;看不懂&#xff0c;哎&#xff0c;一言难尽&#xff01;于是&#xff0c;我将 [vagrant virtualbox shell脚本] 组合起来&#xff0c;实现了零基础也可安装 Oracle 数据库的方式&#xff0c;我称之为 新手纯享版本&#xff0c;真…...

java16语言新特性

新语言特性 JEP 394&#xff0c;适用于 instanceof 的模式匹配模式匹配&#xff08;Pattern Matching&#xff09;最早在 Java 14 中作为预览特性引入&#xff0c;在 Java 15 中还是预览特性。模式匹配通过对 instacneof 运算符进行模式匹配来增强 Java 编程语言。模式匹配使程…...

入门图形学:屏幕波爆特效

最近bilibili看了黑神话悟空的UE5演示视频&#xff0c;感觉是真牛逼&#xff0c;地址&#xff1a;黑神花悟空UE5实机演示视频 遥想我也算是国内第一批用ue4的开发者了&#xff0c;15年开始用ue4.7源码版&#xff0c;做了一年多就又用回u3d了&#xff0c;哈哈&#xff0c;主要因…...

清新简约教育培训汇报总结PPT-朴尔PPT

清新简约教育培训汇报总结PPT模板。一套,总结报告,工作汇报,幻灯片模板&#xff0c;内含黄色,红色多种配色&#xff0c;简约,小清新,卡通风风格设计&#xff0c;动态播放效果&#xff0c;精美实用。 希望下面这份精美的PPT模板能帮助到你 基本信息 用途&#xff1a;,总结报告…...

w3c html 在线测试,W3C标准 HTML

W3C的标准一个网页主要分为三部分 &#xff1a;结构 表现 行为结构由 HTML负责 &#xff0c;用于描述页面的结构表现由 CSS负责 &#xff0c; 用于控制页面中元素的样式行为由JavaScropt负责 &#xff0c;用于响应用户操作HTML(Hypertext Markup Language)超文本标记语言它负…...

PAT1021 个位数统计

由于题目复制不过来&#xff0c;所以只能写思路&#xff0c;对于这种长输入&#xff0c;我们可以使用字符串去接收它&#xff0c;然后不断判断该数字是是什么&#xff0c;只要是那个数&#xff0c;该数组内对应的数就1&#xff1b;最后再将它输出出来就可以了 该算法我认为比较…...

什么是设计模式

1.什么是设计模式 设计模式(Design Pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 使用设计模式是为了可重用代码、让代码更容易被他人理解、提高代码的可靠性。 设计模式一般有如下几个基本要素&#xff1a;模式名称、问题、目的、解决方案…...

23种经典设计模式(Design Patterns)

目录1.概述1.1.创建型模式[Creational Pattern]1.2.结构型模式[Structural Pattern]1.3.行为型模式[Behavioral Pattern]2.分类依据3.模式简述4.六大原则5.源码分享1.概述 经典设计模式大方向分为三大类&#xff0c;创建型模式、结构型模式、行为型模式。创建型模式里面包含5个…...

中断promise

中断或取消 Promise 链 Promise 已经成为了 JavaScript 管理异步操作的重要工具之一. 然而, 有的时候还是会很头痛: Promise// 等价于 Promise.resolve(undefined).then..then(() > {// 开始.}).then(() > {if (wantToBreakHere) {// 怎样在这里终止这个 Promise 链?}…...

通俗易懂的Promise知识点总结,检验一下你是否真的完全掌握了promise?

文章目录前言Promise 简介Promise 如何运作创建 promise使用 promise实例 promise 封装 AJAXPromise.resolve()Promise.reject()Promise.prototype.then()链式调用 promise.then()Promise.prototype.catch()处理错误级联错误Promise.prototype.finally()并发 promise.all()竞速…...

小程序 之 Promise

一、export 与 exports的区别 1. module.exports和exports是属于 CommonJS 模块规范。CommonJS规范规定&#xff0c;每个模块内部&#xff0c;module变量代表当前模块。这个变量是一个对象&#xff0c;它的exports属性&#xff08;即module.exports&#xff09;是对外的接口。…...

Promise.then方法 返回值

var p Promise.resolve(1) p.then((value)>{//1、返回一个Promise 调用resolvereturn new Promise(function(resolve,rejected){resolve(value 1)})//2、返回一个Promise 调用rejectedreturn new Promise(function(resolve,rejected){rejected(value 1)})//3、返回一个值…...

Promise封装方式

下面用到模块化的相关知识&#xff0c;如果不是很了解&#xff0c;可以参考另一篇文章&#xff1a; https://blog.csdn.net/zxd1435513775/article/details/106334253 1. Promise的基本介绍 Promise在ES6中被列为正式规范&#xff0c;是ES6中最重要的特性之一。 下面在Chrome…...

Typescripts Promise

Typescripts: Promise 作者&#xff1a;EER 链接&#xff1a;https://juejin.cn/post/6844903728399532039 来源&#xff1a;掘金 Promise 表示一个异步操作的最终结果&#xff0c;与之进行交付的方式主要是then方法&#xff0c;该方法注册了两个回调函数&#xff0c;用于接收…...

promise函数

Promise 是异步编程的一种解决方案&#xff0c;比传统的解决方案——回调函数和事件——更合理和更强大.有了Promise对象&#xff0c;就可以将异步操作以同步操作的流程表达出来&#xff0c;避免了层层嵌套的回调函数 。&#xff08;解决了回调地狱的问题&#xff09; …...

promise取值

因为使用promise取出来的数据的格式为 此数据格式&#xff0c;并不能作为参数使用&#xff0c;所以 在格式的转换上 return new Promise((resolve, reject) > 请求成功以后 我们拿到了这样的数据格式 通过返回到页面的数据的方式&#xff0c; 值.then(val>{this.h…...

promise 递归

let counter 0; const max 5; function promise () { console.log(waiting ${counter }s...); return new Promise(resolve > { if (counter > max) { return resolve(“promise finish”); } else { setTimeout(() > { promise().then(res > resolve(res)); }, …...

promise执行顺序总结

1、 const promise new Promise((resolve, reject)>{console.log(1);resolve();console.log(2);})promise.then(()>{console.log(4);})console.log(5);运行结果是&#xff1a; 1,2,5,4 解释&#xff1a;promise的构造函数是同步执行&#xff0c;promise.then中的函数是…...

Promise处理异步操作

Promise对象 Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值. 我的理解&#xff1a;Promise使得异步的写法不像之前那样一直回调&#xff0c;而可以用同步的代码书写格式去写异步代码。 以一个实例开头&#xff1a;以下实例&#xff0c;产生一个随机数&a…...

Promise源码解析

Promise分析&#xff1a; 1.promise 就是一个类 在执行这个类的时候&#xff0c;需要传递一个执行器进去&#xff0c;执行器会立即执行 2.promise 中有三种状态 分别为 成功fulfilled 失败rejected 等待pendeng pending -> fulfilled pending -> rejected …...

Zebec节点Zepoch销量接近800个,生态发展信心十足

Zebec Protocol目前已经获得了两轮历史融资额近4000万美元的融资&#xff0c;其投资者包括Coinbase、Distributed Global、OKX Blockdream Ventures 、Circle Venture等20多家全球一线投资机构&#xff0c;而在获得融资后Zebec Protocol也开始全力打造多链生态&#xff0c;以进…...

Promise源码解密-Promise A+标准

系列文章 Promise源码解密-PromisesA标准Promise源码解密-同步版Promise源码解密-异步版Promise源码解密-then的链式调用Promise源码解密-catch/resolve/reject/race 创作不易 拒绝白嫖 点个赞呗 关注专栏 Promise源码解密,带你走进Promise的深处&#xff01;&#xff01;&…...

Promise方法 理解 封装

Promise是什么&#xff1f; Promise直接打印出来看看吧&#xff0c;console.dir(Promise)&#xff0c;就这么简单粗暴 可以看出:Promise是一个构造函数。ES6中新增的。 从打印的结果可以看出 里面有 all race reject resolve 等方法 原型上有 catch constructor finally…...

C++11 promise

目录一 promise二 定义三 成员函数四 get_future五 设置结果1. set_value2. set_value_at_thread_exit3. set_exception4. set_exception_at_thread_exit六 参考一 promise 前文 C11 async 可知&#xff0c;异步操作的方式之一&#xff0c;是通过 std::async 接口调用可执行对…...