- 博客(39)
- 收藏
- 关注
RSS订阅原创 react笔记（React18）
既然分离，会涉及到子组件需要调用到父组件中的方法，进行数据修改等操作。:useEffect中会有两个参数，第一个是一个函数，第二个是一个数据对象，清除动作是在第一个参数函数内部return一个箭头函数的方式，这个return的箭头函数作用相当于vue中的组件卸载声明周期函数。理解什么是副作用，副作用可以理解为useEffect中编写的由渲染本身引起的对组件外部的操作，被称作副作用操作，比如开启了一个定时器，但是在组件卸载之后定时器并不会关闭，这个就是对组件外部的操作，理解为副作用。
2024-08-25 14:55:30
916
原创 一、react-hooks（useState、useRef、forwardRef）
但是这里也会有一个问题就是如果setState更新的动作也是在useEffect中操作，那可能也还是拿不到，可能就需要根据具体业务场景解决。4.ref.current的值不可作为其他hooks的依赖项，因为ref是可变的，不会使页面再次渲染，react不会跟踪ref的变化。2.setState中的更新并不能拿到最新的值，如果需要可以通过在useEffect中获取更新后的值。6.异步更改，多个状态的更改会合并，如果不能信任之前的状态，应该使用回调函数的方式改变状态。解决方式式通过函数式的方式进行赋值更新。
2024-08-18 00:11:02
352
原创 react笔记--redux
它可以用在react, angular, vue等项目中, 但基本与react配合使用。总体原则：能不用就不用, 如果不用比较吃力才考虑使用。某个组件的状态，需要让其他组件可以随时拿到（共享）。作用: 集中式管理react应用中多个组件。一个组件需要改变另一个组件的状态（通信）。的JS库(不是react插件库)。
2024-08-17 20:24:22
156
原创 react笔记
从上面的两种更新方式获取可以看到，第一种更新的方式是函数式更新的语法糖，写起来代码更简洁，如果项目中不需要通过state,props的值更新状态，则可以直接使用第一种对象式更新，如果需要用到state，或props中的值，则也可以通过函数式更新的方式更新。（1）、setState是异步更新，setState方法是同步执行的，但是更新state状态的动作是异步的，为了提高渲染效率，减少频繁的页面更新，react的更新应该也是有一个缓存异步更新的机制。所以即使调用了更新的方法之后去拿更新的值也是拿不到的。
2024-08-17 19:30:13
1121
原创 react-redux的使用
首先：react-redux和redux并不是一个东西，redux是一个独立的东西，react-redux是react官方根据市场偏好redux推出的react插件库。新建一个容器组件文件夹container:count:index.js文件（src\containers\Count\index.jsx）ui组件中：完全不操作store和获取store，通过props可以直接访问从容器组件中的store和方法。入口文件中写provider全局提供store.不用再每使用一个组件，传一次store.
2024-08-15 22:16:01
337
原创 react笔记：redux
写成箭头函数：函数调用后要返回一个对象，需要在对象外包一个括号的写法，就会返回一个对象，否则{}会默认当作函数体处理。可以发现，其实异步action并不是必须的，可以在业务组件中获取数据后再去修改维护store，但是如果需要抽离到action中，就会使用到。原理是只要store数据有更新，就触发App组件更新，这里react有diff算法，所以应该对性能的损耗不是特别大，所以这种方法也会更省事一点。因为store不能识别异步任务，所以这里要使用异步任务的话还需要一个中间件：redux-thunk。
2024-08-15 21:03:19
552
原创 react学习笔记：7
最理想的方式是在入口文件中的App组件实例挂载的地方包裹一个路由BrowserRouter。区别：1.props不同：一般组件的props没有传就是{}空对象，传递什么就收到什么，路由组件默认是有数据的，接收三个固定的属性。（通过配置路由路径，和路径匹配点击之后展示的是路由组件，不需要配置路由的是一般组件）1、连续解构赋值的写法：对象包对象，第二个解构的value一定也是在{}内部的写法。路由和路由器：路由器是管理路由的，路由器（router）和路由（routes）明确好界面中的导航区、展示区。
2024-08-07 21:44:42
305
原创 react配置代理服务器:day7
说明：react本省只关注于界面，并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互（json数据）react应用汇总需要集成第三方ajax库（或自己封装)常见的ajax库：使用步骤：1.安装axios: npm i axios2.启动服务端代理服务器3、请求报错App.js:15以上报错是前端跨域问题：解决方式是通过配置代理服务器解决。
2024-08-04 13:42:35
249
原创 react案例1：todoList
1、拆分组件、实现静态组件，注意：className,style的写法2、动态初始化列表，如何确定将数据放在那个组件的state中？-----某个组件使用：放在自身的state中-----某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）3.关于父子之间通信：1.【父组件】给【子组件】传递数据：通过props传递2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数。
2024-08-04 12:01:01
431
原创 react的生命周期
废弃了三个willreceiveProps,willupdate,willmount,新增了两个生命周期钩子函数。更新流程：shoulfComponentUptate()是是否更新的阀门，默认返回一个true.由ReactDOM.unmountComponentAtNode()触发。由组件内部this.setSate()或父组件重新render触发。由ReactDOM.render()触发---初次渲染。实现一个需求：页面每2秒慢慢消失，消失后恢复继续。2.绑定函数要用this.方法名的方式。
2024-08-03 18:34:58
510
原创 react学习笔记-6
1、类型限制的propTypes第一个字母p是小写，这是因为react底层封装的属性就是 propTypes2、设置的时候使用的PropsTypes必须驼峰大写，是因为这个方法是独立封装的一个方法，15.5以后都是单独调用，不需要通过React.PropsType的方式使用。3、类组件中的构造器不是必须要写的，使用的场景很少。（只有在构造器内访问this组件实例的时候才需要使用）1.ref的使用可以通过字符串形式的ref、回调函数的ref、绑定类回调函数的ref、createRef的方式（官方推荐）。
2024-08-03 14:31:11
998
原创 react学习笔记
如果项目中使用的不是less和sass，使用css则需要做样式的模块化，样式命名采用import hello='./xx/xx.modules.css的方式,对样式进行模块化处理，防止不同模块之间样式覆盖问题。:react代码在网页跑起来显示的图标是这种颜色的，一般是没有经过打包的，打包部署后应该是正常的react图标icon颜色。2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
2024-08-02 00:06:47
307
原创 react学习笔记
Contex:上下文的意思。作用：实现非父子组件之间的数据共享step:1首先在文件目录下新建一个contex文件夹-ThemeContext.js文件，创建上下文。step:2共享数据的组件中引入ThemeContext ，通过ThemeContext.Provider包裹，value属性传数据。（这里只能是value,不能是其他字段，是固定好的）render() {return (<div></div>step。
2024-07-29 21:59:15
911
原创 react笔记
jsx绑定属性（如元素都会有title属性，img会有src属性，a元素会有href属性，元素绑定class,使用内联样式style)* 1、首先通过在子组件标签上添加一个andClick属性，属性值是一个函数的方式传递andClick方法给子组件。3、调用后会在函数内部自动再调用自定义changeCount方法，在这个方法中去修改数据。组件化开发的理解：将页面拆分为一个个小的功能模块，然后组合成为一个页面。组件化的分类：类组件和函数组件。
2024-07-26 23:46:22
132
原创 react笔记
3）object对象类型不能作为子元素（not valid as a Reat child),如果需要展示对象中的key可以使用onject.keys(obj)的方式，或者object.属性名的方式。const {message}=this.state 实际上就是一段jsx代码，是html in js的写法，react实际上就是all in js.列表渲染在react中比较灵活，可以通过各种方式来实现，map方法的箭头函数使用方法更简洁。3.jsx可以是但标签，也可以双标签，但是但标签必须以/>结尾。
2024-07-26 00:11:05
1052
1
原创 vue3 api使用（watch函数、生命周期函数、组件通信）
子组件中通过 defineProps编译宏进行编译接收。并直接在页面中使用。defineProps编译宏会将setup和当前props进行抽离，抽离出一个props对象。2.子组件中需要暴露组件的属性和方法，才能在ref模板中获取到组件实例的属性和方法defineExpose。深度监听：deep:true(watch()内添加第三个参数，以对象的形式，添加deep属性。1.vue3中获取dom组件实例对象可以在onMounted生命周期函数中获取。概念：通过ref标识获取真实的dom对象或者组件实例对象。
2024-06-08 18:11:42
314
原创 vue3中导入子组件报错
项目报错：父子组件通信中，导入子组件报错提示：Internal server error: Failed to resolve import "@components/son-com.vue" from "src/App.vue". Does the file exist?
2024-06-07 11:12:09
356
3
转载 promise 的用法
回调方法：就是将一个方法 func2 作为参数传入另一个方法 func1 中，当 func1 执行到某一步或者满足某种条件的时候才执行传入的参数 func2Promise 是 ES6 引入的异步编程的新解决方案。（可以实现回调方法同样的功能）Promise 对象三种状态：初始化、成功、失败 pending-进行中、resolved-已完成、rejected-已失败就好像，你跟你女朋友求婚，她跟你说她要考虑一下，明天才能给你答案，这就是承诺（promise）。
2024-05-23 10:25:03
58
原创 手写call&apply&bind
核心逻辑是：要改变当前this指向第一个参数obj，实际上是通过在obj对象中添加一个调用函数this. this在这里是函数的调用对像，比如:obj.fn,this就是obj.apply的特点是传入的剩余参数是一个数组对象。简单实现，后续更新.....
2024-05-23 08:49:50
176
转载 图片懒加载
链接：https://leetcode.cn/leetbook/read/interview-coding-frontend/dzv8fv/方法一：滚动监听 + scrollTop + offsetTop + innerHeight。innerHeight：当前浏览器窗口的大小。需要注意兼容性问题。scrollTop：指网页元素被滚动条卷去的部分。offsetTop：元素相对父元素的位置。来源：力扣（LeetCode）作者：LeetCode。
2024-05-22 22:29:29
76
转载 vue2和vue3的区别
一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期函数等），导致代码的可读性变差，需要上下来回跳转文件位置。组件，允许程序在等待异步组件时渲染兜底的内容，如 loading ，使用户体验更平滑。除了增强了代码的可读性、内聚性，组合式API 还提供了较为完美的逻辑复用性方案，举个 ，如下所示公用鼠标坐标案例。为例子，在 Vue2 中，全局 API 暴露在 Vue 实例上，即使未使用，也无法通过。Vue2中，编写页面的时候，我们需要去将组件包裹在。拦截目标对象的行为。
2024-05-22 12:41:37
19
转载 从数组中找出某个值的元素
/2: find:find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。链接：https://leetcode.cn/leetbook/read/interview-coding-frontend/dq6zuv/// 第五章：从数组 [1,2,3,4,5,6] 中找出值为 2 的元素。商业转载请联系作者获得授权，非商业转载请注明出处。来源：力扣（LeetCode）作者：LeetCode。
2024-05-22 11:28:23
69
转载 for..in 和 for..of 用法
For...in用于遍历对象的属性名，而For...of用于遍历可迭代对象的值。在JavaScript中，For...in和For...of都是用于循环遍历数据结构的循环语句，但它们之间有一些重要的区别。For...in遍历对象的属性名，而For...of遍历可迭代对象的值。此外，For...in遍历的是对象的所有可枚举属性，包括它的原型链上的属性，而For...of只遍历可迭代对象中的值。最后，For...in返回的是属性名，是一个字符串，而For...of返回的是值，可以是任何类型的值。
2024-05-22 11:13:21
27
原创 防抖节流函数
节流的原理是在触发事件后设置计时器。在计时器延迟过程中，即使事件再次触发，计时器的延迟时间也不会改变。在计时器执行功能之前，计时器不会复位。链接：https://leetcode.cn/leetbook/read/interview-coding-frontend/dq3hqi/：是在触发事件后设置计时器。在计时器延迟过程中，如果事件再次触发，则重置计时器。在没有触发事件之前，计时器将再次触发并执行相应的功能。即使在这段时间管道里有更多的水，水龙头也不会掉更多的水。作者：LeetCode。
2024-05-22 10:58:25
142
转载 深拷贝&浅拷贝
2.浅拷贝:浅拷贝会创建一个对象，再去遍历对象的原始对象，如果拷贝的是基础类型，那么就拷贝基础类型的值，如果拷贝的是引用类型，那么拷贝的是地址，如果改变新的对象那么原来的对象也会被改变。浅拷贝的语法糖Object.assgin(新的对象，需要拷贝的对象)引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里，引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。1.对象赋值：将一个对象赋值给一个新的对象时，赋的其实是对象的地址，而不是数据，两者的改变会互相影响，
2024-05-22 09:51:54
18
原创 vant组件库使用
这里以按需自动引入为例，如果需要全局引入和手动引入，参考vant2官方文档使用说明。第二种调用方法是因为在导入注册vant组件的时候，相关组件方法会自动挂载到vue的原型上。2）移动端：vant-ui（常用：移动端掌握vant即可，其他缺少维护） mint ui cube ui(滴滴）1）pc端：element-ui(element-plus) ant-design-vue。vue的组件库并不是唯一的，vant-ui仅仅只是组件库的一种。方法1：导入调用（组件内或者非组件内都可以使用）
2024-05-18 22:30:00
452
原创 短信验证码倒计时
1.点击短信验证码，需要提交校验用户是否输入手机号码和图形验证码。2.校验通过开启倒计时，当时间走到0时复位。关闭定时器：离开页面时销毁定时器，提升性能。
2024-05-18 16:43:11
173
原创 1.寻找身高相近的小朋友（算法）
小明升学到了小学1年级来到新班级后，发现其他小朋友身高参差不齐，然后就基于各小朋友和自己的身高差，对他们进行排序。输出排序结果，各正整数以空格分割和小明身高差绝对值最小的小朋友排在前面和小明身高差绝对值最大的小朋友排在后面如果两个小朋友和小明身高差一样，则个子较小的小朋友排在前面。
2024-05-17 14:17:03
310
原创 vue Cli脚手架搭建项目
Vue Cli vue脚手架 是vue 官方提供的一个全局命令工具可以帮助我们快速创建一个开发的vue项目的标准化基础架子，集成了webpack配置，统一配置。
2024-05-17 14:08:32
252
原创 error:报错处理2（net::ERR_FAILED 404 (Not Found)
将封装的axios中的基地址修改为正确的基地址之后接口请求成功。前端配置跨域处理之后问题没有解决。场景：配置基地址请求接口时报错。
2024-05-17 10:39:54
361
原创 vue项目中封装api接口模块
在项目的src根目录下新建一个api文件，里面存放各个模块的接口请求。将请求封装成方法，统一存放到api模块，与页面分离。：在对应的功能模块中按需导入封装的方法并使用。在单独封装的login模块中发送登录相关请求。2.相同的请求可以直接复用。1.请求与页面逻辑分离。3.请求进行了统一管理。
2024-05-17 10:26:46
311
原创 vue项目中封装axios模块
使用axios来请求后端接口，一般都会对axios进行一些配置（比如：配置基础地址，请求响应拦截器等），所以项目开发中，都会对axios进行基本的二次封装，单独封装到一个request模块中，便于维护使用。2_新建request模块：（在项目中的utils文件夹中新建一个request.js文件，作为公共方法）优势：封装之后便于统一服务器资源请求。对不同的服务器资源可以封装不同的请求文件。4_测试使用（created生命周期钩子函数中发送接口请求）目标：将axios请求方法，封装到request模块。
2024-05-16 23:54:17
160
原创 报错1：搭建项目安装依赖报错
降级eslint-plugin-vue到@vue/eslint-config-standard支持的版本。安装命令加-legacy-peer-deps 进行安装。忽略冲突，强行安装。可以看到这里的报错和搭建项目时选择了eslint有关系。的 ^7.0.0 版本，但是项目中安装了更高版本的。报错信息：（安装vant组件库报错）降级之后再安装，就能成功。
2024-05-16 12:37:49
692
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人