- 博客(55)
- 收藏
- 关注
RSS订阅原创 react-transition-group 在 React 18 及以上版本中的兼容性问题
在React19中下载react-transition-group（4.4.5），正常导入使用：出现下述报错：React18开始，已废弃findDOMNode ，而 react-transition-group 的 4.4.5 版本仍然使用了 findDOMNode来获取DOM节点，以便在动画中直接使用这些节点，从而导致报错那么早期react-transition-group是如何使用findDOMNod的那？1.获取DOM获取 DOM 节点以应用动画：2.处理动画的生命周期：为什么被废弃？1.React
2025-05-06 22:05:27
278
原创 BFC详解
给box1的父盒子设置一个overflow: auto;box1在container的BFC里面，box2还在html的BFC里面→两两互不影响。行内级元素的布局属于Inline Formatting Context (FC的全称为Formatting Conttext,元素在标准流里面。块级元素的布局属于Block Formatting Context(如果有浮动元素，那么增加高度以包括这些浮动元素的下边缘。(2)BFC高度是auto的情况下，如何计算高度？左边缘是紧挨着包含块的左边缘。
2025-04-17 21:53:22
327
原创 (六）堆结构
如上述，我们是将最大堆和最小堆分开封装的，那有什么方法可以将最大堆、最小堆封装到一个文件逻辑中吗？3.3停止条件：如果largerIndex的元素大于index的元素，之间break。是指建立堆的过程中，不使用额外的内存空间，直接在原有数组上进行操作。在最大堆（Max-Heap）中，根节点始终是整个堆中最大的元素；2.封装一个逻辑，当为最大堆时，让它是>=;当为最小堆时，为<=1.创建实例时，传入的第二个参数决定它是最大堆还是最小堆。在最小堆（Min-Heap）中，根节点始终是最小的元素。
2025-04-14 17:15:00
1392
原创 （三）哈希表
哈希表通常是基于数组实现，但相对于数组有很多优势可快速进行插入、删除、查找操作无论数据量多少，插入和删除值都解决常量实际：即O(1)其速度比树还快，可瞬间查找到想要的元素哈希表中的数据无顺序哈希表中的key不能重复（哈希表中的数据以键值对存在）哈希表是什么？哈希表并不好理解，不像数组、链表和树等可通过图形的形式表示其结构和原理。哈希表的结构就是数组，但它神奇之处在于对下标值的一种变换，这种变换我们可以称之为哈希函数，通过哈希函数可以获取HashCode。相关概念。
2025-04-09 20:13:17
590
原创 （一）栈结构、队列结构
是一种受限的线性结构，先进后出仅允许在表的一端进行插入和删除运算，即栈顶；另一端为栈底。必须按照顺序来进出栈习题练习题目有六个元素6,5,4,3,2,1的顺序进栈，问下列哪一个不是合法的出栈序列？C答案解析：A：65进栈，5出栈，4进栈出栈，3进栈出栈，6出栈，21进栈，1出栈，2出栈B：654进栈，4出栈，5出栈，3进栈出栈，2进栈出栈，1进栈出栈，6出栈D：65432进栈，2出栈，3出栈，4出栈，1进栈出栈，5出栈，6出栈。
2025-04-07 21:09:20
837
原创 React(八）React-Router
需求：在Home组件中再嵌套两个子组件HomeRecommend和HomeRanking。1.封装一个高阶组件，给类组件注入这个hook，然后通过props就能调用并传参。Link渲染出来的是a标签，如果我们想要其它的标签，那就只能自己来操作了。将App.js中配置的路由单独抽取到router/index.js文件中。并包裹根组件，当匹配的组件还未加载成功时，可显示fallback中的内容。可单独打包，匹配到该路径才会下载对应的文件——性能优化。:当前路由选中时，会自动添加一个active的类。
2025-03-30 09:15:00
446
原创 React(七）：Redux
它封装了Redux的核心API，并提供了一些额外工具和约定，帮助我们更高效编写Redux代码configureStore:它自动配置了 Redux 的和，并预装了一些常用的中间件（如和createSlice:接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有相应的actionscreateAsyncThunk:接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk。
2025-03-29 12:06:42
940
原创 React(六）React过渡动画-CSS编写方式
在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，提高用户体验→可通过实现。React曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 react-transitiongroup。该组件帮助我们实现组件的入场和离场动画。安装方式：# npm# yarn。
2025-03-26 16:24:52
865
原创 React(五）非受控组件-高阶组件-Fragment-protals
高阶组件的英文是 Higher-Order Components，简称为 HOC官方定义：高阶组件是参数为组件，返回值为新组件的函数；本质：高阶组件的本质就是对传入的组件做了一个拦截，然后在拦截过程中对想要具备的功能进行一些别的操作；若想要拦截，只需要通过高阶组件进行一个包裹即可// 定义一个高阶组件// 1.定义类组件render() {return (render() {return (<div></div>
2025-03-25 09:45:00
988
原创 React(四）setState原理-性能优化-ref
注意：在React18之前，如果在setState外边包个setTimeout这种宏任务，它不由React回调，而是浏览器。因为修改State之后，希望React根据最新的State来重新渲染界面，但这种方式的修改React并不知道数据发生了变化；React并没有类似于Vue2中的Object.defineProperty或Vue3中的Proxy的方式来监听数据的变化；原理：将回调函数传递给元素的 ref 属性，React 在挂载/卸载时调用该回调，参数为 DOM 元素。方式一：setState的回调。
2025-03-24 15:10:28
970
原创 React(三）：脚手架解析、组件分类、生命周期、组件通信
(1)Constructor（）：不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。2.状态管理：通过this.state初始化状态，使用this.setState()更新，支持复杂状态逻辑。使用ES6的class语法，继承React.Component，包含render()方法和生命周期方法。通过普通函数定义，早期只能渲染UI（无内部状态state），Hooks出现后支持完整功能。3.无生命周期，可通过useEffect模拟生命周期，如组件挂载、更新、卸载等。
2025-03-18 23:06:48
670
原创 React（二）：JSX语法解析+综合案例
实际上，jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖→所有的jsx最终都会被转换成React.createElement的函数调用。假设有一个btnClick函数，但它并不是我们主动调用的，而是当button发生改变时，React内部调用→内部调用时，并不知道要如何绑定正确的this。2.获取更多参数：可通过传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数。1.获取默认参数：即event对象。
2025-03-17 00:09:20
429
原创 react(一）：特点-基本使用-JSX语法
React是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。React18之后：使用 ReactDOM.createRoot() 方法来渲染组件。React18之前：使用 ReactDOM.render() 方法来渲染组件。2.react-dom：react渲染在不同平台所需要的核心代码。注意：React18前后，渲染组件的书写方式较为不同。3.babel：将jsx转换成React代码的工具。1.react：包含react所必须的核心代码。2.下载后，添加本地依赖。
2025-03-14 23:01:18
509
原创 Proxy详解
Proxy无需一层层递归为每个属性添加代理，一次即可完成以下操作，性能上更好，并且原本的实现有一些数据不能监听到，但是Proxy可以完美监听到任何方式的数据改变。1.其设计初衷并不是为了去监听一个对象，它一次只能监听对象里的一个属性→若想监听所有，就得遍历对象key。是ES6中引入的新特性，因此它在一些旧的浏览器或者环境中可能不被支持。2.目前只能用它监听属性的设置和获取，不能监听增加和删除。，就是为了我们监听一个对象而生的。可监听我们想要原对象进行哪些操作。在ES6中，新增了一个。
2024-11-29 16:11:40
475
原创 闭包详解。
原因：fun是全局变量（未关闭不回收），而fun的内容是outer函数的返回值fn函数，而fn引用了外部函数count的变量count,从而造成了count,一直在内存中，不会被释放。count作为全局变量容易被修改→将它改成闭包形式→使count,私有→外部无法直接修改。：因为函数内部的变量只能自己访问，我们使用闭包就是为了。：闭包就是里层函数+外层函数变量，它们一起构成了闭包。：统计函数的调用次数（实现数据私有）在外部访问函数内部的变量。造成问题：内存泄露。
2024-11-28 22:39:21
240
原创 关于数组去重
2.使用 filter 方法。3.使用 reduce 方法。4.使用 Object 属性。利用对象的键值唯一性来去重。1.使用 Set 结构。
2024-11-26 22:17:19
127
原创 Object.defineProperty()总结
writable:布尔值，表示属性值是否可以被写入；如果为true,则属性值可通过赋值修改。enumerable:布尔值，表示属性是否可以被枚举（例如，使用。configurable： 布尔值，属性符是否可以被删除。方法用于在对象上定义或修改一个属性。value:设置属性的值。
2024-10-10 13:19:50
328
原创 Object.hasOwnProperty() 详解
Object.hasOwnProperty() 用来检查对象上是否直接含有指定的属性，而不是通过原型链继承得到的；通常用于区分对象自身的属性和从原型链上继承的属性。: 在遍历对象属性时，添加额外的检查来确保只处理对象自身的属性。用于区分对象自身的属性和从原型链继承的属性。被修改，所有对象都会继承这个新属性。区分自身属性与继承属性。
2024-10-09 23:19:34
455
原创 webpack学习
Webpack 是一个,从入口构建依赖图，打包有关模块1.静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件2.打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包3.作用：把静态模块内容，压缩，整合，转译等（前端工程化）4.体验Webpack 打包 2 个 JS 文件内容。
2024-10-08 22:47:55
1541
原创 GIT学习总结
需求1：基于 master 新建 publish 分支，完成发布文章业务，然后修改content文件夹的 html 文件的 title 标签，并提交一次。将log-bug合并完之后，HEAD指向C10，原分支已经产生了一次新的提交记录，故又有一个小分支要合并回去时，就需要再产生一个新（C11)的提交。需求2：切换到 master，也在修改content文件夹的 html 文件的 title 标签，并提交一次。注意2：回退后，继续修改->暂存->提交操作即可（产生新的提交记录过程）
2024-10-07 23:25:05
1275
原创 es6语法
es6语法let和const命令letlet声明的变量，只在let命令所在的代码块内有效{ let a = 10; var b = 20;}console.log(a); //a is not definedconsole.log(b); //202.不存在遍历提升现象var命令会发生变量提升现象，即变量可以在声明之前使用，值为undefinedlet声明的变量一定要在声明后使用，否则会报错//var的情况console.log(c);//输出undefine
2024-10-02 20:09:38
1459
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人