react-redux的connect
一、UI组件和容器组件
React-Redux将所有组件分为两大类：UI组件 和 容器组件
UI组件：只负责UI的呈现，不带有任何业务逻辑，没有状态state值的使用，所以的参数是通过this.props获取。
容器组件：负责管理数据和业务逻辑，不负责UI的呈现，有业务逻辑，并且使用Redux提供的API
二、connectReact-Redux提供connect方法，用于从UI组件生成容器组件。connect的意思，就是将这两种组件连起来。
导入1import { connect } from 'react-redux'
使用1export default connect(mapStateToProps, mapDispatchToProps)(AppUI);
connect方法可以省略mapStateToProps参数，那样的话，UI组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。
mapStateToProps：更新props ==> 作为输入源。返回一个对象，key为UI界面对 ...
CornerstoneJs基础概念篇
Cornerstone 是一个开源项目，其目标是提供一个完整的基于网络的医学成像平台。
关键特性
基于HTML5/Javascript的库，可以轻松地将交互式医学图像添加到web应用程序中
作为从企业查看器、报告查看器登构建更复杂医疗成像应用程序的基础
支持所有基于HTML5的浏览器，包括手机、平板电脑和台式机
显式所有常见的医学图像格式（例如8位灰度、16位灰度、RGB颜色）
高性能图像显示（例如通过webworker）
通过图像加载器插件设计从具有不同协议的不同系统检索图像
API支持更改视口属性（例如ww/wc、缩放、平移、反转）
仅支持2D成像
Concepts 概念
Enabled Elements
通过网页中的脚本标记引用 Cornerstone JavaScript 库文件
引用一个或多个图像加载器的 JavaScript 文件，Cornerstone 将使用该加载器在网页中实际加载像素数据（例如 WADO、WADO-RS、自定义）
将一个元素添加到 DOM 中，该元素将用于显示其中的图像
使用 CSS 将元素定位在页面上以及所需的宽度和高度
...
TailwindCss基本介绍和使用
TailwindCss是什么官网 总的来说, 就是设置好了一堆工具类, 定义好样式可以直接调用。
引入
安装1npm install -D tailwindcss
创建配置配件tailwind.config.js123456789npx tailwindcss initmodule.exports = { content: ["./src/**/*.{html,ts,js}"], theme: { extend: {}, }, plugins: [],}
在项目的公共css文件（src/style.css）中添加以下内容，用 @tailwind 指令添加 Tailwind123@tailwind base;@tailwind components;@tailwind utilities;
运行 tailwindcss CLI 工具，指定源文件 ./src/style.css 和输出文件./src/output.css，开启监听生效目录中所有出现的 class 类名的变化 ...
JavaScript十大排序算法
排序是最最最基础了，但是老是忘记，好记性不如烂笔头！
序、算法概述
算法分类十种常见排序算法可以分为两大类：
比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。
非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此也称为线性时间非比较类排序。
算法复杂度
排序方法
时间复杂度（平均）
时间复杂度（最坏）
时间复杂度（最好）
空间复杂度
稳定性
冒泡排序
O(n²)
O(n²)
O(n)
O(1)
稳定
快速排序
O(n㏒n)
O(n²)
O(n㏒n)
O(n㏒n)
不稳定
简单插入排序
O(n²)
O(n²)
O(n)
O(1)
稳定
希尔排序
O(n^1.3)
O(n²)
O(n)
O(1)
不稳定
简单选择排序
O(n²)
O(n²)
O(n²)
O(1)
不稳定
堆排序
O(n㏒n)
O(n㏒n)
O(n㏒n)
O(1)
不稳定
归并排序
O(n㏒n)
O(n㏒n)
O(n㏒n)
O(n)
稳定
计数 ...
TS类型挑战题目记录-中等篇3
Absolute
实现一个接收string,number或bigInt类型参数的Absolute类型,返回一个正数字符串。1234567891011121314type Absolute<T extends number | string | bigint> = `${T}` extends `-${infer U}` ? U : `${T}`type cases = [ Expect<Equal<Absolute<0>, '0'>>, Expect<Equal<Absolute<-0>, '0'>>, Expect<Equal<Absolute<10>, '10'>>, Expect<Equal<Absolute<-5>, '5'>>, Expect<Equal<Abso ...
TS类型挑战题目记录-中等篇2
Trim Left
实现 TrimLeft ，它接收确定的字符串类型并返回一个新的字符串，其中新返回的字符串删除了原字符串开头的空白字符串。1234567891011type TrimLeft<S extends string> = S extends `${" " | "\n" | "\t"}${infer R}` ? TrimLeft<R> : Stype cases = [ Expect<Equal<TrimLeft<'str'>, 'str'>>, Expect<Equal<TrimLeft<' str'>, 'str'>>, Expect<Equal<TrimLeft<' str'>, 'str'>>, Expec ...
TS类型挑战题目记录-中等篇1
好了, 接下来到中等的挑战了, 拭目以待。
Get Return Type
不使用 ReturnType 实现 TypeScript 的 ReturnType 泛型。12345678910type MyReturnType<T> = T extends (...args: any) => infer R ? R : neverconst fn = (v: boolean) => { if (v) return 1 else return 2}type a = MyReturnType<typeof fn> // 应推导出 "1 | 2"
Omit
不使用Omit实现TypeScript的Omit<T, K> 泛型。Omit会创建一个省略 K 中字段的 T 对象。12345678910111213type MyOmit<T, K extends keyof T> = { [key in keyof T as key extends K ? never : ...
TS类型挑战题目记录-简单篇
最近在看TypeScript类型, 发现远不是我想的只是基于JavaScript上加点类型注释。
后来在github上发现了TypeScript type challenges(我愿称之为极其变态的挑战)
对目前的我来说, 还是有很大的难度… 特此记录一下简单篇的类型训练！
Pick
实现 TS 内置的 Pick<T, K>，但不可以使用它。从类型 T 中选择出属性 K，构造成一个新的类型。123456789101112131415type MyPick<T, K extends keyof T> = { [P in K]: T[P]}interface Todo { title: string description: string completed: boolean}type TodoPreview = MyPick<Todo, 'title' | 'completed'>const todo: TodoPreview = { titl ...
基于TypeScript常见手写题
深拷贝12345678910111213141516function deepClone<T extends Array<T> | any>(obj: T): T { if (typeof obj !== "object" || obj === null) { return obj; } if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); const result: T = new obj.constructor(); for (const key in obj) { if (obj.hasOwnProperty(key)) { result[key] = deepClone(obj[key]); } } return result;}
Promise1234567891011 ...
Css3 nth 选择器
nth选择器也称为CSS3 结构类平时偶尔会用到，但是记不清楚，所以整理一下便于记忆。
nth 方法123456789101112131415161718192021:first-child:last-child:nth-child():nth-last-child():nth-of-type():nth-last-of-type():first-of-type:last-of-type:only-child():only-of-type():empty()
:first-child概念：选择其父元素的首个子元素的每个Element元素
1li:first-child 表示选取第一个标签li
:last-child概念：指定属于其父元素的最后一个子元素的Element元素
1li:last-child 表示选取最后一个标签li
:nth-child(n)概念：选择器匹配属于其父级元素的第n和子元素,不论元素类型
12345li:nth-child(n + 4)选取大于等于4的标签li，其中"n"为整数li:nth-child(-n + 4)选取小于等于4的标签 ...