- 博客(47)
- 收藏
- 关注
RSS订阅原创 React(八）React-Router
需求：在Home组件中再嵌套两个子组件HomeRecommend和HomeRanking。1.封装一个高阶组件，给类组件注入这个hook，然后通过props就能调用并传参。Link渲染出来的是a标签，如果我们想要其它的标签，那就只能自己来操作了。将App.js中配置的路由单独抽取到router/index.js文件中。并包裹根组件，当匹配的组件还未加载成功时，可显示fallback中的内容。可单独打包，匹配到该路径才会下载对应的文件——性能优化。:当前路由选中时，会自动添加一个active的类。
2025-03-30 09:15:00
323
原创 React(七）：Redux
它封装了Redux的核心API，并提供了一些额外工具和约定，帮助我们更高效编写Redux代码configureStore:它自动配置了 Redux 的和，并预装了一些常用的中间件（如和createSlice:接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有相应的actionscreateAsyncThunk:接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk。
2025-03-29 12:06:42
731
原创 React(六）React过渡动画-CSS编写方式
在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，提高用户体验→可通过实现。React曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 react-transitiongroup。该组件帮助我们实现组件的入场和离场动画。安装方式：# npm# yarn。
2025-03-26 16:24:52
813
原创 React(五）非受控组件-高阶组件-Fragment-protals
高阶组件的英文是 Higher-Order Components，简称为 HOC官方定义：高阶组件是参数为组件，返回值为新组件的函数；本质：高阶组件的本质就是对传入的组件做了一个拦截，然后在拦截过程中对想要具备的功能进行一些别的操作；若想要拦截，只需要通过高阶组件进行一个包裹即可// 定义一个高阶组件// 1.定义类组件render() {return (render() {return (<div></div>
2025-03-25 09:45:00
974
原创 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
904
原创 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
659
原创 React（二）：JSX语法解析+综合案例
实际上，jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖→所有的jsx最终都会被转换成React.createElement的函数调用。假设有一个btnClick函数，但它并不是我们主动调用的，而是当button发生改变时，React内部调用→内部调用时，并不知道要如何绑定正确的this。2.获取更多参数：可通过传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数。1.获取默认参数：即event对象。
2025-03-17 00:09:20
419
原创 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
497
原创 Proxy详解
Proxy无需一层层递归为每个属性添加代理，一次即可完成以下操作，性能上更好，并且原本的实现有一些数据不能监听到，但是Proxy可以完美监听到任何方式的数据改变。1.其设计初衷并不是为了去监听一个对象，它一次只能监听对象里的一个属性→若想监听所有，就得遍历对象key。是ES6中引入的新特性，因此它在一些旧的浏览器或者环境中可能不被支持。2.目前只能用它监听属性的设置和获取，不能监听增加和删除。，就是为了我们监听一个对象而生的。可监听我们想要原对象进行哪些操作。在ES6中，新增了一个。
2024-11-29 16:11:40
445
原创 闭包详解。
原因：fun是全局变量（未关闭不回收），而fun的内容是outer函数的返回值fn函数，而fn引用了外部函数count的变量count,从而造成了count,一直在内存中，不会被释放。count作为全局变量容易被修改→将它改成闭包形式→使count,私有→外部无法直接修改。：因为函数内部的变量只能自己访问，我们使用闭包就是为了。：闭包就是里层函数+外层函数变量，它们一起构成了闭包。：统计函数的调用次数（实现数据私有）在外部访问函数内部的变量。造成问题：内存泄露。
2024-11-28 22:39:21
235
原创 关于数组去重
2.使用 filter 方法。3.使用 reduce 方法。4.使用 Object 属性。利用对象的键值唯一性来去重。1.使用 Set 结构。
2024-11-26 22:17:19
123
原创 Object.defineProperty()总结
writable:布尔值，表示属性值是否可以被写入；如果为true,则属性值可通过赋值修改。enumerable:布尔值，表示属性是否可以被枚举（例如，使用。configurable： 布尔值，属性符是否可以被删除。方法用于在对象上定义或修改一个属性。value:设置属性的值。
2024-10-10 13:19:50
325
原创 Object.hasOwnProperty() 详解
Object.hasOwnProperty() 用来检查对象上是否直接含有指定的属性，而不是通过原型链继承得到的；通常用于区分对象自身的属性和从原型链上继承的属性。: 在遍历对象属性时，添加额外的检查来确保只处理对象自身的属性。用于区分对象自身的属性和从原型链继承的属性。被修改，所有对象都会继承这个新属性。区分自身属性与继承属性。
2024-10-09 23:19:34
425
原创 webpack学习
Webpack 是一个,从入口构建依赖图，打包有关模块1.静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件2.打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包3.作用：把静态模块内容，压缩，整合，转译等（前端工程化）4.体验Webpack 打包 2 个 JS 文件内容。
2024-10-08 22:47:55
1522
原创 GIT学习总结
需求1：基于 master 新建 publish 分支，完成发布文章业务，然后修改content文件夹的 html 文件的 title 标签，并提交一次。将log-bug合并完之后，HEAD指向C10，原分支已经产生了一次新的提交记录，故又有一个小分支要合并回去时，就需要再产生一个新（C11)的提交。需求2：切换到 master，也在修改content文件夹的 html 文件的 title 标签，并提交一次。注意2：回退后，继续修改->暂存->提交操作即可（产生新的提交记录过程）
2024-10-07 23:25:05
1256
原创 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
1453
原创 学成在线练习（HTML+CSS)
准备工作项目目录内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等1.由于元素具有一些默认样式，可能是我们写网页过程中根本不需要的，所有我们可以在写代码之前就将其清除base.css/* 基础公共样式：清除默认样式 + 设置通用样式 *//* 去除常见标签默认的 margin 和 padding */* { margin: 0; padding: 0; box-sizing: border-box;}/* 去除列表默认样式 */li {
2024-09-17 22:00:00
713
原创 Node.js知识点总结
Node.js其本质和浏览器一样是一个JavaScript运行环境。浏览器的运行环境为V8引擎+浏览器内置API（BOM、DOM、Canvas);而node.js的运行环境是V8引擎+node提供的API(fs、path、http)。它使JavaScript可以编写后端。
2024-07-18 18:32:59
2729
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人