cake_eat-CSDN博客

原创 useState为什么不能放到条件语句里面？

1. 背景首先我们来看一段代码：import React, { useState } from 'react'let showSex = truefunction Example2(){ const [ age, setAge ] = useState(18); if(showSex){ const [ sex, setSex ] = useState('男'); showSex = false; } const [ work, se

2021-10-08 23:11:41 3856

原创 react-native实现插槽功能

this.props.children 属性表示组件的所有子节点。利用this.props.children可以实现插槽功能。class Index extends React.Component{ render(){ return <View> <Sub color="red"> <View><Text>++++++++</Text></View> </Sub>

2021-06-15 11:54:44 733

原创 React Native 解决 Could not get BatchedBridge问题

问题描述：项目可以正常启动，但是移动端报错，报错信息如下：原因：8081端口被占用解决方法：关闭8081端口

2021-06-14 15:20:15 684

原创 Antd模态框Modal内部组件数据回显

<Modal title="修改菜单" visible={isShowEdit} onCancel={()=>{ this.setState({isShowEdit:false}) }} footer={null} > <EditForm menu={menu} handleCancel={()=>{ this.setState({isShowEdit:false}) }}

2021-06-05 10:09:33 1474

原创箭头函数作为对象属性时候的this指向是window

let a = { b:{ c:function(){ console.log(this); }, e:()=>{ console.log(this); } }, d:function(){ console.log(this); } } a.

2021-03-16 17:10:32 1316 1

原创 vue 跳转同一路由,页面不刷新解决方案

监听路由变化使用watch或beforeRouteUpdate监听$route的变化给router-view添加唯一key如果想强制刷新，可以在根路由上为其分配一个唯一key。采用唯一key。这样vue就回认为内部路由每个都是不同的路由，在跳转时便会强制刷新组件...

2021-02-25 19:26:28 1983

原创 vue组件props，methods，data，computed，watch的加载顺序

props - > methods - > data - > computed - > watch官方源码链接父组件向子组件通过props传值，props是一个只读属性，如果要改变props的值，需要在data中进行定义，所以props在前，data在后computed计算属性要使用data里面的数据，所以data在前，computed在后（待更新…）...

2021-02-24 17:21:03 2545

原创洗牌算法的JS实现（如何打乱数组）

function shuffle(arr){ for(var i = 0;i<arr.length;i++){ var random = Math.floor(Math.random()*arr.length); var temp = arr[i]; arr[i] = arr[random]; arr[random] = temp } .

2021-02-24 16:56:52 361

原创 React的生命周期

组件的生命周期概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为组件的生命周期；组件生命周期分为三部分：组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOMrender：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了comp

2021-01-24 15:26:52 130

原创控制台报错：es6.object.define-property.js:5 Uncaught TypeError: $export is not a function的解决方法

控制台提示信息：es6.object.define-property.js:5 Uncaught TypeError: $export is not a function解决方法：排除node_modules文件夹

2021-01-16 18:50:08 398

原创让一个元素水平垂直居中，到底有多少种方案？

水平居中• 对于行内元素:给如果父级元素是块级元素，则直接给父级元素设置text-align: center;如果父级不是块级元素，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;• 对于确定宽度的块级元素：width和margin实现。margin: 0 auto;首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%。设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: transl

2020-12-19 19:07:09 224 1

原创 JS中的排序算法（冒泡排序、选择排序、插入排序、希尔排序、快速排序）的封装

代码封装： //创建列表类 function ArrayList() { //属性 this.array = []; //方法 //将我们数据可以插入到数组中的方法 ArrayList.prototype.insert = function (item) { this.array.push(item);

2020-12-13 21:17:33 198

原创 JS中的二叉搜索树

代码封装：//封装二叉搜索树 function BinarySearchTree(){ //节点 function Node(key){ this.key = key; this.left = null; this.right = null; } //属性 this.root

2020-12-10 16:53:45 111 1

原创 JS中的哈希表

封装哈希表结构： //封装哈希表类 function HashTable(){ //属性 this.storage = []; this.count = 0; this.limit = 7; //方法 //哈希函数 HashTable.prototype.hashFunc = function (str,si

2020-12-07 20:50:20 657

原创 JS中的集合结构

1 集合结构的特点集合比较常见的实现方式是哈希表集合通常是一组无序的，不能重复的元素构成和数学中的集合名词比较相似，但是数学中的集合范围更大一些，也许集合中的元素重复在计算机中，集合通常表示的结构中的元素是不允许重复的集合是特殊的数组特殊之处在于里面的元素没有顺序，也不能重复没有顺序意味着不能通过下标值进行访问，不能重复意味着相同的对象在集合中只会存在一份2 集合中常见的方法add(value)：向集合添加一个新的项。remove(value)：从集合移除一个值。ha

2020-12-05 19:31:44 445

原创 JS中的双向链表

1 双向链表的特点可以使用一个head和一个tail分别指向头部和尾部节点每个节点都由三部分组成：前一个节点的指针（prev）/ 保存的元素（item）/ 后一个节点的指针（next）双向链表的第一个节点的prev是null双向链表的最后一个节点的next是null...

2020-12-04 17:32:42 168

原创 JS中的链表结构

1 相对于数组的优缺点链表的优点：内存空间不必连续，可以充分利用计算机的内存，实现灵活的内存动态管理链表不必在创建时就确定其大小，并且大小可以无限的延伸下去链表在插入和删除数据时，时间复杂度可以达到O(1)，相对数组效率高很多链表的缺点：链表访问任何一个位置的元素时，都需要从头开始访问。（无法跳过第一个元素访问任何一个元素）无法通过下标直接访问元素，需要从头一个个访问，直到找到对应的元素2 链表的常见操作append(element)：向列表尾部添加一个新的项insert(p

2020-12-02 19:52:31 573

原创网站TDK标题的正确写法

什么是TDK？T：titleD：meta-descriptionK：meta-keywordsTDK的重要性TDK占比40%的排名得分，没有关键词，网站几乎不会有排名。书写格式(1) 标题title：字数32个字左右格式：关键词1-关键词2-关键词3-品牌词例如：<title>杯子-水杯子生产厂家提供双层玻璃杯订做价格杯子定制OEM贴牌代加工公司-晶立方</title>(2)描述description字数60-80字描述清楚用户需求什么是用户需

2020-12-02 16:37:16 640

原创 JS中的队列结构

JS中的队列结构1 特点同栈结构一样，队列也是一种受限的线性结构。它只允许在表的前端进行删除操作，在表的后端进行插入操作（先进先出）。2 队列的操作enqueue(element)：向队列尾部添加一个（或多个）新的项。dequeue()：移除队列的第一（即排在队列最前面的）项，并返回被移除的元素。front()：返回队列中第一个元素——最先被添加，也将是最先被移除的元素。队列不做任何变动（不移除元素，只返回元素信息——与Stack类的peek方法非常类似）。isEmpty()：如果队列中不

2020-12-01 21:16:26 114

原创用队列解决击鼓传花算法题

题目：标号为0~6的6个小朋友围成一圈，开始数数，数到数字5的人自动淘汰，不断循环，剩下的最后一个人胜利。问：最后胜利的人是谁？解析：将这6个学生放入队列中，每个人报一个数的同时出队，并重新进入队列尾部。数到5的学生，出队后不再重新加入队列。依次循环，直到队列中只有一个人，即为最后的胜利者。解决方法：第一步：封装队列类 //封装队列类 function Queue(){ //属性 this.items = [];

2020-12-01 19:56:13 521

原创 JS中的栈结构

JS中的栈结构1 特点只能在栈顶添加和删除元素（后进先出）2 栈的操作push(element): 添加一个新元素到栈顶位置.pop()：移除栈顶的元素，同时返回被移除的元素。peek()：返回栈顶的元素，不对栈做任何修改（这个方法不会移除栈顶的元素，仅仅返回它）。isEmpty()：如果栈里没有任何元素就返回true，否则返回false。clear()：移除栈里的所有元素。size()：返回栈里的元素个数。这个方法和数组的length属性很类似。3 实现栈的两种方式基于数组实

2020-11-30 15:46:57 297

原创前端组件化的个人理解

组件是页面的一个部分。我们可以把一个页面切分成一个一个部分，每个部分我们都可以称之为一个组件。每个组件有独立的HTML、css、js代码。你可以将组件进行任意次数的复用。通过组件，我们可以把一个项目像拼积木一样拼起来。...

2020-11-17 11:36:15 429

原创 mvvm模式

MVVM模式的组成View层:View层是视图层，也就是用户界面。Model层:Model是指数据模型，也就是后端进行业务处理和数据处理ViewModel层:View与Model互相分开，通过ViewModel联系起来。ViewModel就是指Vue，它负责dom监听与数据绑定。通过上面这幅示意图，我们可以发现：在MVVM框架下视图和模型是不能直接通信的，只能通过ViewModel进行交互，它能够监听到数据的变化，然后通知视图进行自动更新，而当用户操作视图时，ViewModel也能监听到视

2020-11-17 11:21:00 177

原创 webpack 性能优化

webpack性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度HMR功能优化代码调试source-map生产环境性能优化优化打包构建速度oneOfbabel缓存多进程打包优化代码运行的性能缓存（hash-chunkhash-contenthash）tree shakingcode split懒加载 / 预加载pwaexternalsdll...

2020-10-31 19:23:42 126

原创已解决：使用 externals浏览器报错Uncaught ReferenceError: jquery is not defined

报错信息如下：原因：

2020-10-31 17:19:34 502

原创解决：ValidationError: Invalid options object. PostCSS Loader has been.....

报错信息：ERROR in ./src/css/a.cssModule build failed (from …/node_modules/mini-css-extract-plugin/dist/loader.js):ModuleBuildError: Module build failed (from …/node_modules/postcss-loader/dist/cjs.js):ValidationError: Invalid options object. PostCSS Loader

2020-10-29 21:12:24 11636

原创已解决：输入npx webpack-dev-server指令后控制台显示成功执行，但是浏览器显示 cannot get/，浏览器控制台显示404

原因：contentBase配置错误

2020-10-29 17:50:26 1977 1

原创解决：输入npx webpack-dev-server指令后报错 Error: Automatic publicPath is not supported in this browser

解决方法：在output里面加上 publicPath:'./'

2020-10-29 17:45:56 247

原创输入指令npx webpack-dev-server报错：Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法

输入指令：npx webpack-dev-server显示如下报错信息：原因：webpack现在存在一个bug,最新版的webpack-dev-server 和最新版的webpack-cli 并不兼容。解决办法：打开package.json，查看依赖包的版本：解决的方法: 重新下载webpack-cli正确的版本。（“webpack-cli”: “^3.3.12”,和“webpack-dev-server”: "^3.11.0"是互相兼容的，报错之前的版本是webpack-cli 4.1.0）

2020-10-29 16:21:16 792 1

原创输入webpack指令的时候报错：[webpack-cli] ReferenceError: requrie is not defined

是require不是requrie一个很傻的错误：require拼写错了。

2020-10-28 16:13:18 1784

原创快速入门less

官网地址：http://lesscss.cn/Less编译工具koala 官网：http://koala-app.com/将less类型的文件转换为css类型的文件。Less中的注释以//开头的注释，不会被编译到css文件中以/**/包裹的注释会被编译到css文件中Less中的变量使用@来申明一个变量：@pink:pink作为普通属性值来使用：直接用@pink作为选择器和属性名：#@{selector的值}作为url：@{url}变量的延迟加载例如：@color:deep

2020-10-26 19:46:08 206 1

原创解决：输入$ git push origin master后跳出的窗口无登陆密码框，而是提示：connect to Github sign in with your brower的问题

（1）关闭含有信息：connect to Github sign in with your brower的弹出框（2）此时出现一个ssh弹出框，显示：‘https://github.com’: 输入的是github上的邮箱账号, 而不是github中设置的usernamePassword for ‘https://你的github邮箱@github.com’: 输入github的登录密码,点击enter键即可（3）此时命令行中显示如下信息，成功push(4)刷新仓库页可以看见文件都上传到了Gith

2020-10-25 20:05:19 5221

原创 jQuery中的Ajax

（1）$ajax()方法作用：发送ajax请求$.ajax({ // 请求方式 type: 'get', // 请求地址 url: 'http://localhost:3000/base', // 请求成功以后函数被调用 success: function (response) { // response为服务器端返回的数据 // 方法内部会自动将json字符串转换为json对象 console.log(response);

2020-10-24 11:20:01 208

原创什么是同源政策？使用JSONP解决同源限制问题

什么是同源？如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。例如：对于http://www.example.com/dir/page.htmlhttp://www.example.com/dir2/other.html：同源http://example.com/dir/other.html：不同源（域名不同）http://v2.www.example.com/dir/other.html：不同源（域名不同）http://www.example.

2020-10-23 17:16:56 177

原创什么是FormData对象？FormData对象的作用

什么是FormData对象？XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。For

2020-10-23 10:33:33 3506