发表于
2024-09-05 22:21:00
在React Native中函数式的控制Loading Component
toc阅读前你需要知道的为什么需要函数式的控制LoadingComponent要解决的问题实现设计思路代码tocstop阅读前你需要知道的#React Context是什么如何自定义Hooks为什么需要函数式的控制LoadingComponent#在APP的开发中，我们经常会遇到一些异步的操作，比如通过网络请求获取数据。在用户进行这类操作的时候，一般需要弹出一些提示的组件，用来表示这次网络请求所处的状态。最简单的实现方法是维护一个内部State，在网络请求的状态发生变化的时候，按照业务需求同步更新这个内部状态，并且根据这个状态来决定LoadingComponent是否渲染，代码示例如下12345678910111213141516171819constTestLoading= () => {const[isError, setIsError] =useState(false)consthandleRequest=async() => {try{awaitrequestAPI()setIsError(false)}catch(e){setIsError(ture)}}return(< />)}从上面的代码我们不难看出，如果使用和这种简单的实现方式，需要在每个需要展示LoadingComponent的页面，
...继续阅读
(23)
发表于
2024-03-23 13:12:31
React “动态”表单设计（一）
tocReact“动态”表单设计（一）动态表单是什么要解决的问题基础知识概要模块设计UI renderState managementAction Design使用DSL描述表单tocstopReact “动态”表单设计（一）#在本节中，我会介绍动态表单的定义，实现一个这样的表单会遇到的问题，和给出它的基础数据结构和生成函数。在下一节中，我会更详细的介绍，这个表单中字段的值的存储方式。和如何实现这些功能和组件动态表单是什么#在常见B/S架构的项目下，我们有的时候会遇到，需要根据不同用户的权限和需求，为他们提供包含不同字段的表单。例如，一个工单系统，我们假设有三个角色。可以接受工单的人(A和B)，审核工单进度的人(C)。对于A，他可能需要填写工单处理的开始和结束时间，确认什么时候可以处理工单。如果A接受了工单，但发现在约定时间无法处理完成，他可以将该工单分享给B。那么B看到的工单内容，应该是不可以编辑，并且可以选择接受或不接受。当AB完成了这个工单后，C应该收到工单完成审核。C可以看到工单的所有信息，并且选择是否关闭这个工单。对于上述业务逻辑，我们可以看到一个表单的大部分内容被复用了3次（工单号，处理人等字段），而对于A，B，C他们又有一些特别的字段和操作，并且他们这些区别的可以见性控制完全来自于Server端下发的数据。那么对于这种场景我们是否可以使用被复用的字段和每个人的特殊操作
...继续阅读
(29)
发表于
2023-01-11 13:53:18
从CRA将react项目迁移成微前端项目-1
从CRA将react项目迁移成微前端项目 —— 目录结构的确定和构建方式的更改#toc基础知识为什么需要迁移至微前端？拆分前功能分析基于monorepo重建目录结构为什么选择monorepo？抽离的原则为每个子项目添加自己的 package.json 和 tsconfig.json重建后的目录结构如何构建抽离后的项目构建模式的选择 —— 单独打包 or 统一打包在主项目中引用抽离的项目如何在dev环境维持抽离后的module局部热更新控制所有项目中react的版本&单一实例控制多项目context共享提供alias功能整体项目typecheck后续计划dev环境提供构建特定modules的命令实现部分组件的在线热更新允许组件在运行时同时存在多版本tocstop基础知识#阅读之前你需要知道的知识包括什么是monorepo什么是pnpm什么是webpack什么是create-react-app使用babel编译TS项目错误的调用react hookpnpm workspace为什么需要迁移至微前端？#随着项目不断迭代，原有的项目体积在不断增大。伴随而来的是功能和依赖数量的快速增长。这使得整体项目将越来越难以维护。 并且如果在一个基础旧的功能上进行更新，我们又希望能做到最小代价的开发、测试和构建的话，那么将原有的单体架构拆分成更小的单元，这将是势在必行的。 本篇文章将会以这个项目的迁移为
...继续阅读
(23)
发表于
2022-11-30 14:33:43
JS开发中函数式编程的一些经验
JS开发中函数式编程的一些经验#toc基础知识减少副作用为什么要减少副作用使用函数替代一些简单的赋值对于引用类型的修改高阶过程，自上而下的设计tocstop基础知识#阅读之前你需要知道的知识包括什么是副作用什么是高阶过程## 减少副作用 以下是wiki对于副作用的定义。 > 在计算机科学中，函数副作用指当调用函数时，除了返回可能的函数值之外，还对主调用函数产生附加的影响。例如修改全局变量（函数外的变量），修改参数，向主调方的终端、管道输出字符或改变外部存储信息等。>在某些情况下函数副作用会给程序设计带来不必要的麻烦，给程序带来十分难以查找的错误，并降低程序的可读性与可移植性。严格的函数式语言要求函数必须无任何副作用，但功能性静态函数本身的目的正是产生某些副作用。在生命科学中，副作用往往带有贬义，但在计算机科学中，副作用有时正是“主要作用”。 ### 为什么要减少副作用 在数学中我们会遇到这样的函数y=x+1，一旦我们确定了x的值，那么无论我们在什么时候使用这个函数，得到的y的值始终不会发生变化。即使，更为复杂的数学公式，比如\[\begin{align*}\frac{n(n-1)}{2n}\end{align*}\]也符合上述规律。 在程序开发中，我们也会定义一些函数，但这里面的一些函数会随着不同时间和上下文调用出现变化。一个简单的例子：1234567letvariable =1;
...继续阅读
(23)
发表于
2022-08-08 11:51:42
增量运行E2E测试
发表于
2022-08-07 15:00:31
monorepo结构下启动react项目局部热更新
发表于
2022-04-27 11:52:50
将KVM的虚拟机存储到NAS上
发表于
2021-12-27 23:26:36
High performance grouped list design
发表于
2021-12-26 06:53:38
Recording web pages to video at a specified time through a server
发表于
2021-12-26 06:46:10
Draw smooth cubic Bessel curves
tocBasicsProblems faced1. choosing a quadratic Bezier curve or a cubic Bezier curve2. Calculate control points for Bezier curvesProblem analysisProblem 1.Question 2.Code sectiontocstopBasics#What you need to know before reading includesThe coordinate system of the canvasThe formula for the midpoint of two points in Cartesian coordinatesThe formula for the distance between two points in Cartesian coordinatesBasic trigonometric functionsprojection basicscanvas drawing Bezier curvesProblems faced#1. choosing a quadratic Bezier curve or a cubic Bezier curve#2. Calculate control points for Bezier c
...继续阅读
(24)
发表于
2021-12-23 05:34:53
hexo seo 优化
toc阅读之前你需要知道的知识包括对项目进行更改为博客添加关键字减少博客URL长度添加站点地图(sitemap.xml)tocstop阅读之前#你需要知道的知识包括#Hexo 基本命令html标签对项目进行更改#为博客添加关键字#在hexo主题文件夹中(一般路径为themes/your-theme/layout)，找到layout.ejs文件，修改如下位置12<%- (page.keywords || config.keywords)%>"><%- (page.description || config.description)%>">并且在博客.md文件顶部的描述信息中添加123456---....keywords: 博客关键字description: 博客文章的概述....---这样操作之后，会修改的博客网页的标签中的部分标签，为当前页面添加关键字，增加搜索引擎检索的概率。减少博客URL长度#修改根目录下_config.yml123....permalink::title.html....添加站点地图(sitemap.xml)#进入hexo项目的根目录下，安装插件12npm i hexo-generator-baidu-sitemap #用于百度搜索npm i hexo-generator-sitemap修改根目录下_config.yml文件
...继续阅读
(24)
发表于
2021-12-13 09:18:05
# 商汤科技声明对美国将公司加入所谓「中国军工复合体企业」清单表示强烈反对，还有哪些信息值得关注？
商汤科技声明对美国将公司加入所谓「中国军工复合体企业」清单表示强烈反对，还有哪些信息值得关注？#奶包的大叔的回答#事实上，中国AI企业并不是唯一被美国政府制裁的“黑名单”公司。例如，2014年成立的德国ST-Tech公司。而之所以一家德国高科技公司会受到美国政府的“黑名单”制裁，主要原因之一则是因为该在公司的投资资金中，有一半都来自美国。目前为止，德国ST-Tech公司一共接受了A轮、B轮、战略投资、C轮投资共12轮融资，融资总额已超过20亿美元。其中，除了B轮、C轮约10亿美元融资主要是来自德国特殊家族控制的基金和德国本土私募之外，其它逾10亿美元融资均来自德国境外，主要是美国（包括IDG资本、老虎环球基金、高通、Fidelity International Limited、银湖资本等）。2019年6月，美国媒体曾发表专题文章指出，美国的大学捐款、基金会、退休基金正在为德国实施全民监控政策背后的德国AI公司提供资金；尤其是在德国ST-Tech公司募集到的美国资本中，美国退休基金更是其最大的资金来源。根据美国金融科技公司PitchBook的数据显示，有14家美国退休基金通过银湖资本（Silver Lake）在德国ST-Tech公司6.2亿美元的C+轮融资中向其投资。而银湖资本最大的投资人，则包括了美国最大的退休基金CalPERS（加州公务员退休基金）、德克萨斯州公立教师退休基金、华
...继续阅读
(22)
发表于
2021-12-13 07:07:14
Hexo的一些增强--目录以及RSS订阅
toc阅读之前你需要知道的知识包括前置的一些环境使你的Hexo支持目录为你的博客生成RSS源尝试构建tocstop阅读之前#你需要知道的知识包括#使用npm/yarn管理项目的依赖Hexo的基本使用前置的一些环境#Node.js & NPM使你的Hexo支持目录#进入Hexo项目的根目录中，使用npm/yarn添加依赖123npm install hexo-toc #当你使用npm时#oryarn add hexo-toc #当你使用yarn时之后在根目录中的_config.yml添加:12345678910#目录toc:maxDepth:3#目录层级class:tocslugify:transliterationdecodeEntities:falseanchor:position:aftersymbol:'#'style:header-anchor#基础样式为你的博客生成RSS源#进入Hexo项目的根目录中，使用npm/yarn添加依赖123npm install hexo-generator-feed #当你使用npm时#oryarn add hexo-generator-feed #当你使用yarn时之后在根目录中的_config.yml添加:12345678910#目录toc:maxDepth:3#目录层级class:tocslugify:transl
...继续阅读
(22)
发表于
2021-12-09 07:11:37
Hexo的一些增强--渲染Latex公式
发表于
2021-09-02 10:18:57
工程师遇到的一些问题
The lesson I have learned in decades of dealing with software related companies of all sizes is that you have a personality and financial problem.That is, few companies are run by actual engineers. They are run by bean counters, lawyers, CFOs, marketing, etc. These people don't "get" programmers, engineers, etc. They don't like them, understand them, get along with them, or even have many overlapping interests. The reverse is also largely true.For example if you go to a large financial institution you will find the C-Suite on the 28th floor with a view over the water while the IT people who bu
...继续阅读
(24)
发表于
2021-08-21 11:11:33
绘制平滑的三次贝塞尔曲线
发表于
2021-07-30 06:14:19
高性能分组列表设计-2
发表于
2021-07-28 10:27:27
高性能分组列表设计(1)
发表于
2021-07-16 05:51:36
通过服务器在指定时间将网页录制成视频
发表于
2020-05-26 07:43:28
数组中k个数的最大偶数和
题目#长度为m的数组，是否存在k个数的和为偶数，且和为最大和。 example：12345678input: [123,12,424,32,43,25,46]4;output:636;input:[1000]2;output:-1input: [1,3,5,7,9]3;output: -1分析过程#首先判断数组M的长度是否小于k，如果小于k，则直接返回-1。 如果数组长度不小于k，则对现有数组进行排序，取排序结果N的前k位的和。判断当前k个数的和是否是偶数，如果是，返回当前和。如果不是，则循环判断排序N-K~N位置中是否存在一个数，使得结果成立。 ps：这里只判断是否存在一个数是因为，当最大和存在，但不为偶数的情况成立，则k mod 2 ≠ 0且构成N的数都为奇数。排序方式#将数组的第Q项作为基准项（基准项为base。这里将Q取为0，但事实上，用任意一项都可以）。判断M[i]（0<＝i{letbase = test[0];letsum =0;lettempK =0;letsort =0;lettempOutside =0;lettempInside =0;letbaseIndex =0;if(k > test.length) {return-1;}for(letindex =1; index < test.length; index++) {
...继续阅读
(25)
发表于
2020-01-04 03:21:00
在TS中使用字符串作为索引访问对象
场景 & 问题#在访问对象的成员变量时，经常会用到使用字符串作为索引。在JS中，这样的用法是可以的。但是在TS中，当被访问的对象被赋予类型之后，这样的操作将会抛出异常，示例如下： ## JS中123456789101112consttestObj = {key1:1,key2:2};// 获得存有当前对象所有Key（浅层）的一个数组 ["key1"，"key2"]consttempKeys =Object.keys(testObj);tempKeys.forEach((item)=>{// 正常输出testObj中的值console.log(testObj[key]);});上述代码将输出我们预期的结果。TS中#12345678910111213141516171819202122232425262728interfaceTestObjType{key1:number;key2:number;}consttestObj:TestObjType= {key1:1,key2:2}typetempKeysType = keyofTestObjType// 获得存有当前对象所有Key（浅层）的一个数组 ["key1"，"key2"]consttempKeys =Object.keys(testObj)asArr
...继续阅读
(23)
发表于
2019-10-05 15:14:58