初探react,用react实现一个todoList功能

初探react,用react实现一个todoList功能

  • 🛰️前言
  • 🚀一、react基础
    • 1. react简介
    • 2. 开发环境搭建
    • 3. 工程目录文件简介
    • 4. react中最基础的JSX语法
  • 🛸二、使用react编写TodoList功能
    • 1. 页面构思
    • 2. React中的响应式设计思想和事件绑定
    • 3. 实现TodoList新增删除功能
      • (1)新增功能
      • (2)删除功能
  • 🪐三、对TodoList功能进行进阶操作
    • 1. JSX语法细节补充
      • (1)自动转义
      • (2)光标聚焦
    • 2. 拆分组件与组件之间的传值
    • 3. TodoList代码优化
  • 🌠四、围绕React衍生出的思考
  • 🌌五、结束语
  • ✈️彩蛋

🛰️前言

对于前端而言, react 是前端三大主流框架之一。而在现实生产中,基本上很多大型公司也会偏向于使用 react ,原因在于 reactdiy 能力比起其他框架也会稍微要更好一些~

紧跟着新技术的步伐,周一也开始学期了 react 。那在下面的文章中,将讲解关于 react 的一些基础知识点,同时呢,也将用 react 来实现一个 TodoList 的功能。

叮咚,开始奇妙的 eract 之旅~🚋

🚀一、react基础

在对 todoList 功能进行设计之前,我们先来了解一点 react 相关的基础知识。

1. react简介

对于 reactjs 来说,需要了解的一些基础知识主要有以下几点:

  • reactjsreact nativereact VR
  • Facebook 推出的一款框架,于 2013 年开源于社区;
  • react 拥有丰富的函数式编程;
  • react 目前在全球范围内,是使用人数最多的前端框架,同时它拥有健全的文档与完善的社区;
  • React FiberReact 16 的版本,它为 React 做了很多底层的优化。

2. 开发环境搭建

在进入 react 的基础学习之前,我们首先来搭建 react 的开发环境。对于 react 的环境搭建来说,一般有两种方式,分别是:

  • 通过引入 .js 文件来使用 React
  • 通过脚手架工具来编码,比如 GRUNTGulpwebpack
  • 使用 create-react-app 来搭建环境。

那么现在,我们用 create-react-app 来搭建一个 react 项目。具体命令行如下:

npx create-react-app my-app
cd my-app
npm start

3. 工程目录文件简介

初始化完一个项目后,我们来了解下 react 的项目结构。具体如下:

├── public├── favicon.ico 网页icon├── index.html 首页的html模板├── manifest.json 缓存文件
├── src├── App.css ├── App.js 填写组件的内容├── App.test.js 自动化测试文件├── index.css├── index.js 整个程序运行的入口文件├── logo.svg├── registerServiceWorker 借助网页写手机app的功能
├── README.md 项目的说明文件
├── yarn.lock 项目依赖安装包的一些版本号

4. react中最基础的JSX语法

以前我们在写像 <div></div> 这种类似的语法时,一般都是写在 HTML 文件里面。那么,在 react 中,像 <div></div> 这种类型的代码,是在 JS 中去写的。因此,在 js 中写的 html 代码,被称之为 jsx 语法。

值得注意的是,在 react 中使用自己定义的组件时,组件名必须以大写为开头,小写开头在 jsx 中是不支持的,这一点需要稍微注意一下。

所以,一般看到以大写为开头时,比如 <App /> ,则说明是我们自己定义的组件。如果是小写为开头时,则一般是原始的 HTML5 标签,如 <div></div>

🛸二、使用react编写TodoList功能

1. 页面构思

首先,我们需要先来对页面的内容进行构造。我们在项目的 src文件夹下创建一个文件,命名为 TodoList具体代码如下:

import React, { Component, Fragment } from 'react';class TodoList extends Component {render() {return (<Fragment><div><input /><button></button></div><ul><li>学英语</li><li>Learning React</li></ul></Fragment>)}
}export default TodoList;

此时浏览器的显示效果如下:

todolist显示效果

2. React中的响应式设计思想和事件绑定

上面我们简单了显示了 todolist 的基本功能,那现在,我们想要实现的是,点击提交按钮,可以把 input 框里面的内容显示在列表下方,这又该怎么处理呢?

如果按照我们正常的思维来想的话,我们可能会觉得,在提交按钮中绑定一个事件,之后呢,当点击绑定按钮时,获取到 input 框的值,进行绑定提交。

但事实上, react 强调的是,我们不要直接操作 DOM ,而是要操作数据。当数据发生变化时, react 会自动地感知到我们数据发生的变化,会自动地帮我们生成 DOM

因此,在写 react 时,我们不需要关心 DOM 层面的操作,只需要去关心数据层面的操作即可。

现在,我们先来监听 input 框的值。具体代码如下:

import React, { Component, Fragment } from 'react';class TodoList extends Component {constructor(props) {super(props);this.state = {inputValue: 'hello!!',list: []}}render() {return (<Fragment><div><input value = {this.state.inputValue}onChange = {this.handleInputChange.bind(this)}/><button>提交</button></div><ul><li>学英语</li><li>Learning React</li></ul></Fragment>)}handleInputChange(e) {this.setState({inputValue: e.target.value})}
}export default TodoList;

此时浏览器的打印效果为:

input框值绑定显示效果

大家可以看到,我们正确的使得 input 框响应到了数据。

那在上面的这段代码中,需要了解的知识点有以下几点。分别是:

  • state 负责存储组件中的数据;
  • 如果想要在 html 代码中用一些 js 的表达式,那么要记得用 {} 进行包裹;
  • 在进行事件绑定时,记得使用 bind(this) 对事件的作用域进行变更;
  • 当你想要改变数据项时,不能直接使用 this.state 来改变数据的值,要通过 setState 函数来进行改变。

3. 实现TodoList新增删除功能

(1)新增功能

在上面的例子中,我们实现了 input 框中值的获取。那现在,我们要来实现点击提交这个按钮,能够实现对 input 框中值的新增。同样地,是在 TodoList.js 文件下进行修改。具体代码如下:

import React, { Component, Fragment } from 'react';class TodoList extends Component {constructor(props) {super(props);this.state = {inputValue: 'Monday',list: []}}render() {return (<Fragment><div><input value = {this.state.inputValue}onChange = {this.handleInputChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button></div><ul>{this.state.list.map((item, index) => {return <li key={index}>{ item }</li>})}</ul></Fragment>)}handleInputChange(e) {this.setState({inputValue: e.target.value})// console.log(e.target.value)}handleBtnClick() {// ... 展开运算符会将之前的数组进行展开,并生成一个全新的数组// 将input框的值和list的值进行合并形成一个新的数组this.setState({list: [...this.state.list, this.state.inputValue],inputValue: ''})}
}export default TodoList;

此时浏览器的显示效果如下:

input框中值的新增功能

在上面的代码中,需要了解的知识点有:

  • 我们先在 button 中绑定了 handleBtnClick 事件;
  • 之后通过展开运算符 ... ,将数组的内容给合并到 list 数组中;
  • 最后,使用 js 中的 map() 方法,将数组列表中的内容给遍历出来。

(2)删除功能

继续,我们来实现删除功能。具体代码如下:

import React, { Component, Fragment } from 'react';class TodoList extends Component {constructor(props) {super(props);this.state = {inputValue: 'Monday',list: []}}render() {return (<Fragment><div><inputvalue={this.state.inputValue}onChange={this.handleInputChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button></div><ul>{this.state.list.map((item, index) => {return (<likey={index}onClick={this.handleItemDelete.bind(this, index)}>{item}</li>)})}</ul></Fragment>)}handleInputChange(e) {this.setState({inputValue: e.target.value})}handleBtnClick() {this.setState({list: [...this.state.list, this.state.inputValue],inputValue: ''})}handleItemDelete(index) {const list = [...this.state.list];list.splice(index, 1);this.setState({list: list})}
}export default TodoList;

在上面的代码中,我们在每一个 <li> 标签下绑定了 handleItemDelete 事件,之后呢,通过传递它的 idindex ,同时,配合 splice() 方法,来删除掉掉 list 中具体的内容。


值得注意的是,在 react 中,它是不允许我们对 state 做任何改变的。比如说,我们想要把上面删除代码的逻辑这么写:

handleItemDelete(index) {this.state.list.splice(index, 1);this.setState({list: this.state.list})
}

如果我们直接去操作 this 来改变最后的结果,这会使得函数变得很难用。同时,这种方式在 react 中也是不允许滴!这是应该注意的一个点!

🪐三、对TodoList功能进行进阶操作

1. JSX语法细节补充

(1)自动转义

如果在 jsx 中,我们希望显示一些内容,且这些内容我们希望它自动转义。像下图这样:

不转义前效果

大家可以看到,如果不转义时,那么它直接显示除出了 <h1></h1> 标签。但其实我们希望的是,想要把它转义成一级标签的内容。那应该怎么处理呢?


我们就通过 dangerouslySetInnerHTML 这个属性来对 html 进行设置,已达到对 <li> 标签下的内容进行改变,具体代码如下:

<likey={index}onClick={this.handleItemDelete.bind(this, index)}dangerouslySetInnerHTML={{ __html: item }}>
</li>

我们来看下显示效果:

html转义

通过对 dangerouslySetInnerHTML 的设置,我们 html 的内容进行了转义。

(2)光标聚焦

在实际的实践中,对于 input 框来说,我们往往会想要点击某个文本,然后让它去聚焦到 input 框中输入内容。那这应该怎么处理呢?

我们继续来改造 jsx 代码。具体代码如下:

render() {return (<Fragment><div><label htmlFor="insertArea">输入内容</label><inputid="insertArea"className="input"value={this.state.inputValue}onChange={this.handleInputChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button></div><ul>{this.state.list.map((item, index) => {return (<likey={index}onClick={this.handleItemDelete.bind(this, index)}dangerouslySetInnerHTML={{ __html: item }}></li>)})}</ul></Fragment>)}

此时浏览器的显示效果为:

光标聚焦

大家可以看到,当我们点击输入内容这四个字时,光标就自动地聚焦到 input 框上,并且能够进行自由地输入。那这样的功能是怎么实现的呢?

在上面的代码中,我们可以看到,通过 label 标签htmlFor 来对内容进行绑定,以达到最终我们想要实现的效果。

2. 拆分组件与组件之间的传值

在实际的项目中,对于一个大的组件来说,我们总是会对其进行组件拆分。那对于上面这个 todoList 组件来说,也不例外。

我们可以把①输入内容,② input 框 和 ③提交按钮拆分成一个组件。之后呢,把 list 列表拆分成另外一个组件。那接下来我们来对这个组件进行拆分以及父子组件间数据的传递。

首先我们在项目的 src 文件夹下添加一个新的文件。命名为 TodoItem.js具体代码如下:

import React, { Component } from 'react';class TodoItem extends Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);}render() {return (<divonClick={this.handleClick}>{this.props.content}</div>)}handleClick() {this.props.deleteItem(this.props.index);}
}export default TodoItem;

现在,我们来改造 TodoList.js 文件。具体代码如下:

import React, { Component, Fragment } from 'react';
import './style.css';
import TodoItem from './TodoItem';class TodoList extends Component {constructor(props) {super(props);this.state = {inputValue: 'Monday',list: []}}render() {return (<Fragment><div><label htmlFor="insertArea">输入内容</label><inputid="insertArea"className="input"value={this.state.inputValue}onChange={this.handleInputChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button></div><ul>{this.state.list.map((item, index) => {return (<div>{/* 父组件将content,index 和 deleteItem 将对应的内容传递给子组件 */}<TodoItemcontent={item}index={index}deleteItem={this.handleItemDelete.bind(this)}/>{/*<likey={index}onClick={this.handleItemDelete.bind(this, index)}dangerouslySetInnerHTML={{ __html: item }}></li>*/}</div>)})}</ul></Fragment>)}handleInputChange(e) {this.setState({inputValue: e.target.value})// console.log(e.target.value)}handleBtnClick() {// ... 展开运算符会将之前的数组进行展开,并生成一个全新的数组// 将input框的值和list的值进行合并形成一个新的数组this.setState({list: [...this.state.list, this.state.inputValue],inputValue: ''})}handleItemDelete(index) {const list = [...this.state.list];list.splice(index, 1);this.setState({list: list})}
}export default TodoList;

就这样,我们对组件进行拆分,达到了与上面未拆分前一样的效果。

那现在,我们来梳理下其中的知识点。主要有以下两个知识点:

  • 如何进行组件的拆分
  • 父组件向子组件传递值,应该怎么传递

首先,我们创建了一个新的文件 TodoItem ,来存放列表的内容,这是第一点。

其次,有了列表的内容后,我们要来想,父子组件间的数据,怎么传递。那事实上,父组件向子组件传递内容,通过属性的形式来传递。大家看到父组件中 <TodoItem /> 的位置,在父组件中,通过 content={item} 这样的形式,来把 item 命名为 content ,并将其传递给子组件。

而对于子组件 <TodoItem /> 来说,它将以 this.props 的方式来调用父组件的数据和事件

3. TodoList代码优化

在上面的代码中,我们对组件进行拆分,以及实现了父子组件间的数据传递。

但细心的小伙伴可能已经发现,代码这么写可能还不够美观。因此,我们来对这两个组件的代码进行优化。

首先是 TodoItem.js具体代码如下:

import React, { Component } from 'react';class TodoItem extends Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);}render() {const { content } = this.props;return (<div onClick={this.handleClick}>{/* {this.props.content} */}{content}</div>)}handleClick() {const { deleteItem, index } = this.props;deleteItem(index);}
}export default TodoItem;

我们把 this.props 给单独提取出来,之后再将其放在组件当中使用。同时呢,我们还对 this.handleClick.bind(this) 单独提取出来,这样也使得组件更加美观。


其次,我们来改造 TodoList.js具体代码如下:

import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem';
import './style.css';class TodoList extends Component {constructor(props) {super(props);this.state = {inputValue: 'Monday',list: []}this.handleInputChange = this.handleInputChange.bind(this);this.handleBtnClick = this.handleBtnClick.bind(this);this.handleItemDelete = this.handleItemDelete.bind(this);}render() {return (<Fragment><div><label htmlFor="insertArea">输入内容</label><inputid="insertArea"className="input"value={this.state.inputValue}onChange={this.handleInputChange}/><buttononClick={this.handleBtnClick}>提交</button></div><ul>{this.getTodoItem()}</ul></Fragment>)}getTodoItem() {// 父组件将content,index 和 deleteItem 将对应的内容传递给子组件return this.state.list.map((item, index) => {return (< TodoItemkey={index}content={item}index={index}deleteItem={this.handleItemDelete}/>)})}handleInputChange(e) {const value = e.target.value;this.setState(() => ({inputValue: value}));// console.log(e.target.value)}handleBtnClick() {// prevState表示在修改数据之前数据是怎么样的,避免不小心的改变state的状态this.setState((prevState) => ({list: [...prevState.list, prevState.inputValue],inputValue: ''}));}handleItemDelete(index) {this.setState((prevState) => {const list = [...prevState.list];list.splice(index, 1);return { list };});}
}export default TodoList;

同样地,我们先把 handleInputChangehandleBtnClickhandleItemDelete 这三个事件给抽离出来。

其次呢,我们把 this.state.list.map() 给单独出来形成 getTodoItem() 方法,并使用 {this.getTodoItem()} 进行调用。

最后,我们分别对事件中的 this.setState({}) 进行升级改造,将当前所有事件中的所有数据都封装在一个函数内。

🌠四、围绕React衍生出的思考

上面我们基本完成了对 TodoList 功能的开发。那么现在,我们将围绕着我们所学的,来衍生出 react 的一些番外的知识点。具体如下:

  • 声明式开发 —— 以前我们在 js 的开发中,都是大量的操作 DOM ,这种开发方式称为命令式开发。到现在,我们在使用 react 时,基本都是直接操作数据,而不是操作 DOM 。那么这样的开发方式,被称为是声明式开发
  • 可以与其他框架并存
  • 组件化方式开发
  • 单向数据流 —— 在 react 中,父组件允许往子组件传值,但是子组件只能去使用这个值,而不能去改变这个值。
  • 视图层框架 —— 只帮助我们解决数据和页面上的内容,并不负责组件间怎么传值,如何传值。
  • 函数式编程 —— 当一个函数内容变得多时,可以进行拆分。每一个函数各司其职,使得代码更具有维护性。同时,给前端的自动化测试带来巨大的便捷性。

🌌五、结束语

在上面的文章中,我们学到了关于 react 的一些基础知识。除此之外呢,我们还对 TodoList 进行了基础编写和进阶操作编写。与此同时,我们还围绕 React 衍生出了一些思考。不知道小伙伴们是否对 react 有一些了解了呢?

✈️彩蛋

  • 关注公众号星期一研究室,第一时间关注优质文章,更有面试专栏待你解锁~
  • 如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😉
  • 以上就是本文的全部内容!我们下期见!👋👋👋

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

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

相关文章

《五分钟商学院》个人篇学习总结(上)

【商业知识】| 作者 / Edison Zhou这是EdisonTalk的第285篇原创内容商业篇聚焦的是我们与外部的关系&#xff0c;管理篇聚焦的是我们与内部的关系&#xff0c;而个人篇聚焦的则是我们与自己的关系。与自己斗&#xff0c;其乐无穷&#xff0c;本文是个人篇的上半部分学习总结。本…

Git 实用操作 | 撤销 Commit 提交

有的时候&#xff0c;改完代码提交 commit 后发现写得实在太烂了&#xff0c;连自己的都看不下去&#xff0c;与其修改它还不如丢弃重写。怎么操作呢&#xff1f;使用 reset 撤销如果是最近提交的 commit 要丢弃重写可以用 reset 来操作。比如你刚写了一个 commit&#xff1a;写…

react只停留在表层?五大知识点带你梳理进阶知识

五大知识点带你梳理react进阶知识✉️前言&#x1f4e7;一、props1、PropTypes与DefaultProps应用&#xff08;1&#xff09;PropTypes&#xff08;2&#xff09;defaultProps2、props&#xff0c;state与render函数&#x1f4e8;二、React中的虚拟DOM1、什么是虚拟DOM&#xf…

解决 WPF 绑定集合后数据变动界面却不更新的问题

解决 WPF 绑定集合后数据变动界面却不更新的问题独立观察员 2020 年 9 月 9 日在 .NET Core 3.1 的 WPF 程序中打算用 ListBox 绑定显示一个集合&#xff08;满足需求即可&#xff0c;无所谓什么类型的集合&#xff09;&#xff0c;以下是 Xaml 代码&#xff08;瞟一眼就行&…

「offer来了」面试中必考的15个html知识点

「面试专栏」前端面试之html篇⚡序言⭐一、题集内容抢先看&#x1f320;二、规范相关1、你如何理解HTML结构的语义化2、浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢3、HTML W3C的标准4、Doctype作用? 严格模式与混杂模式如何区分&#xff1f;它们有何意义?5、vie…

leetcode700. 二叉搜索树中的搜索

一:题目 二:上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}*…

「offer来了」1张思维导图,6大知识板块,带你梳理面试中CSS的知识点!

「面试专栏」前端面试之css篇⌛序言✏️一、CSS框架先梳理&#x1f58c;️二、基础样式问题1、请你讲一讲css的权重和优先级&#xff08;1&#xff09;权重&#xff08;2&#xff09;优先级2、说一下CSS的position属性3、span 标签是否可以设置宽高&#xff0c; margin 和 padd…

动态代理的理解

一:动态代理和静态代理的区别 静态代理&#xff1a;了解设计模式中的代理模式的童鞋应该都知道&#xff0c;如果想要生成代理类&#xff0c;需要让代理类和被代理类实现同一个接口&#xff0c;并且在代理类中添加被代理类的引用&#xff0c;代理类方法实现中添加代理逻辑&…

.NET Core 下的爬虫利器

爬虫大家或多或少的都应该接触过的&#xff0c;爬虫有风险&#xff0c;抓数需谨慎。本着研究学习的目的&#xff0c;记录一下在 .NET Core 下抓取数据的实际案例。爬虫代码一般具有时效性&#xff0c;当我们的目标发生改版升级&#xff0c;规则转换后我们写的爬虫代码就会失效&…

Redux从入门到进阶,看这一篇就够了!

Redux&#xff0c;带你从入门到进阶&#x1f302;序言☂️一、基础知识1、Redux概念简述2、Redux的工作流程&#x1f383;二、使用Antd实现TodoList页面布局1、在项目中使用Antd2、使用Antd实现TodoList的基本布局3、创建redux中的store&#xff08;1&#xff09;创建store&…

ASP.NET Core 3.x控制IHostedService启动顺序浅探

想写好中间件&#xff0c;这是基础。一、前言今天这个内容&#xff0c;基于于ASP.NET Core 3.x。从3.x开始&#xff0c;ASP.NET Core使用了通用主机模式。它将WebHostBuilder放到了通用的IHost之上&#xff0c;这样可以确保Kestrel可以运行在IHostedService中。我们今天就来研究…

com.mysql.cj.exceptions.InvalidConnectionAttributeException

一:java连接数据库报错 com.mysql.cj.exceptions.InvalidConnectionAttributeException 二:报错原因 MySQL jdbc 6.0 版本以上必须配置“serverTimezone”参数 UTC代表的是全球标准时间 若我们使用的时间是北京时区也就是东八区&#xff0c;领先UTC八个小时。url的时区使用…

Istio Pilot 源码分析(一)

张海东&#xff0c; ‍多点生活&#xff08;成都&#xff09;云原生开发工程师。Istio 作为目前 Servic Mesh 方案中的翘楚&#xff0c;吸引着越来越多的企业及开发者。越来越多的团队想将其应用于微服务的治理&#xff0c;但在实际落地时却因为不了解 Istio 黑盒中的运行机制而…

结营啦!有缘相聚于青训,未来高处见呀~~

&#x1f4f8;叮&#xff01; 记 字节跳动第一届青训营顺利结营啦&#xff01; 从8月份的青训营&#xff0c;到9月份的实训营&#xff0c;搁置了许久的结营心得终于拾起来辽&#xff01; &#x1f3ac;开营进行时 从答疑会开始&#xff0c;负责人仔细的阐述了本次训练营的…

MVC三层架构(详解)

1:初始MVC (1):三层架构 三层架构是指&#xff1a;视图层 View、服务层 Service&#xff0c;与持久层 Dao。它们分别完成不同的功能。 View 层&#xff1a;用于接收用户提交请求的代码在这里编写。 Service 层&#xff1a;系统的业务逻辑主要在这里完成。 Dao 层&#xff1a;…

「offer来了」保姆级巩固你的js知识体系(4.0w字)

「面试专栏」前端面试之JavaScript篇&#x1f9d0;序言&#x1f973;思维导图环节&#x1f60f;一、JS规范1、说几条JavaScript的基本规范。2、对原生JavaScript的了解。3、说下对JS的了解吧。4、JS原生拖拽节点5、谈谈你对ES6的理解6、知道ES6的class嘛&#xff1f;7、说说你对…

写作是人生最大的杠杆

职场&认知洞察 丨 作者 / 易洋 这是findyi公众号的第71篇原创文章不知不觉&#xff0c;公众号写作已经持续了9个月了。去年11月底&#xff0c;心血来潮写了第一篇文章&#xff0c;更多是为了复盘过去的一些工作经历。在前几天&#xff0c;读者数突破了3万&#xff0c;虽然…

拥塞控制(详解)

一&#xff1a;TCP的拥塞控制 1:是什么 (1):是什么(拥塞现象) 网络的 吞吐量 与 通信子网 负荷(即通信子网中正在传输的分组数)有着密切的关系。当 通信子网 负荷比较小时,网络的 吞吐量 (分组数/秒)随网络负荷(每个 节点 中分组的平均数)的增加而线性增加。当网络负荷增加到…

解决 WPF 绑定集合后数据变动界面却不更新的问题(使用 ObservableCollection)

解决 WPF 绑定集合后数据变动界面却不更新的问题独立观察员 2020 年 9 月 9 日在 .NET Core 3.1 的 WPF 程序中打算用 ListBox 绑定显示一个集合&#xff08;满足需求即可&#xff0c;无所谓什么类型的集合&#xff09;&#xff0c;以下是 Xaml 代码&#xff08;瞟一眼就行&…

Kubernetes Liveness and Readiness Probes

在设计关键任务、高可用应用程序时&#xff0c;弹性是要考虑的最重要因素之一。当应用程序可以快速从故障中恢复时&#xff0c;它便具有弹性。云原生应用程序通常设计为使用微服务架构&#xff0c;其中每个组件都位于容器中。为了确保Kubernetes托管的应用程序高可用&#xff0…