twinkle的博客

在大前端时代，前端的各种工具链穷出不断，有eslintprettierhuskycommitlint等, 东西太多有的时候也是trouble😂😂😂,怎么正确的使用这个是每一个前端开发者都需要掌握的内容，请上车🚗🚗🚗。

最近在使用react 写个人站点，发现项目一开始加载有很大一段白屏，觉得这样不是很好，需要优化一下，然后项目里面使用的是 antd 的 spin, 所以首页就使用 html + css 来实现一个效果分析主要分为以下几个部分：1.loading 需要居中居中的方法有很多，父相子绝, 弹性盒模型 等。antd 官方是这么实现的： position: absolute; left: 50%; top: 50%; bottom: 0; r.

最近博客写道项目列表中，发现这里比较多图片，一开加载会比较慢，然后就想要用一个loading的图片来占位。与此同时,如果图片加载失败那么显示错误的图片，不显示一个原有的错误，那样比较难看。效果原理解析这个就是一个组件，一个图片展示的组件，直接更改img标签的url地址就好，对的，是这样的，在vue中直接更改地址，vue会有响应式的更新数据。图片的事件图片是有许多的事件的，例如，onload, onerror等,图片只要一加载就会调用onload的事件，不管是加载成功还是加载失败都会调用这.

最近在使用vite+react + ant-design 来搭建个人站点，看到网上好多网站都实现了黑白皮肤的切换，并且ant-design帮我们实现了三套主题色，一个默认亮白色，暗黑主题和紧凑主题。于是我也想来弄一弄。最后还是实现了，打包后也是ok的。效果思路对于网站需要切换主题的话，一般有以下几种办法。使用css覆盖的方式，由于css基于后面的css覆盖前面的原理，所以这一点也是可以的。但是这一点对于使用less和scss的码友来说，貌似不是一个很好的方法由于less里面带有一个les.

最近想用react做一个个人博客，看到网上好多博客都用了粒子效果，心想，我也要搞一个。react的话，使用"react-particles-js": "^3.4.1", 使用这个包。效果我的配置"particles": { "number": { "value": 40, "density": { "enable": true, "value_area".

本人在写reducer中的action类的时候发现一些问题。为啥我的类型检查没有，过不了。后面实现了改功能，特在此记一笔。好记性不如烂笔头。效果我们就是要实现一个类似上图的效果，在每一个type中，action的类型是不一样。实现方式看下面的成功案例成功案例实现的业务场景，我想实现一个用户管理的功能，可以新增用户，删除，修改用户等。每一个功能都是独立的并且所需要的参数是不一样的，所以做了以下类型检查。公共类型// common.ts // 公共类型// 枚举每一个type类型。.

错误原因分析原因： 在dispatch的时候，dispatch的默认类型是必须包含一个 type属性的plian object 如下图：所以代码是对的，但是类型就是不匹配。解决办法：方法一既然 typescript 给我带来的麻烦，那我就不使用类型检查，一切any就行了效果方法二：我们使用ts的目的就是未来获取类型检查的，我怎么可能把 typescript 变成 anyscript？redux-thunk 默认给我们导出了两个类型ThunkAction:

在redux中，我们如果想要对redux进行dispatch拓展,那么就需要使用中间件。中间件：类似于插件，可以在不影响原本功能、并且不改动原本代码的基础上，对其功能进行增强。在Redux中，中间件主要用于增强dispatch函数。实现Redux中间件的基本原理，是更改仓库中的dispatch函数。Redux中间件书写：中间件本身是一个函数，该函数接收一个store参数，表示创建的仓库，该仓库并非一个完整的仓库对象，仅包含getState，dispatch。该函数运行的时间，是在仓库.

使用vue的同学都知道，vue的路由是静态的。什么叫做静态的呢？那就是可以通过一个配置文件来进行路由的配置，而我们的react的路由是动态的。为啥这么说呢？react路由具有先天的优势——jsx . 每一个页面都是组件，每一个组件可以随意的嵌套。所以react的路由是动态加载的。那么我们是否也可以向vue一样，使用一个静态文件来自动配置呢？答案是：肯定可以的。使用 npm install react-router-config 安装这个包，就可以使用静态路由了。详情配置文件查看官网我们可以自己手动来.

React-Router（5.2.0）效果router类型组件BrowerRouter使用HTML5的historyApi(pushState,replaceState,监听popstate事件)来保存页面和路由同步属性basename:string, 路由的起点path,以 ‘/’开头，但是不能以‘/’结尾getUserConfirmation: func, 用来确认是否进行路由切换，需要和 组件一起使用才会生效forceRefresh: bool， 是

原文地址： https://reactcommunity.org/react-transition-group/transition-group<TransitionGroup>组件管理列表中的一组过渡组件（<Transition>和<CSSTransition>）。像<Transition>组件一样，<TransitionGroup>组件是一个状态容器，用于在时间范围内组件的挂载与卸载。The component manages a .

原文地址 https://reactcommunity.org/react-transition-group/switch-transitionSwitchTransition组件灵感来自于vue transition的模式。可以使用SwitchTransition来控制状态之间的渲染。基于选择的模式和子组件的 key 来使 Transition组件，CSSTransition组件和SwitchTransition组件之间进行对应的过渡。A transition component inspir.

react-transition-group 翻译系列react-transition-group 之 TransitionCSSTransition组件的灵感来源ng-animate（详情） 库,如果你正在使用CSS来实现过渡或者动画可以使用该组件。CSSTransition组件是基于 Transition组件来封装的，因此，该组件继承了Transition（详情)组件的所有属性。A transition component inspired by the excellent ng-anima

目前本人学习到 react 动画组件库，react-transition-group 有一颗感兴趣的心，也想学学大神，翻译一下文档，所以就拿这个开刀，动手。 原文通道Transition 过渡Transition 组件允许你使用一个简单的申明API去描述一个组件在一段时间内从一个状态过渡到另一个组件。最常见的是，它用于设置组件的挂载和卸载的过渡，但也可以用于描述组件状态本身的过渡The Transition component lets you describe a transition fr.

在前文，介绍了 副作用 hook useEffect, 那么 useLayoutEffect 与 useEffect 的区别联系是啥呢？相同点useLayoutEffect 其函数签名与 useEffect相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染不同点调用的时间不同：useEffect：浏览器渲染完成后，用户看到新的渲染结果之后触发，异步执行，不会造成浏览器 阻塞useLayoutEffectHook：完成了.

这个hook比较简单，作用: 获取函数组件里面的事件,我们通过 ref 来获取类组件的事件，所以 这个 useImperativeHandle Hook 一般是于 ref 转发一起使用。语法useImperativeHandle(ref, createHandle, [deps])参数一 ref: 子组件中 ref转发传过来的 ref参数二 createHandle: 子组件需要对外的事件，通过一个函数返回对象定义参数三deps: 依赖，如果依赖变化，则会重新调用案例获取类组件.

看到 ref 大家不管是在vue 中 还是在react 中都比较熟悉， vue3 的ref 有两个，vue2 有一个，但是ref 的作用都有一个公共的作用，那就是获取真实的dom。在react 的类组件中，我们可以在类中定义属性 ref 详情, 但是在函数组件是不能直接使用 ref, 如果需要使用 ref 那么就只能是 ref 转发, 说实话这个函数组件的 ref 转发 是有点绕， 而且还会增加组件的层级。个人感觉不怎么友好。语法const refContainer = useRef(init..

memo hooks 这个钩子也是用来做优化性能操作的，大家一定还记得 React.memo() 这个是啥呢，是要给高阶组件，用来给函数组件做性能优化的，作用类似 类组件 的 pureComponent,那么 memo hooks 和 React.memo() 有没有联系呢? 没有，虽然都是为函数组件做性能优化的，但是优化的方向是不一样的(纯组件优化方向详情)。语法const list = useMemo(() => fn(a, b), [a, b])参数一fn: 任何稳定的复杂数据，.

callback 相信大家都不陌生——回调函数 ，但是 callback hooks 的作用是啥呢？用于得到一个固定引用值的函数，通常用它进行性能优化语法const func = useCallback(fn, deps)参数 fn: 一个函数，需要保存的函数引用参数 deps： 一个数组，保存函数里面的依赖，如果依赖变化，那么函数的引用地址就会发生变化，否则不执行，这个的用法有点和 effect hooks 类似案例有这么一个场景，我们在一个函数组件中，引用了一个类组件（纯组件.

react context 上下文，相信大家都会使用。不会的可查看。详情的概念这里不介绍，只接受在函数组件中，使用context hooks 的使用语法const value = useContext(MyContext);接收一个参数，是一个上下文对象，需要使用 react.createContext这个对象返回的结果是consumer的结果useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用.

含义从标题上看，自定义hook的主要是自己定义，那么对于hooks的定义又是啥呢？ 简单点的回答，hooks是一个函数，并且是在react 函数组件中使用的，不同的hook的作用也是不一样的，例如，state hook是用来定义函数组件的状态， 而effect hook 是用来定义组件的副作用,那么自定义hook是用来干啥的呢？,自定来定义一个hook 函数，里面可以包含 多个hooks。简单点的说是，把相同逻辑的hooks封装在同一个函数里。规则hooks 的使用方式都是 use 开头，那么我们自

Effect HookEffect Hook：用于在函数组件中处理副作用,类似我们类组件中的生命周期函数的，ComponentDidMount（组件刚刚挂载需要进行数据请求等副作用）,ComponentDIdUpdate（组件数据已经更新并且页面已经完成挂载的对dom操作的副作用），ComponentwillUnMount(组件即将卸载销毁清楚定时器等副作用)，类组件生命周期详情语法// 第一个请求参数是一个回调函数，用于操作副作用的，// 第二个参数是一个数组，用于标记回调函数里面的依赖关系，

State Hook大家都知道，在react的类组件中是可以使用状态的——state,那么在函数组件中怎么使用状态呢？在react16.8的之后中提出了hook这个概念。State Hook是一个在函数组件中使用的函数（useState），用于在函数组件中使用状态。并且使用起来会让人感觉神清气爽。语法const [a, setA] = useState('参数')useState函数有一个参数，这个参数的值表示状态的默认值。用法和vue3的ref('')一样,可以传递任何数据。但是vue3会

含义hook 是啥，中文翻译叫做 钩子, 用来增强函数组件的功能，因为函数组件是在react16.8以前是没有状态的，但是函数组件又比较纯粹和简单（使用上）,所以react 应社区和自身考虑，设计了hook来增强函数组件。但是在未来官方好像要让hook 和 class 共存。 相反，我们开始在新的代码中同时使用 Hook 和 class。...

工具这里所说的工具是指我们在书写react代码中，来帮我们检查代码是否规范，并且符合标准的工具严格模式StrictMode(React.StrictMode)，本质是一个组件，该组件不进行UI渲染，它的作用是，在渲染内部组件时，发现不合适的代码。识别不安全的生命周期关于使用过时字符串 ref API 的警告关于使用废弃的 findDOMNode 方法的警告检测意外的副作用React要求，副作用代码仅出现在以下生命周期函数中ComponentDidMountComponentD

更新节点更新的场景：重新调用ReactDOM.render，触发根节点更新在类组件的实例对象中调用setState，会导致该实例所在的节点更新节点的更新如果调用的是ReactDOM.render，进入根节点的对比（diff）更新如果调用的是setState运行生命周期函数，static getDerivedStateFromProps运行shouldComponentUpdate，如果该函数返回false，终止当前流程运行render，得到一个新的节点，进入该新的节点的对比更新

渲染原理渲染：生成用于显示的对象，以及将这些对象形成真实的DOM对象React元素：React Element，通过React.createElement创建（语法糖：JSX）例如：<div><h1>标题</h1></div><App />React节点：专门用于渲染到UI界面的对象，React会通过React元素，创建React节点，ReactDOM一定是通过React节点来进行渲染的节点类型：React DOM节点

在前文中，我们初步了解了react 的事件的使用方式，并且只是了解到react 的语法和原生的语法很相似。但是真正的事件原理，其实是大不相同的。React中的事件这里的事件：React内置的DOM组件中的事件1. 给document注册事件2. 几乎所有的元素的事件处理，均在document的事件中处理一些不冒泡的事件，是直接在元素上监听一些document上面没有的事件，直接在元素上监听3. 在document的事件处理，React会根据虚拟DOM树的完成事件函数的调用4. R.

含义错误边界： 用来捕捉错误的代码，说到捕捉错误。大家可能都会说 直接try catch 不就行了。对的，try catch 确实是一种在各个语言比较通用的方法。但是在react 组件中，如果某一个组件发生错误，他是会往他的父级组件抛出错误的，然后自己是会被卸载的。如果到跟组件都不能够处理错误，这个组件树就会被卸载，组件树卸载导致的页面效果就是直接的报错。默认情况下，若一个组件在渲染期间（render）发生错误，会导致整个组件树全部被卸载错误边界：是一个组件，该组件会捕获到渲染期间（render）

含义Portals 翻译为门户，但是感觉不对。作用类似插槽，但是不是vue 里面的插槽哦，有点像vue3 里面的 teleport,两者的作用都是将对于的虚拟dom 插入到真实dom的某个位置上。这里不讲两者的区别，只讲 Portals 的用法语法ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。用法im

含义render props 术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术简单点说，就是用来关注功能一样，ui界面不一样 横向关注点。 这个其实不是一个新的知识，是在js 灵活继承上进行拓展的。举个例子官网举得那个例子蛮不错的，有兴趣的可以看一下我举一个这样的场景，在编辑用户，我们需要一个用户数据的表单，然后在个人中心的时候，我们也需要一个用户的表单，但是这两个界面长的是布局啥的都不一样，无法达到界面复用。功能都是

阅读下面的代码，请回答 render 总共执行了多少次？这个问题涉及到react的生命周期。代码如下import React, { Component, PureComponent } from 'react'/** * 组件有两个状态，一个是li,另一个是添加li */interface ITestPureComponentS { lis: number[], addLi: (li: number) => void}// 测试li 组件class TestLi ex.

含义上下文（context）: 是指一个组件里面包含所有子组件组成dom 的树，那么在这颗虚拟dom树中的环境，就称之为上下文。说到树这个概念，稍微提一笔，在树中，每一个节点我们都可以理解他是一颗树的根节点（起始节点）。react中的上下文的特点：当某个组件创建了上下文后，上下文中的数据，会被所有后代组件共享,如概念所说，子组件与父组件中都可以使用上下文的数据。如果某个组件依赖了上下文，会导致该组件不再纯粹（外部数据仅来源于属性props）,毕竟组件的数据都是都是一层一层往下传的，如果突然组件

ref 的基本使用方法我们在上一篇博客中讲了，但是在上一篇中还遗留了一个问题，就是函数组件，如果我想使用ref,这个怎么操作？在问一个问题，我们在函数组件中通过ref想获取啥？—— dom、react 对象？带着这些问题来阅读下面的文章refs 在函数组件的作用我们知道，函数组件是没有状态的。因此，我们想想获取函数组件，不能是在类组件中那么使用，那么，如果我们想获取函数组件内部的dom 或者react 元素呢？ 此时，我们就需要使用ref转发了.使用方法ref转发 最关键的是在于转发， 必须需.

含义以及使用方法ref （reference）是引用，在 vue 中是用于或者真实的dom, 那么在react 中，ref 的作用是啥呢？场景：希望直接使用dom元素中的某个方法，或者希望直接使用自定义组件中的某个方法ref作用于内置的html组件ref作用于内置的html组件，得到的将是真实的dom对象使用string 方式import React, { Component } from 'react'export default class TestRef extends Com

含义高阶组件就是一个函数，且该函数接收一个组件作为参数，并返回一个新的组件。定义就是这么说的，但是看完的肯定是似懂非懂。继续往下走HOF （高阶函数）在了解高阶组件的时候，我们先来会议一下高阶函数，HOF(Higher-Order Function),这个的定义分为广义和侠义：广义： 函数要是传入的参数中或者返回的结果都包含 函数 的函数;侠义： 函数的传入参数和返回结果都要包含函数的函数具体的应用： 函数的柯里化，回调,防抖,节流等举个例子：下面有两个函数，一个是看电视，另

在vue 中，给组件传值是可以默认属性值的类型或者自定义类型的。这样方便组件使用者不容易犯错，规定组件的使用方式，那么在react 组件中，我们怎么来对属性进行类型检查呢？通过上面官网的一段话，我们可以知道组件类型检查有两种方式：一个是使用静态类型检查系统，如 flow， typescripts 等另一种是在运行阶段使用 PropTypes静态类型检查我们从名字上就可以知道，静态类型是发生在代码的编写阶段，不发生在代码的运行阶段。所以我们在使用的过程中，就可以及时的提示我们代码是否.

默认值我们在编写组件的时候，其实好多时候，我们都想组件的参数是可选参数，如果没有这个参数，我们就默认给上一个参数，在vue 中我们可以在模板中的props中定义属性名，然后default就有默认值了。但是在react 中我们如何来实现这个呢？react 组件类型有两种，然后给默认值也是有两种方法的方法一：利用js的天生优势——混合类组件使用案列如下：上面我的使用方式是在render里面的，这个也可以是constructor里面来进行属性的赋值，具体的使用方式，根据实际情况而定，只要满足在

表单大家都很清楚，input 框，select， radio 等， 在 vue 中的表单数绑定使用的是 v-model, v-model 是啥，一个语法糖，用于双向数据绑定而已，在react 中是没有这样的语法糖的，需要自己来手动实现受控组件和非受控组件受控组件：组件的使用者，有能力完全控制该组件的行为和内容。通常情况下，受控组件往往没有自身的状态，其内容完全收到属性的控制。非受控组件：组件的使用者，没有能力控制该组件的行为和内容，组件的行为和内容完全自行控制。在react 表单组件中，默认情.

Mon 06Mon 13已完成 进行中 计划中 现有任务Adding GANTT diagram functionality to mermaid