coding苏-CSDN博客

原创 React-3-useEffect-自定义Hook

自定义Hook是以 use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用// 封装自定义Hook// 问题: 布尔切换的逻辑当前组件耦合在一起的不方便复用// 解决思路: 自定义hook// 可复用的逻辑代码value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value,toggle// 封装自定义hook通用思路// 1. 声明一个以use打头的函数// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）

2024-04-02 18:58:40 467

原创 React-2-useState-获取DOM-组件通信

本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化**（数据驱动视图）**useState 是一个 React Hook（函数），它允许我们向组件添加一个。在 React 组件中获取/操作 DOM，需要使用。，不能直接进行修改, 父组件的数据只能由父组件修改。在React中，状态被认为是只读的，我们应该始终。数字、字符串、布尔值、数组、对象、函数、JSX。, 从而控制影响组件的渲染结果。，直接修改状态不能引发视图更新。props可传递任意的数据。vue中的双向数据绑定。

2024-04-01 19:12:19 588 1

原创 React-1-jsx基础-事件绑定-样式处理

JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式HTML的声明式模版写法 2. JS的可编程能力JSX的本质：JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行。

2024-03-25 17:22:43 360

原创 js进阶-深入对象-内置构造函数-包装类

通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。静态成员 : 构造函数上的属性和方法称为静态成员(静态属性和静态方法)实例成员: 实例对象的属性和方法即为实例成员。

2024-03-19 18:18:07 343

原创 js进阶-函数参数-展开预算符-解构

当不确定传递多少个实参的时候，我们怎么办？arguments动态参数。是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。arguments是什么？1. 伪数组 2.它只存在函数中。剩余参数和动态参数区别是什么？开发中提倡使用哪一个？剩余参数允许我们将一个不定数量的参数表示为一个数组。arguments的作用是动态获取函数的实参。获取的剩余实参，是个真数组。开发中，还是提倡多使用。动态参数剩余参数。1.动态参数是伪数组。2.剩余参数是真数组。

2024-03-13 10:42:45 154

原创 js进阶-es6-作用域-垃圾回收机制-闭包-变量提升

作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问。

2024-03-06 15:40:21 553

原创如何交接一个前端项目

如何交接一个前端项目

2024-02-19 18:24:55 489

原创组件间样式覆盖问题--CSS Modules

在配置路由时，组件都被导入到项目中，那么组件的样式也就被导入到项目中了。如果组件之间样式名称相同，那么一个组件中的样式就会在另一个组件中也生效，从而造成组件之间样式相互覆盖的问题。

2022-11-02 16:38:04 677 1

原创【Ajax】HTTP相关问题-XHR使用-跨域-同源-jsonp-CORS

AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：**无刷新获取数据**AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式...............

2022-08-03 11:01:43 532

原创 React 父子组件之间传值，以及父组件如何获取子组件数据和方法

在函数组件中要获取子组件的数据,需要两步骤1.将ref传递到子组件中,2.需要使用forwardRef对子组件进行包装

2022-07-21 15:04:13 1858

原创 Js中forEach map无法跳出循环问题以及forEach会不会修改原数组

for循环里要跳出整个循环是使用break，但在数组中用forEach循环或者map如要退出整个循环使用break会报错，使用return也不能跳出循环，

2022-07-06 17:26:19 1841

原创 js递归及其应用

递归的概念函数内部不断调用自身。递归函数的使用要注意函数终止条件避免死循环(一般都要写一个结束的条件)； //在递归的过程中会出错// Maximum call stack size exceeded// 内存溢出：超过了最大的堆栈大小递归两个要素1.递归的边界——找到出口，在什么情况下跳出递归2.递归的逻辑——找到入口，什么情况下重复调用自己，调用自己做什么递归应用场景: 深拷贝菜单树遍历 DOM 树1.经典案例1 ：求和求 1-100 的和function sum(n)

2022-05-26 10:24:48 1452 2

原创 js中箭头函数和普通函数区别

一.箭头函数和普通函数箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return。let fun = () => { console.log('111');}function fun() { //普通函数 console.log('123');}二、箭头函数和普通函数的区别1. 箭头函数不能作为构造函数，而普通函数可以：箭头函

2022-05-25 12:03:01 4520 1

原创 React类组件中this的指向

React组件分为类组件，和函数组件。函数组件不存在this指向问题，结合hook在项目中大量应用。类组件中存在着this指向问题，解决办法大概有这么几中：总的来说，改变this的指向问题可以通过使用bind来修改this的指向，还有可以使用箭头函数来解决1.行间定义事件后面使用bind绑定this run(){ alert("第一种方法！") } <button onClick={this.run.bind(this)}>第一种</button>

2022-05-19 11:31:25 593

原创 js从数组中提取自己所需的数据

1.人员选择问题，2.配置化选择数据

2022-05-19 10:32:29 5517

原创 react之纯函数、函数组件、类组件、纯组件

一.纯函数 Pure Function定义：一个函数的返回结果只依赖于它的参数，并且在执行的过程中没有副作用，我们就把该函数称作纯函数。特点：1.函数的返回结果只依赖与它的参数（同一个输入只能有同一个输出）let foo=(a, b)=>a+bfoo(1,2) //=32.函数的执行过程中没有副作用（一个函数执行过程对外部产生了可观察的变化那么就说这个函数是有副作用的。）什么是副作用除了修改外部的变量，一个函数在执行过程中还有很多方式产生外部可观察的变化，比如说调用 DOM

2022-05-13 14:14:00 1900

原创 React hook常见用法

1.hook 是什么Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。2.为什么要使用 hook3.useState：让函数式组件拥有状态// 计数器import { useState } from 'react'

2022-05-11 17:14:16 717

原创 React父子组件生命周期函数执行顺序

React中，父组件在内存中生成页面树的时候先去制作子组件,等到子组件挂在到父组件某个节点时在继续内存渲染父组件知道父组件didmount.

2022-05-10 11:18:36 1772

原创 React 组件三大核心属性

1: state1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)注意:1.组件中render方法中的this为组件实例对象2.组件自定义的方法中this为undefined，如何解决？a)强制绑定this: 通过函数对象的bind()b)箭头函数3.状态数据，不能直接修改或更新,需要用setState...

2022-04-13 11:30:37 927

原创 jsx语法规则

react jsx

2022-04-06 15:47:01 257

原创前端常见面试题

HTML和CSS部分1.对BFC规范（块级格式化上下文）的理解BFC 块级格式化上下文一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。怎么触发BFCfloat的值left或rightoverflow的值不为visible（默认）display的值为inline-block、table-cell、table-captionposition的值为absolute（绝对定位）或fixed

2022-03-06 22:36:46 537

原创 ES6常见用法

ES6, 全称 ECMAScript 6.0.一.var、let、const之间的区别let 用来声明变量，类似于变量，但是所声明的变量，只在let命令所在的代码块内有效需要注意的地方：1.不存在变量提升，未声明直接报错2.暂时性死区3.for循环具有两个作用域，外面的变量和里面的变量互不干扰const 用来声明一个只读的常量，一旦声明，常量的值就不可以改变了，而且声明的时候必须赋值var声明变量可以重复声明，而let不可以重复声明var是不受限于块级的，而let是受限于块级var会与w

2022-03-06 10:48:32 665

原创前端性能优化（重点）

1.减少重绘重排:用 JavaScript 修改样式时，最好不要直接写样式，而是替换 class 来改变样式。如果要对 DOM 元素执行一系列操作，可以将 DOM 元素脱离文档流，修改完成后，再将它带回文档。推荐使用隐藏元素（display:none）或文档碎片（DocumentFragement），都能很好的实现这个方案2.图片懒加载3.使用字体图标 iconfont 代替图片图标4.利用CDN5.减少 HTTP 请求6.使用服务端渲染7.防抖（debounce）/节流（throttle）

2022-02-28 15:50:31 2467 3

原创 Vue虚拟DOM和diff算法

虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术，都说他能帮助vue和react提升渲染性能，提升用户体验js执行 —>虚拟DOM( 计算变更) — > 操作真是的DOM —> 视图更新一.虚拟dom的定义与作用1.1什么是虚拟dom虚拟DOM：用JavaScript对象描述DOM的层次结构。虚拟dom就是一个普通的js对象DOM 中的一切属性都在虚拟DOM中有对应的属性。1.2 虚拟dom的结构1.3 虚拟dom的作用 (为什么要使用虚拟DO

2022-02-25 15:54:03 686

原创 Js数组常见用法及面试题

一.判断是否为数组1.1 instanceof操作符这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。var arr = [1,2,3];console.log(arr instanceof Array)1.2 ES6方法 Array.isArrayvar arr = [12,32,3];console.log(Array.isArray(arr));二.数组的去重2.1 使用ES6的Set高阶函数var arr = [1, 2, 3, 4, 3, 7, 7];

2022-02-24 18:06:15 1275

原创 Vuex使用及原理

一.Vuex是什么Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。使用 Vuex 统一管理状态的好处：① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护② 能够高效地实现组件之间的数据共享，提高开发效率③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步什么样的数据适合存储到 Vuex 中：一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。..

2022-02-24 10:16:07 911

原创在浏览器输入URL回车之后发生了什么？(面试题)

大致流程:1.URL 解析2.DNS查询3.TCP连接4.处理请求5.接受相应6.渲染页面

2022-02-23 17:20:45 587

原创浏览器渲染页面的流程

一.浏览器渲染页面的原理及流程浏览器的核心部分是渲染引擎，也称为浏览器的内核，负责对网页语法（如HTML、CSS、JavaScript等）的解释并显示网页。Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome使用webkit内核。webkit引擎渲染流程大概可以划分成以下几个步骤：（0）渲染引擎首先通过网络获得所请求文档的内容（1）解析HTML文件，构建 DOM Tree（2）解析CSS，构建 CSSOM Tree(CSS规则树)（3）将 DOM Tr

2022-02-23 16:15:29 10854

原创 cookie、session、localStorage 和 sessionStorage 区别及应用场景

1.概念理解Cookie它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStorage 是 HTML5 标准中新加入的技术，localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。sessionStorage 与 localStorage 的接口类似，相较cookie一般存储大一些的数据，但保存数据的生命周期与

2022-02-23 15:15:02 3660

原创 HTTP协议解释

一.HTTP协议简介1.1什么是通信通信，就是信息的传递和交换。通信三要素：通信的主体 – 通信的内容 – 通信的方式1.2 什么是通信协议客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol），简称 HTTP 协议。1.3 什么是通信协议......

2022-02-21 22:08:07 2377

原创 Vue数据响应式原理简单解释

一.ObjectdefineProperty()javascript有两种变化侦测的手段:Object.defineProperty()和ES6 的 Proxy；vue2中使用的是Object.defineProperty（），vue3中使用的是Proxy。Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。 // 把name放进data 打印出来 const data = {}; let name = "

2022-02-21 21:52:32 716

原创 js防抖(debounce) 和节流(throttling)

一.防抖(debounce)1.1 防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。1.2 防抖的应用场景用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；1.3实现输入框的防抖var timer = null // 1. 防抖动的 timer function debounceSearch(keywords) {

2022-02-21 17:14:17 1368

原创什么是跨域及解决跨域都有哪些方法？

1.同源策略浏览器为了隔离潜在的恶意文件，使用同源策略，限制从一个源加载的文档或脚本和另一个源的资源进行交互（不同源之间的文档，资源的交互）同源是指“协议+端口+域名”三者相同所谓同源（即指在同一个域）就是两个页面的协议（protocol），主机（host）和端口号（port）”三者相同，注意：跨域限制访问，其实是浏览器的限制。2.什么是跨域当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。.........

2022-02-21 10:56:13 3029

原创 call、apply和bind的区别及如何手写

三者的相同点：都是用来改变this的指向1.call()和apply()的区别：都是调用一个对象的一个方法，用另一个对象替换当前对象（功能相同）B.call(A, args1,args2);即A对象调用B对象的方法F.apply(G, arguments);即G对象应用F对象的方法相同点：第一个参数是this要指向的对象,当第一个参数为null、undefined时，默认指向window;不同点：apply()第二个参数是数组，call()是参数列表...

2022-02-18 15:01:34 409

原创 js三座大山原型原型链

1.原型eg class Student { constructor(name,score){ this.name = name; this.score =score; } introduce(){ console.log(`我是${this.name},分数${this.score}`) } } const student = new Student('张三',99) conso

2022-02-18 10:36:48 211

原创 js三座大山作用域闭包

1.什么是闭包能够读取其他函数内部变量的函数。2.js的作用域js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的；那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭包的本质就是在一个函数

2022-02-17 16:15:51 290

空空如也

空空如也