- 博客(42)
- 收藏
- 关注
RSS订阅原创 面试官考我useContext,我是这样回答的
如果你使用路由库（如 React Router），你可以将路由配置信息存储在上下文中，以便多个组件可以轻松地访问路由信息，例如当前路径或路由参数。：确保在合适的地方创建上下文对象。通常，在应用程序的顶层组件中创建上下文对象是一个良好的实践，以便在整个应用中共享数据。使用上下文的主要目的是减少组件之间的耦合，但也要谨慎使用。是 React 中的一个 Hook，用于在函数组件中访问 React 上下文（Context）中的值。需要使用上下文对象：上下文的使用可能会让组件更难以理解和测试，因此需要谨慎使用。
2023-09-26 16:49:27
161
原创 Day9:浅谈useCallback
如果依赖数组中的值没有变化，它会返回上一次创建的函数引用，否则会创建一个新的函数。接受两个参数，第一个参数是要缓存的函数，第二个参数是一个依赖数组，只有当依赖数组中的值发生变化时，才会重新创建函数。如果依赖数组为空，函数将永远不会重新创建。是 React 中用于性能优化的有效工具，可以帮助你避免不必要的函数创建和确保回调函数的稳定性。保持稳定性：确保传递给子组件的函数不会随着父组件的重新渲染而改变，有助于避免不必要的子组件渲染。可以确保子组件不会因为父组件的重新渲染而重新渲染，除非依赖数组中的值发生变化。
2023-09-25 09:34:47
113
原创 Day8:浅谈useMemo
通俗来讲就是说，当前组件或者当前组件所在的父组件修改状态（state）时，我们不想让其 render 函数中的某个节点或者自身因为不相关的状态变化而去重新渲染造成性能上的浪费，可以使用useMemo来解决这个问题。如果当前的依赖数组和上一次的依赖数组完全相同（即每个元素都严格相等），React 会认为依赖项没有变化，不会重新计算。中，第一个参数是一个计算函数。的依赖数组应该包含所有在计算函数中使用的变量，以确保在依赖项变化时重新计算。在这个阶段，React会比较当前的依赖数组和上一次渲染时存储的依赖数组。
2023-09-08 13:19:57
757
1
原创 Day7:浅谈useEffect
当一个组件首次渲染到页面上时，React 会执行组件函数，包括其中的 useEffect 回调函数。这个回调函数中包含了需要执行的副作用操作。此时，React 不会等待副作用操作完成，而是将其加入一个队列中，以便稍后执行。：当组件从页面中卸载时（如路由切换或组件不再需要渲染），React 会执行清理函数（如果存在），以确保释放副作用操作可能持有的资源，从而避免内存泄漏。第一个参数是一个回调函数，该函数包含副作用操作的代码, 可以可选地返回一个清理函数，用于在组件卸载或下一次副作用触发前执行清理操作。
2023-09-06 16:42:43
249
原创 Day6:浅谈useState
对于复杂的状态逻辑，useState 可能会导致组件内部状态的复杂化，使组件变得难以维护。： 对于大型应用程序中的复杂全局状态管理，useState 可能不足以胜任，你可能需要引入更强大的全局状态管理库，如 Redux 或 Mobx。： 随着 React 不断演进，函数式组件和 Hook 的使用将更加广泛，而 useState 是其中的核心之一，因此它将继续得到支持和改进。： 你可以在同一个函数式组件中多次使用 useState，创建多个独立的状态变量，而不需要使用类组件中的 this.state。
2023-09-05 16:06:15
348
原创 Day5：react函数组件与类组件
每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。：通常比类组件性能更好，因为函数组件不需要创建类的实例，从而减少了内存和性能开销。： 通常更简洁，适合用于无状态、纯UI渲染的情况，代码更易于理解和维护。前端开发工程师（初、中、高级）、应届、转行、培训、自学等同学。后，可以使用useEffect来模拟生命周期行为，如。： 需要创建类的实例，可能会导致轻微的性能损失。： 可能会显得冗长，因为需要定义类、构造函数和。方法，但在复杂的场景中提供了更多的结构。： 使用函数来定义，接收。
2023-08-28 21:51:10
734
原创 Day4:前端路由(进阶篇)
路由懒加载（Route Lazy Loading）是一种前端优化技术，它允许在需要时才加载特定页面的代码和资源，以减少初始页面加载时间。路由预加载是一种优化技术，它允许在用户访问特定页面之前预先加载该页面所需的资源，以提升页面切换时的加载速度。总之，路由预加载是一种优化技术，允许在用户访问特定页面之前预先加载页面所需的资源，以提升页面切换的加载速度和用户体验。总的来说，路由懒加载是一种优化技术，允许在需要时才加载页面的代码和资源，以提高初始加载速度。在懒加载的组件加载完成之前，可以使用。
2023-08-24 11:03:14
162
原创 Day3: 前端路由(基础篇)
前端路由通过监听 URL 的变化，根据不同的路径渲染不同的视图组件，实现页面的无刷新切换。在当前路由复用时（例如，同一个组件在不同路由间切换）调用，例如在参数变化时。路由守卫是一些钩子函数，用于在页面导航发生时执行特定的操作，例如验证用户权限、重定向、取消导航等。总之，路由参数和查询参数都是用于在不同页面之间传递数据的方式。不同页面间可以使用相同的路径，通过不同的查询参数来实现不同的功能。路由表由一个个路由配置对象组成，在一个复杂的应用中，路由表可以更加详细，包括嵌套路由、动态路由参数、路由重定向等。
2023-08-23 16:44:23
227
原创 Day2:跨站脚本攻击
XSS攻击通常在用户与一个被攻击的网站进行交互时发生，攻击者利用网站未充分过滤或验证用户输入的漏洞，将恶意脚本嵌入到网页中，然后让受害者浏览器执行这些脚本。反射型XSS攻击是一种将恶意脚本作为参数注入到URL中，然后通过诱使用户点击恶意链接，使恶意脚本在受害者浏览器中执行的攻击。对于来自URL参数的输入数据，进行适当的验证、过滤和输出转义，确保恶意脚本无法执行。： 攻击者将恶意脚本存储在网站服务器上，当其他用户访问包含这些恶意脚本的页面时，恶意脚本从服务器加载并在受害者浏览器中执行。
2023-08-21 12:00:35
103
原创 day1:前端缓存问题
在重新打开页面时，浏览器会尝试使用缓存的资源来加速页面加载，因此可能会看到之前加载过的资源。这意味着当网页更新时，浏览器可能仍然加载之前缓存的旧版本资源，导致看到的是旧的页面内容。在资源（如样式表、脚本或图像）的URL中添加一个不同的参数（版本号或时间戳），这会让浏览器认为链接是一个新的资源，从而强制重新下载。在HTML文档的部分中，你可以添加一个meta标签来控制浏览器的缓存行为，这些meta标签的组合会告诉浏览器不要缓存页面内容。浏览器会在本地存储缓存的资源，即使服务器上的资源已经更新。
2023-08-17 19:09:56
734
原创 一不小心写了个小游戏
周末的时候突发奇想就想写个小游戏,想到大学那会cv了网上的贪吃蛇案例,这次不如自己动手写个试试。由于本菜鸟对 canvas 比较好奇，索性就用canvas写个贪吃蛇小游戏练练手。好了，废话不多讲直接开搞！#### 设计思路1.先画个500*500的绿色背景，游戏开始时在预先设定好的位置生成我的小蛇并随机生成食物。2.给蛇一个初始速度（10px/0.5s）和运动方向(left),按上下左右键时改变当前蛇的运动方向3.蛇每移动一步都应该重新绘制蛇，（我呢偷懒了直接重绘了整个地图里的内容，蛇身.
2021-09-16 00:46:50
124
原创 在express项目里配置ejs模板引擎
####1.ejs配置#####方法1-修改app.js```js//viewenginesetupapp.set('views',path.join(__dirname,'views'));app.set('viewengine','ejs');````-在views中创建ejs模板文件#####方法2-修改app.js````jsvarejs=require("ejs")app.engine(".html...
2021-08-29 18:15:36
320
原创 利用element的tree实现多级类目管理
需求展示：学习内容：提示：这里可以添加要学的内容例如：1、 搭建 Java 开发环境2、 掌握 Java 基本语法3、 掌握条件语句4、 掌握循环语句学习时间：提示：这里可以添加计划学习的时间例如：1、 周一至周五晚上 7 点—晚上9点2、 周六上午 9 点-上午 11 点3、 周日下午 3 点-下午 6 点学习产出：提示：这里统计学习计划的总量例如：1、 技术笔记 2 遍2、CSDN 技术博客 3 篇3、 学习的 vlog 视频 1 个...
2021-06-14 20:22:48
1365
转载 隐藏scrollbar滚动条
转载：http://caibaojian.com/hide-scrollbar.html隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。方法1：计算滚动条宽度并隐藏起来在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。 演示 下面给一个简化版的代码
2021-05-20 22:48:10
1701
原创 vue项目字体设置
导入字体文件，以pingfang.ttf为例设置font.css@charset "UTF-8";@font-face { font-family: "pinfang"; src: url("font/pinfang.ttf") format("truetype");}在全局使用public.css： @import ‘font.css’;main.js : import ‘@/assets/css/public.css’...
2021-05-20 22:31:40
3571
原创 朴实无华地解决h5移动端开发软键盘输入时导致页面出现白块
项目场景：项目场景：h5移动端开发问题描述：登录页面在输入账密的时候，软键盘弹起的时候带出了白块在收起软键盘之前不会消失 原因分析：在页面中使用了相对定位/绝对定位属性以及margin属性，导致软键盘弹起时页面内容长度增加但不会自动收回。解决方案：最直接办法不使用上述说的属性；第二种直接在最外层盒子加position:fixed。...
2021-05-10 09:46:56
809
原创 vscode缩进和Eslint缩进问题解决
vscode缩进和Eslint缩进问题解决vscode更改换行时的缩进：如果更改失效：取消该属性勾选Eslint 缩进校验修改：
2021-03-12 14:50:01
2156
原创 数组方法总结
filter、find总结下filter、find等数组方法的使用一、filter数组的方法，用来过滤出符合条件的数据，并存入数组;filer 方法的参数方法里，我们可以加入正则的校验；筛选符合特定条件的数据适用情形：筛选出符合条件的对象筛选出符合条件的数字筛选出符合条件的字符串代码如下（示例）：我列举了筛选对象的示例代码；数字，字符串的筛选大同小异let arra = [ {age: 10, name: 'ywc'}, {age: 20, name: 'fff'}
2020-12-15 22:20:26
196
原创 国际标准时间转为“YYYY-MM-DD“格式
国际标准时间转为指定格式：根据项目的需求，将国际标准时间转成“YYYY-MM-DD”或“YYYY/MM/DD”功能代码：// 间隔符号 - 或 / 根据个人需求而定function formatDate(tt) { let date = new Date(tt); let y = date.getFullYear(); let M = date.getMonth() + 1; let d = date.getDate(); let theDay = `${y.
2020-12-07 11:08:13
1284
1
原创 elementUi组件select、input等组件调用携带参数
问题描述：在调用elementUi中的select下拉框组件时，我想传递自定义参数来供我实现项目中的逻辑，解决方案：1.@change=“setCityAndCounty($event, ‘province’’)” // $event 是默认传的参数（选中的数据），province是自定义参数@change="setCityAndCounty($event, 'province'')"2.@change="(value) => setCityAndCounty(value,‘provi
2020-11-03 13:01:18
741
原创 2020/10/26近期工作总结-vue开发
1. 父子传参父传子：方法1： 在父组件中加入子组件，给子组件绑定需要传递的值import Policy from './components/policy'; // 保单信息组件components: { Policy},<Policy :sign="true"/>子组件接收：props: ['sign'],// 子组件中调用父组件传的值<el-form class="mar-top10" :disabled="sign" :model="policy
2020-10-26 14:08:30
161
原创 红宝书--第二章--HTML 中的 JavaScript总结分享
系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例
2020-10-25 23:00:17
254
原创 红宝书--第一章总结分享
这里写自定义目录标题红宝书--第一章总结分享2、DOM功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入红宝书–第一章总结分享你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编
2020-10-11 10:17:16
1971
6
原创 npm 常见插件安装
npm 常见插件安装为方便项目中遇到各种插件的安装，特做以下的积累（持续更新中…）：1.element-uinpm i element-ui -S2.vuexnpm install vuex3.vue-clinpm install -g @vue/cli4.vue-routernpm install vue-router5.axiosnpm install axios...
2020-07-28 17:43:13
1189
原创 vue 表单相互校验
这里举例校验姓和名的长度和不少于3<el-col :lg="scanType=='newOrderInput'?8:6" :sm="12" class="row_content"><el-form-item label="姓" class="title" prop="crsExpand.familyName"><el-input size='mini' placeholder="请输入姓" @blur="()=>this.$refs['applicant'].
2020-07-02 15:23:21
255
原创 axios技术总结（包括跨域的处理）
在路上的小小前端程序猿vue经验分享**1. axios与vue-axios概念：axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中（理解成库）vue-axios用于将axios集成到Vuejs的小型包装器（理解成插件）安装axios:使用 npm:npm install axios使用 bower:bower install ax...
2020-03-23 17:14:00
847
原创 laravel经验分享（2）
标题laravel经验分享（2）通过一个简单的get请求让新手们了解控制器/模型/数据表/api路由之间的关系1. 控制器创建 php artisan make:controller Api/newscontroller创建成功之后，Controllers文件夹会多出一个Api文件夹，Api文件夹里面有newscontroller.php2. 模型创建php artisan make...
2020-03-21 17:27:10
149
原创 win10系统 phpstudy环境下配置虚拟主机
在路上的小小前端程序猿laravel经验分享（一）！1. 添加IP 和 虚拟域名找到C:\Windows\System32\drivers\etc目录下的hosts文件在文件最后添加127.0.0.1 www.bs.com你的IP 自己看着办！虚拟域名自拟即可，比如：www.xxx.com2.打开配置文件中的虚拟主机配置项打开phpstudy配置文件中的httpd-c...
2020-03-06 21:20:12
568
原创 本地服务器打开laravel项目报错的解决方法
部分初学者安装完laravel项目，在本地服务器想打开项目首页时会发现这样的问题：Warning:require(C:\phpStudy\PHPTutorial\WWW\test\BSbackstage\backstage\public/../vendor/aut oload.php): failed to open stream: No such file or directory in...
2020-03-06 15:20:50
1110
原创 vue-resource的$http.jsonp方法例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
2019-04-21 22:22:20
2641
原创 vue resource jsonp请求
vue resource jsonp请求 window.onload = function () { var app = new Vue({ el: ".box", data: {}, methods: { get: function () { ...
2019-04-20 09:52:25
225
原创 vue resource get 传参失败的原因
vue resource get 传参失败的原因 window.onload = function () { var app = new Vue({ el: ".box", data: { }, methods: { get: function ()...
2019-04-20 08:27:13
776
转载 Flex布局详细介绍
flex布局1.概念：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。1.1任何一个容器都可以指定为Flex布局。 .box{ display: flex; }1.2行内元素也可以使用Flex布局。 .box{ display: inline-flex; }1.3Webkit内核的浏览器，必须加上-webkit前缀。 ...
2019-03-31 14:36:35
217
转载 js中function 与 => 的区别
在JS中，箭头函数并不是简单的function(){}匿名函数的简写语法糖，实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，在编写函数时就已经确定了。而匿名函数的this指向运行时实际调用该方法的对象，无法在编写函数时确定。我们看一下下面的例子： function Test() { this.num = 100; this.func = fu...
2019-01-21 21:48:01
2361
2
转载 Ajax不能接受php return值的原因
今天用Ajax 接收后台数据卡住了一个下午，最后才知道是这个问题导致的。（前后端都是自己搞的，期末作业）一是为了以后能看，二是为了让更多不知道的人能解决这个问题。所以必须分享下：PHP在处理ajax返回值的时候，如果使用return如 return $result会失败，echo $result却没问题。解释原因如下：1.ajax请求从服务器端读取返回值，而且这些返回值必须为一些可读的...
2018-11-10 19:45:33
277
原创 vue 安装路由模块详解
看的网上的视频根据自己的实际情况总结的，也参考了别人的总结：安装路由模块：1.本地环境安装路由插件vue-router： npm install vue-router --save -dev 2.在main.js中导入vue-router: 2.1import Router233 from 'vue-router' //Router233 这个路由包名自定义就行，不过要和...
2018-11-03 15:06:49
2293
原创 jQuery中的属性和属性节点的详细介绍2.0
jQuery中的属性和属性节点的详细介绍2.0jQuery中attr方法1.attr(name|pro|key,val|fn)作用：获取或者设置属性节点的值<body><span class="span1" name="it666"></span><span class="span2" na
2018-09-20 10:28:48
149
原创 jQuery中的属性和属性节点的详细介绍
jQuery中的属性和属性节点的详细介绍1.0 在看完江哥对jQuery中属性和属性节点这几段视频后，还是感觉有必要总结下，也能供大家参考：1.什么是属性？对象身上保存的变量就是属性 2.如何操作属性？function Person() {}var p = new Person(); //先new一个对象 对...
2018-09-19 20:33:14
827
2
原创 小程序表单提交详解-picker
小程序表单提交详解我这提交的是picker里的数据，如果传input的也可以参考此文。1.wxml<form bindsubmit='formSubmit'> <view class="section"> <picker mode="date" start...
2018-08-28 13:02:18
8423
1
原创 微信小程序数据的接收详解
小程序数据接收的详细流程1.wxml:<view class='inputbox'> 日期<text class="tips2" wx:for="{{date}}">{{item.customer_date}}</text> </view>custom...
2018-08-28 11:36:41
6166
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人