- 博客(186)
- 收藏
- 关注
RSS订阅原创 Vue响应式系统分支切换与cleanup | 清除遗留的副作用函数
本篇文章代码思路来自 Vue3.0 源码, 部分理解来源于霍春阳 《Vue.js设计与实现》这本书的理解, 感兴趣的小伙伴可以自行购买阅读。可以非常明确的感受到作者对 Vue 的深刻理解以及用心, 富含非常全面的 Vue 的知识点, 强烈推荐给大家。接上文Vue响应式原理和本质 - 实现一个完善的响应式系统。
2024-06-06 22:02:45
753
原创 Vue响应式系统分支切换与cleanup - 清除遗留的副作用函数
本篇文章代码思路来自 Vue3.0 源码, 部分理解来源于霍春阳 《Vue.js设计与实现》这本书的理解, 感兴趣的小伙伴可以自行购买阅读。可以非常明确的感受到作者对 Vue 的深刻理解以及用心, 富含非常全面的 Vue 的知识点, 强烈推荐给大家。
2024-06-06 22:01:43
958
原创 分析webpack编译结果, 实现__webpack_require__函数
这样我们就是实现了Webpack合并多个模块, 但是当我们读取某一模块的时候, 我们应将它的导出结果缓存起来, 当下一次再导入该模块时, 就不需要再执行这个模块的代码, 直接从缓存中读取导出结果即可, 所以我们需要实现缓存完善上面代码。中的模块函数是使用eval执行的, 这是并且会加上一个注释, 其实这是为了开发者能够在浏览器控制台调试, 由于我们运行的是打包后的代码, 那么报错指向的错误地址就会指向打包后的代码, 是不利于我们调式的;中的key)作为参数, 并运行一个模块, 得到该模块的导出结果。
2024-06-04 23:25:11
358
原创 React中传入props.children后, 为什么会导致组件的重新渲染？
在 react 中, 我想要对组件的渲染进行优化, 遇到了一个非常意思的问题, 当我向一个组件中传入了 props.children 之后, 每次父组件重新渲染都会导致这个组件的重新渲染;它看起来的表现就像是被memo包裹的组件, props和自身状态未发生变化, 组件却重新渲染了;
2023-12-08 11:23:05
1531
原创 Vue响应式原理和本质 - 实现一个完善的响应式系统
本篇文章代码思路来自Vue3.0源码, 部分理解来源于霍春阳 《Vue.js设计与实现》这本书的理解, 感兴趣的小伙伴可以自行购买阅读。可以非常明确的感受到作者对 Vue 的深刻理解以及用心, 富含非常全面的 Vue 的知识点, 强烈推荐给大家。
2023-10-30 20:20:32
488
1
原创 Mac安装多个版本Node.js
前言 开发旧项目时，使用低版本Node.js。开发新项目时，需使用高版本Node.js。//打开已安装的Node.js列表，并使用上、下箭头切换版本，然后回车确认。可使用n同时安装多个版本Node.js，并切换到指定版本Node.js。默认使用国外镜像（nodejs.org/dist/），导致下载…4 查看已安装Node.js版本列表。7 查看切换后的Node.js版本。Mac安装多个版本Node.js。3 安装指定版本Node.js。加-E才能拿到临时环境变量。6 切换Node.js版本。
2023-10-24 10:45:10
742
1
原创 Vue虚拟DOM理解-深入且易懂
先抛出一个结论, 这个结论对本篇文章的理解很有帮助: Vue是一个保留了运行时+编译时架构的框架, 编译时, 用户可以提供 HTML 字符串, 我们将其编译为数据对象再交给运行时处理;运行时根据提供的
2023-10-13 16:33:52
346
10
原创 搞懂什么是跨域?公司在开发中跨域的解决方案是什么?
要想理解跨域，要先理解浏览器的同源策略:同源策略是浏览器中的一个重要的安全策略，它用于限制一个源(origin)的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。如果两个 URL的协议、主机、端口都相同的话，则这两个 URL 就是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是“元组”。在早期的服务器端渲染的阶段，是没有跨域的问题的;
2023-07-29 14:00:13
446
1
原创 解决Umi初始化项目引入Antd组件报错“xxx“不能用作 JSX 组件
因为你的其他库依赖了@types/react或者@types/react-dom，比如项目安装了react-router这个库, 而这个库又安装了18版本的@types/react，导致多个ts校验不通过。: 尝试在package.json里面添加以下配置：版本改为你指定的版本就好。: 在使用umi初始化项目后, 所有从antd引入的组件全部报。
2023-07-16 21:46:18
3245
原创 Java中常见的算法 - 冒泡排序 - 选择排序 - 二分查找
二分查找, 顾名思义从中间位置开始查找, 比较要查找的数是大于还是小于中间位置的数, 再从满足条件的区间中继续进行二分查找。控制每轮交换的次数: 控制每轮从以前位置为基准，与后面元素选择几次。二分查询性能好，但是二分查找有一个前提是: 必须是排好序的数据。: 在数据量特别大的时候，基本查找从前往后寻找的性能是很差的。判断当前要找的元素如果大于中间元素，左边位置=中间索引+1。判断当前要找的元素如果小于中间元素，右边位置=中间索引-1。判断当前要找的元素如果等于中间元素，返回当前中间元素索引。
2022-11-18 00:00:00
13021
18
原创 Java API - Object类的常用API
什么是API?API(Application Programming interface) 应用程序编程接口。简单来说：就是Java帮我们已经写好的一些方法**，我们直接拿过来用就可以了。**
2022-11-07 00:00:00
14363
103
原创 Java内部类介绍 - 静态内部类和成员内部类
内部类就是定义在一个类里面的类，里面的类可以理解成（寄生），外部类可以理解成（宿主）。// 外部的People类可以理解成宿主 public class People {// 内部的Student类可以理解成寄生 class Student {} }内部类的使用场景、作用当一个事物的内部，还有一个部分需要一个完整的结构进行描述，而这个内部的完整的结构又只为外部事物提供服务，那么整个内部的完整结构可以选择使用内部类来设计。内部类通常可以方便访问外部类的成员，包括私有的成员。
2022-11-04 00:00:00
13052
101
原创 React框架创建项目详细流程-项目的基本配置-项目的代码规范
文件夹、文件名称统一小写、多个单词以连接符(-)连接, 组件采用大驼峰;JavaScript变量名称采用小驼峰标识，常量全部使用大写字母;CSS采用普通CSS和styled-component结合来编写(全局采用普通CSS或Less、局部采用styled-component);整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks;所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹;组件内部的状态，使用useState、业务数据全部放在redux中管理;
2022-11-02 00:00:00
12611
105
原创 React - Redux Hooks的使用细节详解
在之前的redux开发中，为了让组件和redux结合起来，我们使用了react-redux库中的connect:但是这种方式必须使用高阶函数结合返回的高阶组件;并且必须编写:mapStateToProps和 mapDispatchToProps映射的函数, 具体使用方式在前面文章有讲解;在Redux7.1开始，提供了Hook的方式，在函数组件中再也不需要编写connect以及对应的映射函数了的作用是将state映射到组件中:参数一: 要求传入一个回调函数, 会将state传递到该回调函数中;
2022-10-31 00:00:00
15389
106
原创 React Hook - 自定义Hook的基本使用和案例练习
自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性。例如有这样一个需求: 所有的组件在创建和销毁时都进行打印组件被创建: 打印组件被创建了;组件被销毁: 打印组件被销毁了;如果每个组件我们都单独编写是非常繁琐的, 并且有许多重复代码;我们可以将实现这样逻辑相同的代码抽离为一个自定义的Hookimport {useEffect } from 'react' // 自定义Hook function useLogLife() {
2022-10-30 00:00:00
13113
107
原创 React Hooks - useRef和useImperativeHandle的使用方式
通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起;所以在父组件中，使用 inputRef.current时，实际上使用的是参数二返回的对象;但是，事实上在上面的案例中，我们只是希望父组件可以操作的focus，其他并不希望它随意操作。那么我们就可以在子组件的内部, 在重新定义一个ref对象, 再将想要暴露的操作暴露出去即可。子组件拿到父组件中创建的ref，绑定到自己的某一个元素中;等等, 我们希望可以限制它的操作;
2022-10-28 00:00:00
12079
100
原创 React Hooks - 使用useCallback和useMemo进行性能优化
这是因为message发生改变, App组件会重新渲染, 那么就会重新定义一个新的increment函数, 将新的increment函数传递到Test组件, Test组件的props发生改变就会重新渲染。当向Test组件传递新的increment时, Test组件的props就会改变, Test依然会重新渲染, 这也是我们想要实现的效果。由于counter发生改变, 就会重新定义一个新的increment函数, 因此我们只要修改了counter, 就会传递一个新的increment函数到Test组件中;
2022-10-26 00:00:00
9094
105
原创 React Hooks - useContetx和useReducer的基本使用
更新时，该 Hook 会触发重新渲染，并使用最新的值传递给 MyContext provider 的 context value 值。允许我们通过Hook来直接获取某个Context的值, 相对于class组件中的使用方式会简单非常多;在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分;再在函数组件中通过useReducer函数将我们定义的reducer函数使用起来。或者这次修改的state需要依赖之前的state时，也可以使用;会导致代码阅读性非常差。
2022-10-24 13:09:19
16577
101
原创 React Hook - useEffecfa函数的使用细节详解
Effect Hook 可以让你来完成一些类似于class中生命周期的功能;事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用(Side Effects);所以对于完成这些功能的Hook被称之为 Effect Hook;
2022-10-23 00:00:00
14287
102
原创 React Hook - useState函数的详细解析
useState来自react，需要从react中导入，是一个hook函数, 官方中也将它成为State Hook, 它与class组件里面的 this.state 提供的功能完全相同;在下一次重新渲染时，就已经不是创建了, useState 会返回给我们当前所保存的state(一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。这也是 Hook 的名字总是以 use 开头的一个原因, 因为你总是在使用而不是创建。调用元素二: setCounter，设置一个新的值;
2022-10-21 00:00:00
13325
106
原创 React类组件和函数组件对比-Hooks的介绍及初体验
Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下, 使用state以及其他的React特性(比如生命周期)。我们先来思考一下class组件相对于函数式组件有什么优势?比较常见的是下面这些优势:class组件可以定义自己的state，用来保存组件自己内部的状态;PureComponent } from 'react' // 类组件 class HellWorld extends PureComponent {
2022-10-19 00:00:00
13675
107
原创 React中路由的参数传递 - 路由的配置文件
传递参数有二种方式(需要注意的是, 这两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组件的方式使用):方式一: 动态路由的概念指的是路由中的路径并不会固定:在跳转的页面中可以通过hook函数useParms获取到传入的id, 由于我们现在使用的是类组件, 无法使用hook函数, 因此需要通过高阶组件对当前组件增强(上一篇刚刚讲过高阶组件的封装, 这里直接使用, 给到大家代码)使用高阶组件增强当前Detail组件, 就可以通过useParams获取到传递的id
2022-10-17 00:00:00
14160
103
原创 React中的路由嵌套和手动实现路由跳转的方式
Link或者NavLink渲染出来是一个a元素, 如果我们想点击一个button或者其他元素实现页面跳转, 就需要通过JavaScript代码进行跳转了。这样我们引入自己封装的高阶组件, 通过高阶组件的增强, 就可以在类组件的props中获取到navigate。那么如果是一个函数式组件，我们可以直接调用它提供的hooks的写法，但是如果是一个类组件呢?我们知道Navigate组件是可以进行路由的跳转的，但是依然是组件的方式。点击不同的链接可以跳转到不同的地方，显示不同的内容;推荐列表和排行榜列表;
2022-10-16 00:00:00
15065
101
原创 React - Router的基本使用介绍
目前前端流行的三大框架, 都有自己的路由实现:Angular的ngRouterReact的ReactRouterVue的vue-routerReact Router在最近两年版本更新的较快，并且在最新的React Router6.x版本中发生了较大的变化。目前React Router6.x已经非常稳定，我们可以放心的使用;
2022-10-15 00:00:00
14961
140
原创 Redux工具包(二) - Redux Toolkit的异步操作(发送网络请求)
再在extraReducers中监听这个异步的action的状态, 当他处于fulfilled状态时, 获取到网络请求的数据, 并修改原来state中的数据。注意: 我们创建的一部action: fetchHomeMultidataAction返回的结果, 会被传到下面监听函数的actions参数中,这样我们获取到结果后, 通过dispatch修改store中的state, 无需再监听异步action的状态。参数二: 传入一个函数, 该函数可以执行异步操作, 甚至可以直接传入一个异步函数。
2022-10-14 00:00:00
14628
147
原创 Redux工具包(一) - Redux Toolkit的基本使用
Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。在前面我们学习Redux的时候应该已经发现，redux的编写逻辑过于的繁琐和麻烦。并且代码通常分拆在多个文件中(虽然也可以放到一个文件管理，但是代码量过多，不利于管理);Redux Toolkit包旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题;在很多地方为了称呼方便，也将之称为“RTK”;安装Redux ToolkitRedux Toolkit的核心API主要是如下几个。
2022-10-13 00:00:00
13782
170
原创 Redux中进行异步操作(网络请求)的方案
我们可以直接通过同步的操作来dispatch action，state就会被立即更新。但是真实开发中，redux中保存的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中。
2022-10-12 00:00:00
13040
177
原创 React中使用Redux (二) - 通过react-redux库连接React和Redux
store中的状态可能是非常多的, 而connect函数的参数的作用是, 要将store中的哪些数据或者方法映射过去, 我们就可以根据自己的需求, 决定映射过去哪些数据, 而不是直接将整个store映射过去(: 参数二也是接收一个参数fn2, 要求fn2也是返回一个对象, 对象中的属性同样会映射到props中去;但是实际上redux官方帮助我们提供了 react-redux 的库，这个库是帮助我们完成连接redux和react的辅助工具, 可以直接在项目中使用，并且实现的逻辑会更加的严谨和高效。
2022-10-11 00:00:00
10395
171
原创 React中使用Redux (一) - 在React中直接使用Redux
尽管这样说，redux依然是和React库结合的更好，因为他们是通过state函数来描述界面的状态，Redux可以发射状态的更新， 让他们作出相应;目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去。Profile组件:其中会展示当前的counter值，并且有一个-1和-5的按钮;Home组件:其中会展示当前的counter值，并且有一个+1和+5的按钮;在发生点击事件时，调用store的dispatch来派发对应的action;
2022-10-10 00:00:00
13591
175
原创 React编写CSS的方案-CSS In JS
事实上CSS-In-JS的模式就是一种将样式(CSS)也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态;但是在前面的学习中，我们就提到过，React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法。我们创建的是一个styled组件, 那么既然是一个组件, 我们就可以通过组件的props属性传递数据的。我们可以在一个单独的js文件中, 设置一系列统一的主题相关的变量, 例如主题颜色, 字体大小等等。所以，目前可以说CSS-In-JS是React编写CSS。
2022-10-09 00:00:00
13502
150
原创 React中编写CSS的常见方案
前面说过，整个前端已经是组件化的天下:而CSS的设计就不是为组件化而生的，所以在目前组件化的框架中都在寻找一种合适的编写CSS的解决方案。在组件化中选择合适的CSS解决方案应该符合以下条件:可以编写局部css: 组件内部的css具备自己的局部作用域，不会随意污染其他组件内的元素;可以编写动态的css: 可以获取当前组件的一些状态，根据状态的变化生成不同的css样式;支持所有的css特性: 伪类、动画、媒体查询等;编写起来简洁方便、最好符合一贯的css风格特点;等等…
2022-10-08 00:00:00
10025
152
原创 React中过渡动画的编写方式
在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。React曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 react-transition- group。这个库可以帮助我们方便的实现组件的入场和离场动画，使用时需要进行额外的安装:# npm# yarn。
2022-10-07 00:00:00
8925
166
原创 React组件化的额外知识补充
Fragment 允许你将子列表分组，而不会渲染到页面中, 类似于Vue中的template和小程序当中的block;在之前的React API中，可以通过findDOMNode来获取DOM，不过已经不推荐使用了，可以自行学习演练一下。这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用;这样传递给Modal组件的元素就会被单独渲染到modal节点上, 且该节点会显示在屏幕的正中央。它的作用是为其后代元素触发额外的检查和警告, 检查代码中潜在的风险;
2022-10-06 00:00:00
7273
159
原创 React的高阶组件详解
什么是高阶组件呢?在认识高阶组价之前, 我们先来回顾一下什么是高阶函数?相信很多同学都知道(听说过?)，也用过高阶函数高阶组件和高阶函数它们非常相似的接受一个或多个函数作为参数;返回一个新的函数;JavaScript中比较常见的filter、map、reduce都是高阶函数。那么什么是高阶组件呢?高阶组件的英文是 Higher-Order Components，简称为 HOC;官方的定义: 高阶组件是一个参数为组件，并且返回值为新组件的函数;首先， 高阶组件本身不是一个组件，而是一个函数;
2022-10-05 00:00:00
11862
161
原创 React的受控组件和非受控组件介绍
select标签的使用也非常简单，只是它不需要通过selected属性来控制哪一个被选中，它可以匹配state的value来选中。这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面;但是通常情况下会使用JavaScript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据;渲染表单的 React 组件还控制着用户输入过程中表单发生的操作;一个受控组件中，表单数据是由 React 组件来管理的。在React中，并没有禁止这个行为，它依然是有效的;
2022-10-04 00:00:00
13282
142
原创 React获取DOM和获取组件实例的方式
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;来绑定函数组件中的某个元素, forwardRef中接收两个参数, 参数一: props, 参数二: ref，后面我们也会学习 hooks 中如何使用ref;该函数会在DOM被挂载时进行回调，这个函数回调时会传入一个元素对象，我们可以自己保存;方式提前创建出来一个对象, 将创建出来的对象绑定到要获取的元素上;使用时，直接拿到之前保存的元素对象即可;
2022-10-03 00:00:00
15419
145
原创 React性能优化SCU | PureComponent | memo
并且当我点了一次修改文本按钮时, state中的message已经变成了"你好啊", 当我再次点击修改文本按钮时, state中的message依然是"你好啊", 并没有发生变化, 但是App组件的render函数依然会重新执行, 并且它的子组件Home和About中的render函数也会重新执行。使用memo对函数组件进行包裹, memo调用会返回一个新的组件, 返回这个组件后, 函数组件也会和累组件的PureComponent是一样的效果。事实上，很多的组件没有必须要重新render;
2022-10-02 00:00:00
809
142
原创 React中的setState使用细节和原理解析
例如一个数据message有被展示到页面中, 并且传入到子组件中展示, 此时通过setState修改message, 如果是同步的修改完成后, message的值就被改变了;并且修改完成的后续代码有报错的情况, 在这个时候再进行调试的时候, 会出现页面中message的值被修改掉, 而传入到子组件的message并没有修改的情况, 导致于state和props中的数据不一致。而React中的做法也是如此, 在一个时间段中, 会获取多个更新, 再将多个更新放入一个任务队列中, 再对任务队列进行批处理;
2022-10-01 00:00:00
13727
141
原创 React组件通信-非父子组件间的通信
如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值；如果我们在顶层的App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言；这里，React 组件也可以订阅到 context 变更。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props；
2022-09-30 00:00:00
7884
132
原创 Redux的基本使用过程详解
例如上面代码中, 我们封装的动态创建action的函数, 这种动态生成action的函数在项目中可能会有很多个, 而且在其他多个文件中也可能会使用, 所以我们最好是有一个单独的文件夹存放这些动态获取action的函数。例如上面代码中, 我们修改名称多次, 只有传入的action的name属性值不相同, 那么我们可以封装一个函数, 动态的生成action, 这也是开发中一贯的做法。随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分;
2022-09-29 00:00:00
15397
102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人