快来跟我一起学 React(Day5)
简介
上一节我们完成了从 0
开始搭建一个企业级 React
项目的全部内容,项目是有了,但是我们一直都没有近距离接触过 React
,所以接下来我们就快速撸一遍 React
官方文档内容,弄清楚一些概念性的东西,为后面的源码分析章节做铺垫。
知识点
- 项目搭建
- 核心概念
- 高级指引
- API 指引
- hook 指引
后面这几节都比较轻松,因为我们基本上把 React 官网:https://reactjs.org/ 的内容跑一遍。
让我们开始吧!
项目搭建
我们直接 clone
一个前面我们搭建的基础项目,然后取名字为 react-demo-day5
:
git clone https://gitee.com/vv_bug/cus-react-demo.git react-demo-day5
接着我们打开 react-demo-day5
目录,并且安装 npm
依赖:
cd react-demo-day5 && npm install --registry https://registry.npm.taobao.org
然后我们在 react-demo-day5
目录下执行 npm start
命令启动项目:
npm start
启动项目后,浏览器会自动打开我们项目的入口页面:
到这,我们的准备工作就算是完成了。
组件 & Props
组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。
在 React
中有 “函数式” 与 ”类组件“ 之分,下面我们就通过 Demo
来演示一下。
在开始之前,我们先修改一下当前项目结构。
首先修改一下 src/main.tsx
文件:
import React from "react";
import ReactDOM from "react-dom";
import "./main.scss";
import MainConcepts from "./main-concepts";
// App 组件
const App = (<div className="root">{/* 核心概念 */}<MainConcepts/></div>
);
ReactDOM.render(App,document.getElementById("root")
);
可以看到,我们抽离了一个 App
组件实例,然后在 App
中引入了 MainConcepts
组件。
接下来我们在 src
目录中创建一个 main-concepts
目录,然后在 src/main-concepts
目录下创建一个 index.tsx
文件:
mkdir ./src/main-concepts && touch ./src/main-concepts/index.tsx
然后将以下内容写入到 src/main-concepts/index.tsx
文件:
import ComponentsAndProps from "./components-and-props";/*** 核心概念列表组件*/
function mainConcepts() {return (<div>{/* 组件与属性 */}<ComponentsAndProps/></div>);
};
export default mainConcepts;
接着在 src/main-concepts
目录下创建一个 components-and-props
目录,并在 components-and-props
目录下创建一个 index.tsx
文件:
mkdir ./src/main-concepts/components-and-props && touch ./src/main-concepts/components-and-props/index.tsx
然后将以下内容写入到 src/main-concepts/components-and-props/index.tsx
文件:
import React from "react";
import WelcomeCom from "./welcome.com";
import WelcomeFunc from "./welcome.func";function componentsAndProps() {return (<React.Fragment>{/* 类组件 */}<WelcomeCom/>{/* 函数式组件 */}<WelcomeFunc/></React.Fragment>);
};
export default componentsAndProps;
类组件
继续在 src/main-concepts/components-and-props
下创建一个 welcome.com.tsx
文件作为类组件:
touch ./src/main-concepts/components-and-props/welcome.com.tsx
然后将以下内容写入到 src/main-concepts/components-and-props/welcome.com.tsx
组件:
import React from "react";
import PropTypes from "prop-types";
type Prop = {name: string, // 姓名
};
class Welcome extends React.Component<Prop> {static propTypes = {name: PropTypes.string,};static defaultProps = {name: "小虫"};render() {return <h1>我是类组件,Hello, {this.props.name}</h1>;}
}
export default Welcome;
可以看到,我们用类组件方式定义了一个 Welcome
组件,然后在 Welcome
组件中定义了一个 name
属性,并且利用 ts
跟 prop-types
对属性进行了校验,一个简单的 “React 类组件” 就创建完成了。
函数式组件
同样在src/main-concepts/components-and-props
下创建一个 welcome.func.tsx
文件作为函数式组件:
touch ./src/main-concepts/components-and-props/welcome.func.tsx
然后将以下内容写入到 src/main-concepts/components-and-props/welcome.func.tsx
组件:
import PropTypes from "prop-types";
type Prop = {name: string, // 姓名
};
function Welcome(props: Prop) {return <h1>我是函数式组件,Hello, {props.name}</h1>;
}
Welcome.propTypes={name: PropTypes.string
};
Welcome.defaultProps = {name: "小虫"
};
export default Welcome;
可以看到,我们用函数式组件方式定义了一个 Welcome
组件,然后在 Welcome
组件中定义了一个 name
属性,并且利用 ts
跟 prop-types
对属性进行了校验,一个简单的 “React 函数式组件” 就创建完成了。
运行
在 react-demo-day5
项目根目录下执行 npm start
命令重新启动项目:
npm start
可以看到,两个组件都正常显示到了页面。
组合组件
组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。按钮,表单,对话框,甚至整个屏幕的内容:在 React 应用程序中,这些通常都会以组件的形式表示。
例如,我们的 src/main-concepts/components-and-props/index.tsx
组件:
import React from "react";
import WelcomeCom from "./welcome.com";
import WelcomeFunc from "./welcome.func";function componentsAndProps() {return (<React.Fragment>{/* 类组件 */}<WelcomeCom/>{/* 函数式组件 */}<WelcomeFunc/></React.Fragment>);
};
export default componentsAndProps;
我们把 “函数式组件” 跟 “类组件” 组合到了一个组件中。
Props 的只读性
在 React
中,组件决不能修改自身的 props。
React 非常灵活,但它也有一个严格的规则:
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
我们可以试一下,比如我们修改一下 src/main-concepts/components-and-props/welcome.com.tsx
文件:
import React from "react";
import PropTypes from "prop-types";type Prop = {name: string, // 姓名
};class Welcome extends React.Component<Prop> {static propTypes = {name: PropTypes.string,};static defaultProps = {name: "小虫"};render() {console.log(Object.isFrozen(this.props));this.props.name = "小虫虫";return <h1>我是类组件,Hello, {this.props.name}</h1>;}
}export default Welcome;
可以看到,我们在 render
方法中试着去修改 name
属性值,并且我们打印了 this.props
是否是 Object.freeze
类型:
console.log(Object.isFrozen(this.props));
this.props.name = "小虫虫";
我们保存文件等自动编译完成:
可以看到,三处报错了:
Webpack
编译直接报错了,说 “我们不能修改只读属性”。IDE
也报错了,主要是Eslint
的配置。- 浏览器也报错了,说 “遇到了未知异常”。
Object.isFrozen(this.props)
返回了true
。
从上面可以看出,我们利用了 TypeScript
、Eslint
等规则在写代码的时候就已经成功避免了这类错误的出现,最后 ReactJs
还会直接渲染报错,因为我们对一个 Object.freeze
类型的对象进行了修改操作。
当然,即使有各种条件的限制,但是我们还是可以变相的去修改 props
的值,比如我们把一个属性定义为 object
类型,我们还是可以在子组件中修改这个属性的某些值,虽然我们可以这样做,但是在开发的时候千万不要这么干哈,因为在某些大项目中,当进行变量追踪的时候,你压根就不知道是谁修改了这个属性的内容,这样就很容易出错了, 我就不演示了。
State & 生命周期
State
State
相当于 MVVM
模式中的 ViewModel
,通过监听对比 ViewModel
的变化,最后实现页面的更新,每个组件都可以定义自己的 state
。
我们在 src/main-concepts
目录下创建一个 state-and-lifecycle
目录:
mkdir ./src/main-concepts/state-and-lifecycle
然后在 /src/main-concepts/state-and-lifecycle
中创建一个 index.tsx
文件:
import React from "react";
import StateComponent from "./state.com";
import StateFunc from "./state.func";function stateAndLifecycle() {return (<React.Fragment>{/* 类组件带 state */}<StateComponent/>{/* 函数组件带 state */}<StateFunc/></React.Fragment>);
};
export default stateAndLifecycle;
类组件带 State
在 /src/main-concepts/state-and-lifecycle
中创建一个 state.com.tsx
文件:
import React from "react";type State = {status: boolean
};class StateComponent extends React.Component<any, State> {state = {status: true}render() {return (<divonClick={this.onToggle.bind(this)}>我是类组件:{this.state.status ? "on" : "off"}</div>);}/*** 切换状态*/onToggle() {// 修改 status 状态this.setState((state) => {return {status: !state.status};});}
}export default StateComponent;
可以看到,我们在类组件 state.com.tsx
中定义了一个 state
,然后给 div
元素添加了一个点击事件,最后在点击事件 onToggle
回调中用 setState
修改了 status
的值。
函数组件带 State
在 /src/main-concepts/state-and-lifecycle
中创建一个 state.func.tsx
文件:
import React, {useState} from "react";function StateFunc() {let [status, setStatus] = useState<boolean>(true);function onToggle() {setStatus(!status);}return (<divonClick={onToggle}>我是函数组件:{status ? "on" : "off"}</div>);
}export default StateFunc;
可以看到,我们直接利用了 useState
这个 Hook
定义了一个 state
,跟上面的类组件一样,在点击事件中修改了 status
的值,之前说函数式组件是 “无状态的”,但是利用了 Hook
,我们同样是可以让一个函数式组件也具备 State
,Hook
的内容我们后面再详细解析。
我们保存等项目重新编译看结果:
当我们点击对应文字区域的时候,页面会进行 on
与 off
的切换效果,我就不演示了哈,小伙伴自己试试。
正确地使用 State
- 不要直接修改 State
- State 的更新可能是异步的
- State 的更新会被合并
生命周期
先上一张官方提供的 React
的生命周期图:
图片来源:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
生命周期我们后期源码解析的时候再详细讲解。
事件处理
React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:
- React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
例如,传统的 HTML:
<button onclick="activateLasers()">Activate Lasers
</button>
在 React 中略微不同:
<button onClick={activateLasers}> Activate Lasers
</button>
在 React 中另一个不同点是你不能通过返回 false
的方式阻止默认行为。你必须显式的使用 preventDefault
。例如,传统的 HTML 中阻止链接默认打开一个新页面,你可以这样写:
<a href="#" onclick="console.log('The link was clicked.'); return false">Click me
</a>
在 React 中,可能是这样的:
function ActionLink() {function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); }return (<a href="#" onClick={handleClick}> Click me</a>);
}
因为 e
是 React
生成的一个合成事件,React 事件与原生事件不完全相同。
上面例子中有演示过的,就不再演示了。
条件渲染
因为 React
中可以使用 JSX
语法,所以我们可以在 JSX
语法中进行条件判断做渲染就可以了。
元素变量
你可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分,而其他的渲染部分并不会因此而改变。
我们还是来演示一下吧。
首先在 src/main-concepts
目录下创建一个 condition-render
目录:
mkdir ./src/main-concepts/condition-render
然后在 src/main-concepts/condition-render
目录下创建一个 index.tsx
文件:
import React from "react";
import ConditionFunc from "./condition.func";function stateAndLifecycle() {return (<React.Fragment>{/* 函数式组件带条件渲染 */}<ConditionFunc/></React.Fragment>);
};
export default stateAndLifecycle;
接着在 src/main-concepts/condition-render
目录下创建一个 condition.func.tsx
文件:
import React, {useState} from "react";function ConditionFunc() {let [isLoggedIn, setLogged] = useState<boolean>(true);function handleLogin() {setLogged(true);}function handleLogout() {setLogged(false);}let button = null;if (isLoggedIn) {button = (<button onClick={handleLogout}>退出登录</button>);} else {button = (<button onClick={handleLogin}>去登录</button>);}return (<div>{isLoggedIn && "恭喜,登录成功!"}{button}</div>);
}export default ConditionFunc;
可以看到,我们利用 button
变量充当了一个元素,然后通过 State
的 isLoggedIn
变量进行条件判断,对 button
变量进行赋值。
最后我们在 src/main-concepts/index.tsx
文件中引入 src/main-concepts/condition-render/index.tsx
组件测试:
可以看到,页面中根据我们的点击条件渲染了不同的状态。
与运算符 &&
通过花括号包裹代码,你可以在 JSX 中嵌入表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。
比如上面的condition.func.tsx
文件,我们用 “运算符 &&” 方式来改造一下:
import React, {useState} from "react";function ConditionFunc() {let [isLoggedIn, setLogged] = useState<boolean>(true);function handleLogin() {setLogged(true);}function handleLogout() {setLogged(false);}return (<div>{isLoggedIn && "恭喜,登录成功!"}{isLoggedIn && (<button onClick={handleLogout}>退出登录</button>)}{!isLoggedIn && ( <button onClick={handleLogin}>去登录</button>)}</div>);
}export default ConditionFunc;
三目运算符
另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false
。
比如上面的condition.func.tsx
文件,我们用 “三目运算符” 方式来改造一下:
import React, {useState} from "react";function ConditionFunc() {let [isLoggedIn, setLogged] = useState<boolean>(true);function handleLogin() {setLogged(true);}function handleLogout() {setLogged(false);}return (<div>{isLoggedIn ? "恭喜,登录成功!" : ""}{isLoggedIn ? (<button onClick={handleLogout}>退出登录</button>) : (<button onClick={handleLogin}>去登录</button>)}</div>);
}export default ConditionFunc;
后面两种效果跟第一种一样,我就不演示了。
不过在平时的项目开发中,面对复杂一点的逻辑判断,不建议用后两种内联方式,因为对代码的可读性跟调试都不友好。
列表 & Key
在 React 中,我们只需要把数组转化为元素列表就可以了。
我们来演示一下。
元素变量数组
首先一样的套路,在 src/main-concepts
目录下创建一个 list-and-key
目录:
mkdir ./src/main-concepts/list-and-key
然后在 src/main-concepts/list-and-key
目录下创建一个 index.tsx
文件:
import React from "react";
import ListFunc from "./list.func";function ListAndKey() {return (<React.Fragment>{/* 函数组件列表渲染 */}<ListFunc/></React.Fragment>);
};
export default ListAndKey;
接着在 src/main-concepts/list-and-key
下创建一个 list.func.tsx
文件:
import React, {useState} from "react";function ListFunc() {let [todos] = useState<Array<string>>(["React", "Vue", "Angular"]);let todoElements = todos.map((todo) => (<li>{todo}</li>));return (<ul>{todoElements}</ul>);
}export default ListFunc;
可以看到,我们用了一个元素数组 todoElements
变量来承载了我们所有需要渲染的元素,最后利用 JSX
语法渲染。
最后在 src/main-concepts/index.tsx
中引入 src/main-concepts/list-and-key/index.tsx
组件:
import ComponentsAndProps from "./components-and-props";
import StateAndLifecycle from "./state-and-lifecycle";
import ConditionRender from "./condition-render";
import ListAndKey from "./list-and-key";/*** 核心概念列表组件*/
function mainConcepts() {return (<div>{/* 组件与属性 */}<ComponentsAndProps/>{/* State & 生命周期 */}<StateAndLifecycle/>{/* 条件渲染 */}<ConditionRender/>{/* 列表与 key */}<ListAndKey/></div>);
};
export default mainConcepts;
我们重新运行项目看效果:
npm start
可以看到,页面中正常渲染了我们的 todos
列表。
在 JSX 中嵌入 map()
我们可以直接把 map
放在 JSX
语法中。
比如我们重构一下上面的 list.func.tsx
组件:
import React, {useState} from "react";function ListFunc() {let [todos] = useState<Array<string>>(["React", "Vue", "Angular"]);return (<ul>{todos.map((todo) => (<li>{todo}</li>))}</ul>);
}export default ListFunc;
效果跟上面的一样,我就不演示了。
不过还是那句话,简单的逻辑可以用 JSX 内联语法操作,复杂的逻辑就不建议用内联了,对调试跟代码的可读性都不友好。
key
key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
我们现在没有提供 key
,在开发模式中会报错:
我们需要修改一下 list.func.tsx
组件:
import React, {useState} from "react";function ListFunc() {let [todos] = useState<Array<string>>(["React", "Vue", "Angular"]);return (<ul>{todos.map((todo) => (<li key={todo}>{todo}</li>))}</ul>);
}export default ListFunc;
可以看到,我们给每一个 li
标签添加了一个 key
属性(数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而,它们不需要是全局唯一的)。
表单
受控组件
输入的值始终又 React
的 State
控制的组件就叫 “受控组件”。
我们来演示一下。
首先在 src/main-concepts
目录下创建一个 form
目录:
mkdir ./src/main-concepts/form
接着在 src/main-concepts/form
目录中创建一个 index.tsx
文件:
import React from "react";
import ControlledFunc from "./controlled.func";function Form() {return (<React.Fragment>{/* 函数组件之受控组件 */}<ControlledFunc/></React.Fragment>);
};
export default Form;
然后在 src/main-concepts/form
目录中创建一个 controlled.func.tsx
文件:
import React, {useState} from "react";function ControlledFunc() {let [name, setName] = useState<string>("");function handleInput(event: any) {setName(event.target.value);}return (<div><input value={name} onInput={handleInput}/><div>{name}</div></div>);
}export default ControlledFunc;
可以看到,我们用了一个 State
为 name
的属性值,通过监听 input
标签的 onInput
事件,然后把输入的值赋给了 name
变量,最后 State
的 name
变量又控制着 input
的输入值,这样一个受控组件就创建完毕了。
接着我们在 src/main-concepts/index.tsx
组件中引入 src/main-concepts/form/index.tsx
组件:
import ComponentsAndProps from "./components-and-props";
import StateAndLifecycle from "./state-and-lifecycle";
import ConditionRender from "./condition-render";
import ListAndKey from "./list-and-key";
import Form from "./form";/*** 核心概念列表组件*/
function mainConcepts() {return (<div>{/* 组件与属性 */}<ComponentsAndProps/>{/* State & 生命周期 */}<StateAndLifecycle/>{/* 条件渲染 */}<ConditionRender/>{/* 列表与 key */}<ListAndKey/>{/* 表单-受控组件 */}<Form/></div>);
};
export default mainConcepts;
我们重新运行 npm start
命令开启项目看结果:
npm start
可以看到,当我们输入的时候,State
中的 name
变量实时跟 input
输入的值绑定。
textarea
、select
等其它的 form
标签也可以进行同样的操作,就不一一演示了。
状态提升
通常,state
都是首先添加到需要渲染数据的组件中去,如果其他组件也需要这个 state,那么你可以将它提升至这些组件的最近共同父组件中,这种操作就叫 “状态提升”。
我们还是通过 Demo
来演示一下吧。
我们首先在 src/main-concepts
目录下创建一个 lifting-state-up
目录:
mkdir ./src/main-concepts/lifting-state-up
然后在 src/main-concepts/lifting-state-up
目录下创建一个 index.tsx
文件:
import React, {useState} from "react";
import StateUpCom from "./state-up.com";function LiftingStateUp() {let [price, setPrice] = useState(0);let [count, setCount] = useState(0);/*** 处理单价*/function handlePriceInput(event: any) {setPrice(parseFloat(event.target.value));}/*** 处理数量*/function handleCountInput(event: any) {setCount(parseFloat(event.target.value));}// 计算总价let total = count * price;return (<div>{/* 状态提示--价格 */ }<StateUpCom title={ "价格:" } value={price} handleInput={ handlePriceInput }/>{/* 状态提示--数量 */ }<StateUpCom title={ "数量:" } value={count} handleInput={ handleCountInput }/>总价:{ total }</div>);
}
export default LiftingStateUp;
接着在 src/main-concepts/lifting-state-up
目录下创建一个 state-up.com.tsx
组件:
import React from "react";
import PropTypes from "prop-types";type HandleInputFunc = (event: any) => void;
type Prop = {title: string,value: number,handleInput: HandleInputFunc,
};class StateUpCom extends React.Component<Prop> {static propTypes = {title: PropTypes.string, // 标题value: PropTypes.number, // 输入值handleInput: PropTypes.func, // 处理输入监听函数}static defaultProps = {title: "",value: 0}render() {const {title, value, handleInput} = this.props;return (<fieldset><legend>{title}</legend><input onInput={handleInput} type="number" value={value}/></fieldset>);}
}export default StateUpCom;
可以看到,我们把 StateUpCom
组件的 input
输入值通过handleInput
提升到了 “父组件” lifting-state-up/index.tsx
。
最后我们在 src/main-concepts/index.tsx
组件中引入 src/main-concepts/lifting-state-up/index.tsx
组件:
import ComponentsAndProps from "./components-and-props";
import StateAndLifecycle from "./state-and-lifecycle";
import ConditionRender from "./condition-render";
import ListAndKey from "./list-and-key";
import Form from "./form";
import LiftingStateUp from "./lifting-state-up";/*** 核心概念列表组件*/
function mainConcepts() {return (<div>{/* 组件与属性 */}<ComponentsAndProps/>{/* State & 生命周期 */}<StateAndLifecycle/>{/* 条件渲染 */}<ConditionRender/>{/* 列表与 key */}<ListAndKey/>{/* 表单-受控组件 */}<Form/>{/* 状态提升 */}<LiftingStateUp/></div>);
};
export default mainConcepts;
我们重新运行项目看结果:
npm start
可以看到,子组件中的输入值都提升到了父组件,父组件会根据子组件中的输入值自动算出总价的值。
总结
我们照着 React 官网:https://reactjs.org/ 的内容跑了一遍 React
的所有核心概念,虽然有些概念可能很简单,但是搞技术的切勿眼高手低,有些看似很简单的东西,看千遍不如自己敲一遍,弄清这些概念对我们后面分析 React
的源码很有帮助,后面我们还会对 React
的高级特性以及一些 API
做解析。
ok,这节就先到这了,下节见!
本节内容的 Demo 项目地址:https://gitee.com/vv_bug/react-demo-day5/tree/dev/
欢迎志同道合的小伙伴一起交流,一起学习。
觉得写得不错的可以点点关注,帮忙转发跟点赞。
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 双眼皮手术后眼角变黑
...
2024/4/21 11:57:12 - 双眼皮手术方式对比
...
2024/4/21 11:57:11 - jQuery下载和安装详细教程
下载jQuery 我们可以到jQuery的官网下载jQuery文件(PS:其实jQuery就是一个封装了很多函数的js文件,把这个js文件导入到网页中就可以了)。 jQuery官网地址: https://jquery.com/ 打开官网,即可看到jQuery…...
2024/4/21 11:57:10 - 双眼皮拆线后会不会大
...
2024/4/21 11:57:10 - 双眼皮不好看可以割吗
...
2024/4/20 16:51:00 - 武汉好的双眼皮医院好点
...
2024/4/20 12:32:58 - 全切双眼皮 明星
...
2024/4/20 16:50:58 - 武汉好的做双眼皮整形医院是哪家好
...
2024/5/1 22:36:52 - 双眼皮眼角黑怎么回事
...
2024/4/20 16:50:57 - 双眼皮两年变窄
...
2024/4/20 16:50:55 - 男整形双眼皮图片大全
...
2024/4/20 16:50:54 - Angularjs优缺点
目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 1.背景介绍1.1 AngularJS由来? AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML词汇, 从而在web应用程序中使用HTML声…...
2024/4/20 16:50:53 - 莆田割双眼皮的医院哪家最好的医院哪家好
...
2024/4/21 11:57:08 - 【图像分割】基于matlab最大类间方差法(otsu)图像分割【含Matlab源码 121期】
一、最大类间方差算法简介 最大类间方差算法分割原理 广泛流行的图像分割算法是最大类间方差,又称大津法(OTSU),是日本学者大津展之在1979年提出的。其算法思想是通过最大类间方差准则来选取最优阈值。 OTSU算法基本原理是:假设图像中有L个灰度等级,其中灰度值为j的数目为nj,则…...
2024/4/21 11:57:07 - 待办事项vue_Spring和Vue中的一个简单的待办事项应用
待办事项vuepawaTask (pawaTask) A simple todo list application that keeps track of your time. 一个简单的待办事项列表应用程序,可以跟踪您的时间。 如何 (How To) To access the application go to: http://localhost:8080/. 要访问该应用程序,请…...
2024/4/21 11:57:06 - linux ui 布局管理器,详解Android开发中UI的五种布局管理器教程
布局(Layout)的概念是针对Activity的,Activity就是布满整 个Android设备的窗口或者悬浮于其他窗口上的交互界面。在一个应用程序中通常由多个Activity构成,每个需要显示的Activity都需要在 AndroidManifest.XML文件之中声明。一般情况下,开发…...
2024/4/21 11:57:05 - 编写自定义Yeoman生成器简述
1. 安装生成器Yeoman提供了generator-generator方便快速编写自己的生成器。 安装: npm install -g generator-generator运行: yo generator输入要自定义生成器的名字后会创建好生成器的架子 2.安装自定义生成器创建好自定义生成器后将生成器开发目录安装到nodejs全局环境就可以…...
2024/4/21 11:57:04 - 从印度英语想到creole
在前面的帖子中,提到印度人讲英语,发音很不标准,我们中国人几乎听不懂。事实上,这种现象在某些前英国殖民地国家很普遍。比如在巴布亚新几内亚,当地人的英语发音也是很不标准,他们将color(颜色)念成kala&am…...
2024/4/21 11:57:04 - Ant使用
一、build.xml<?xml version"1.0" encoding"UTF-8"?><project name"iCore_acss" basedir"." default"main" xmlns:ivy"antlib:fr.jayasoft.ivy.ant"><!-- --><!-- 变量设置 --><!-…...
2024/4/21 11:57:02 - 设计Android的用户界面(一)
(在读本文之前,会缺省的认为你已经知道如何创建一个Android项目,并知道如何在模拟器中运行这个项目。并且,期望你已经有一点HTML或者其他GUI的开发经验。) 在我的理解中,对开发者来说,写J2SE的…...
2024/4/21 11:57:01
最新文章
- 【C++风云录】改变气候研究游戏规则:CLM、CESM、WRF、CDO、MPAS和NCL的全面指南
科技与气候:六大工具的洞察和应用 前言 在当前的科技环境中,模型和软件工具对于理解和预测天气,气候变化以及其他地球系统现象起着至关重要的作用。本文将详细介绍六种不同的工具:CLM, CESM, WRF, CDO, MPAS 和 NCL,…...
2024/5/1 22:37:29 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - Lesson1--数据结构前言
1. 什么是数据结构? 2. 什么是算法? 3. 数据结构和算法的重要性 4. 如何学好数据结构和算法 5. 数据结构和算法书籍及资料推荐 1. 什么是数据结构? 数据结构(Data Structure) 是计算机存储、组织数据的方式,指相互之间存在一…...
2024/4/30 10:33:17 - [Spring Cloud] gateway全局异常捕捉统一返回值
文章目录 处理转发失败的情况全局参数同一返回格式操作消息对象AjaxResult返回值状态描述对象AjaxStatus返回值枚举接口层StatusCode 全局异常处理器自定义通用异常定一个自定义异常覆盖默认的异常处理自定义异常处理工具 在上一篇章时我们有了一个简单的gateway网关 [Spring C…...
2024/5/1 13:04:53 - k8s_入门_kubelet安装
安装 在大致了解了一些k8s的基本概念之后,我们实际部署一个k8s集群,做进一步的了解 1. 裸机安装 采用三台机器,一台机器为Master(控制面板组件)两台机器为Node(工作节点) 机器的准备有两种方式…...
2024/4/30 17:11:04 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/1 17:30:59 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/30 18:14:14 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/29 2:29:43 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/30 18:21:48 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/27 17:58:04 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/28 1:28:33 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/30 9:43:09 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/27 17:59:30 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/25 18:39:16 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/28 1:34:08 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/29 20:46:55 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/30 22:21:04 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/1 4:32:01 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/27 23:24:42 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/28 5:48:52 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/30 9:42:22 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/30 9:43:22 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/30 9:42:49 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57