学习记录wanxiaowan-CSDN博客

原创前端面试react题目5|react-router,编程式导航，路由传参，嵌套路由，404路由配置，useState

需求描述：自定义一个hook函数，实现获取滚动距离YsetY(h)})return [y]自定义hook函数，可以自动同步到本地LocalStoragemessage可以通过自定义传入默认初始值每次修改message数据的时候都会自动往本地同步一份// 每次只要message变化就会自动同步到本地ls。

2024-04-22 16:15:53 6

原创前端面试题目react6|mobx,todos综合案例redx.zustand,异步处理，列表渲染，单选实现，删除，全选，新增功能，开发环境搭建

一个可以和React良好配合的集中状态管理工具，和Redux解决的问题相似，都可以独立组件进行集中状态管理。

2024-04-22 16:11:01 87

原创前端react面试题目|4生命周期，hooks,useState.清理副作用挂载更新，卸载

一套能够使函数组件更强大，更灵活的“钩子”React体系里组件分为类组件和函数组件经过多年的实战，函数组件是一个更加匹配React的设计理念，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以使用有了hooks之后，不能在把函数成为无状态组件了，因为hooks为函数组件提供了状态。

2024-04-22 14:22:33 313

原创 react学习教程3|组件通信，props,context,render,子传父，兄弟组件实现，children,函数组件，props校验，兄弟组件，父传子子传父实现

了解为什么需要组件通信组件是独立且封闭的单元，默认情况下组件组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信。

2024-04-22 14:21:33 221

原创 React常见面试题目9w字|-8setState,jsx，严格模式，constructor,页面重新加载，ssr,jsx,遍历方式

修改数据通过this.setState(参数1,参数2)this.setState是一个异步函数参数1 : 是需要修改的数据是一个对象参数2 : 是一个回调函数，可以用来验证数据是否修改成功，同时可以获取到数据更新后的DOM结构等同于componentDidMountthis.setState中的第一个参数除了可以写成一个对象以外，还可以写成一个函数！

2024-04-22 14:20:39 4

原创 React常见面试题目9w字|-7|虚拟dom,React diff 算法的原理，key,组件命名，全局的dialog,数据持久化，react和vue的区别，设计思路，

从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。

2024-04-22 14:17:44 4

原创 React常见面试题目9w字|-6redux中阿进件，mobox,hooks，useEffectredux connect

Redux 的中间件提供的是位于 action 被发起之后，到达 reducer 之前的扩展点，换而言之，原本 view -→> action -> reducer -> store 的数据流加上中间件后变成了 view -> action -> middleware -> reducer -> store ，在这一环节可以做一些"副作用"的操作，如异步请求、打印日志等。applyMiddleware源码从applyMiddleware中可以看出∶。

2024-04-22 14:15:58 3

原创 React常见面试题目9w字|-5组件通信，路由redux,异步请求，props层级过深，非浅谈关系组件通信，跨层组件通信，属性传递

react-redux 数据传输∶ view–>action–>reducer–>store–>view。看下点击事件的数据是如何通过redux传到view上：●view 上的AddClick 事件通过mapDispatchToProps 把数据传到action —> click:()=>dispatch(ADD)●action 的ADD 传到reducer上●reducer传到store上 const store = createStore(reducer);

2024-04-22 14:15:21 3

原创 React常见面试题目9w字|-4|验证props,生命周期，state,props,性能优化，生命周期

React为我们提供了PropTypes以供验证使用。当我们向Props传入的数据无效（向Props传入的数据类型和验证的数据类型不符）就会在控制台发出警告信息。它可以避免随着应用越来越复杂从而出现的问题。并且，它还可以让程序变得更易读。当然，如果项目汇中使用了TypeScript，那么就可以不用PropTypes来校验，而使用TypeScript定义接口来校验props。

2024-04-22 14:13:07 3

原创 React常见面试题目9w字|-3setState调用原理，批量更新，setState和replace ,getDefaultProps,props,state,制度的，

this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React具有浓重的函数式编程的思想。提到函数式编程就要提一个概念：纯函数。它有几个特点：●给定相同的输入，总是返回相同的输出。●过程没有副作用。●不依赖外部状态。this.props就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入，页面显示的内容是一样的，并且不会产生副作用。

2024-04-22 14:12:24 4

原创 React常见面试题目9w字|-2|有状态组件，fragment,render访问refs，插槽，context,refs，类组件函数组件，render,组件对应的dom构造函数，

（1）受控组件在使用表单来收集用户输入时，例如等元素都要绑定一个change事件，当表单的状态发生变化，就会触发onChange事件，更新组件的state。这种组件在React中被称为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相对应，react通过这种方式消除了组件的局部状态，使整个状态可控。react官方推荐使用受控表单组件。受控组件更新state的流程：可以通过初始state中设置表单的默认值每当表单的值发生变化时，调用onChange事件处理器。

2024-04-22 14:11:41 3

原创 React常见面试题目9w字|-1，事件机制，高阶组件，react-fiber,Component,createClass,React rpops, componentWillReceivewpROP

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。

2024-04-22 14:10:27 62

原创前端react学习教程|2-函数组件的事件绑定，组件状态，表单处理，this问题说明，修改状态，类组件事件绑定，状态不可改变，

编写组件就是编写原生js类或者函数定义状态必须通过state实例属性的方法提供一个对象，名称就是固定的就叫做state修改state当中的任何属性都不可以直接赋值，必须通过setState方法，这个方法通过继承得到的这里的this关键词很容易出现指向错误的问题，上面的写法是最推荐，最规范的，没有this指向问题。

2024-04-21 00:47:13 4

原创前端react学习教程|-1jsx条件渲染，列表渲染，格式化配置，样式处理，脚手架创建项目，js表达式，

了解什么是React以及它的特点React是什么一个专注于构建用户界面的 JavaScript 库，和vue和angular并称前端三大框架，不夸张的说，react引领了很多新思想，世界范围内是最流行的js前端框架，最近发布了18版本，加入了很多新特性React英文文档（https://reactjs.org/）React中文文档（https://zh-hans.reactjs.org/）React新文档（https://beta.reactjs.org/）（开发中…）

2024-04-21 00:45:40 2

原创前端常见面试题目|6|react-uiredux理解，action,reducr,state,redux编写应用，react-redux,hooks,context,fragment,render p

父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）

2024-04-21 00:44:19 5

原创前端大厂常见面试题目|react|5-reacr ajax,axios,消息订阅发布机制，react-routerdom的api，基本路由使用，rdirct,antd，navlink,switch,

GET请求2）POST请求P65-配置多个代理，可以灵活的控制请求是否代理配置繁琐，前端请求资源的时候必须加前缀src配置代理App…获取用户的输入，连续解构赋值+重命名，corsjs searchjQuery发送请求容易产生毁掉低于axios请求地址:home/HomeHomeAbouot编写路由链接，路由链接引起路由的变化明确好界面的导航区，展示区导航区的a标签改为link标签pages明确导航区和展示区导航区的a标签改为link标签。

2024-04-21 00:42:45 3

原创前端常见面试题目|react,4,React应用,组件的组合使用，功能组件的组件化编码流程，react脚手架项目解构，

全局安装：npm i -g create-react-app，切换到想创项目的目录，使用命令：create-react-app hello-react，进入项目文件夹：cd hello-react，启动项目：npm startsrc ---- 源码文件夹App.css -------- App组件的样式App.test.js ---- 用于给App做测试index.css ------ 样式logo.svg ------- logo图。

2024-04-21 00:40:54 3

原创前端常见面试题目|react-3事件处理，收集表单数据，虚拟dom和dom diff的算法，组件的生命周期，理解，，

2.4.4. 事件处理通过onXxx属性指定事件处理函数(注意大小写)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)通过event.target得到发生事件的DOM元素对象2.5. 收集表单数据2.5.1. 效果需求: 定义一个包含表单的组件输入用户名密码后, 点击登录提示输入信息非受控组件<script type="text/babel"> //创建组件

2024-04-21 00:39:05 2

原创前端常见面试题目|react|2组件核心属性，state,props,refs,creatdRef,总结ref,渲染类组件的标签，

第2章：React面向组件编程2.1. 基本理解和使用2.1.1. 使用React开发者工具调试2.1.2. 效果函数式组件： <div id="test"></div>  <script type="text/javascript" src="../js/react.development.js"></script>

2024-04-21 00:37:48 2

原创前端常见面试题目|1vue基本原理，双向数据绑定，Object,defineProperty,MVVM，MVC，Computed,Watch,slot,过滤器，事件修饰符，v-iif,v-show,

可以。v-model 实际上是一个语法糖，如：实际上相当于：用在自定义组件上也是同理：</显然，custom-input 与父组件的交互如下：1父组件将searchText变量传入custom-input 组件，使用的 prop 名为value；2custom-input 组件向父组件传出名为input的事件，父组件将接收到的值赋值给searchText；

2024-04-21 00:36:14 2

原创前端常见面试题目|2nextTick,vue自定义指令，单页面应用，keep-alivedata为什么是一个函数而不是对象，mixin,子组件可以直接改变父组件的数据吗

在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。一般需要对DOM元素进行底层操作时使用，尽量只用来操作 DOM展示，不修改内部的值。当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新；如必须修改可以在自定义指令中使用keydown事件，在vue组件中使用 change事件，回调中修改vue数据;（1）自定义指令基本内容。

2024-04-21 00:34:00 2

原创前端常见面试题目|3vue收集依赖的，react和vue的区别，vue的优点，assets和static关系，delete,监听对象，mixin,模板编译，ssr,性能优化，spa,template,

●Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。●如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、方法等，则可以将其编写为 mixin，并在组件中简单的引用它。●然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。

2024-04-21 00:32:35 3

原创前端vue常见面试题目|4生命周期，hash,history区别，keep-alive,created,mounted,子组件和父组件调用顺序，

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程，称这是Vue的⽣命周期。开始创建，初始化数据，编译模板，挂载dom->渲染，更新-》渲染卸载1beforeCreate（创建前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。

2024-04-21 00:25:14 3

原创前端常见面试题目|5，vue-router,触发钩子函数的顺序，params,query,前端路由，vuex的属性，redux,严格模式，mutation,全局对象，触发钩子的顺序动态路由

（1）监听$route的变化（2）window.location.hash读取#值window.location.hash 的值可读可写，读取来判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。●route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数●route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数●rou

2024-04-21 00:24:10 2

原创前端面试题目vue6|vue3更新，虚拟dom,理解，使用解析过程，diff算法，composition,api,index作为keyproxy,mutation

使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中。

2024-04-21 00:22:32 2

原创 react前端常见面试题目|组件通信，组件间的关系，比较好的搭配方式，context,props,

父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）

2024-04-21 00:21:04 2

原创前端reacrt面试题目|jsx,基本概念，jsx,虚拟dom,模块，组件模块化

1react用于构建界面的javascript哭，是一个将数据渲染为html视图的开源javascript库原生的javascript操作dom繁琐，效率低（dom-api操作ui）2.使用javascript直接操作dom,浏览器会进行大量的重回重拍3.原生的js没有组件化的编码方案，代码复用率低。

2024-04-21 00:00:52 3

原创 coderwhy前端课堂笔记|vue教程|非父子组件的通信5|useTitle,useScrollPosition,defineProps() 和 defineEdefineExpose案例实战练习，

【代码】coderwhy前端课堂笔记|vue教程|非父子组件的通信5|useTitle,useScrollPosition,defineProps() 和 defineEdefineExpose案例实战练习，

2024-04-19 10:14:38 3

原创 coderwhy前端课堂笔记|vue教程|非父子组件的通信4|，toRefs,toRef ref的api,computed,生命周期钩子，provide函数，数据的响应式，inject函数，watch

◼ **如果在发生某些情况下，我们希望停止侦听，这个时候我们可以获取watchEffect的返回值函数，调用该函数即可。◼ **在前面我们讲解过计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理 **◼ **官方关于this有这样一段描述（这段描述是我给官方提交了PR之后的一段描述）： **◼ **其实在之前的这段描述是和源码有出入的（我向官方提交了PR，做出了描述的修改）： **◼ **如果我们希望侦听一个深层的侦听，那么依然需要设置 deep 为true： **

2024-04-19 10:13:14 3

原创 coderwhy前端课堂笔记|vue教程|非父子组件的通信3|options API。composition api,setup函数，reactive api.refapi .ref 自动解包，rea

 ref 会返回一个可变的响应式对象，该对象作为一个 **响应式的引用 **维护着它内部的值，这就是ref名称的来源；◼ **如果组件中的某些选项，是所有的组件都需要拥有的，那么这个时候我们可以使用全局的mixin： ** 当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散； 当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；

2024-04-19 10:11:08 5

原创 coderwhy前端课堂笔记|vue教程|非父子组件的通信2|动态组件，webpack代码分包，v-model,mixin,合并规则，缓存组件的生命周期,keep-alive,

 默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组。 所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js； 如果我们希望绑定更多，可以给v-model传入一个参数，那么这个参数的名称就是我们绑定属性的名称；◼ **如果Mixin对象中的选项和组件对象中的选项发生了冲突，那么Vue会如何操作呢？◼ **那么，为了我们的MyInput组件可以正常的工作，这个组件内的必须： **

2024-04-19 10:09:49 7

原创 coderwhy前端课堂笔记|vue教程|非父子组件的通信1|provide,inject,响应式数据，parent,root,切换组件案例，mitt事件取消，生命周期，

 这是因为当我们修改了names之后，之前在provide中引入的 this.names.length 本身并不是响应式的； 在这个过程中的某一个阶段，我们可能会想要添加一些属于自己的代码逻辑（比如组件创建完后就请求一些服务器数据）； 当然，这个computed是vue3的新特性，在后面我会专门讲解，这里大家可以先直接使用一下； 非常的简单，我们可以使用响应式的一些API来完成这些功能，比如说computed函数； 这里给大家留一个思考题，我们的this使用的是哪里的this？

2024-04-19 10:07:55 3

原创 coderwhy前端基础课程|vue教程|（5）前端路由Vue-Router,vuex状态管理库|pina状态管理，pinia和vue的区别，认识stor,定义stor,认识和定义stor,操作sta

 与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的仪式，提供了 Composition-API 风格的 API；◼ **Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近piña（西班牙语中的菠萝）的词； 一个 Store （如 Pinia）是一个实体，它会持有为绑定到你组件树的状态和业务逻辑，也就是保存了全局的状态；◼ **state 是 store 的核心部分，因为store是用来帮助我们管理状态的。

2024-04-19 00:31:24 4

原创 coderwhy前端基础课程|vue教程|（4）前端路由Vue-Router,vuex状态管理库|actions的基本使用，分发哦操作，辅助函数，异步操作，modul,局部函数，基本使用，命名空间，

 当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名； 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块；◼ **Action 通常是异步的，那么如何知道 action 什么时候结束呢？进行action的分发： **◼ **Action类似于mutation，不同在于： **◼ **这里有一个非常重要的参数context： **◼ **action也有对应的辅助函数： **

2024-04-19 00:21:59 4

原创 coderwhy前端基础课程|vue教程|（3）前端路由Vue-Router,vuex状态管理库|单一状态数，getters,mutation的基本使用，

 这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够通过一些工具帮助我们更好的管理应用的状态； 如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难；◼ **但是，如果我们有很多个状态都需要获取话，可以使用mapState的辅助函数： **◼ 一条重要的原则就是要记住 **mutation 必须是同步函数 **◼ **在setup中如果我们单个获取装是非常简单的： **◼ **在组件中使用store，我们按照如下的方式： **

2024-04-19 00:13:23 5

原创 coderwhy前端基础课程|vue教程|（2）前端路由Vue-Router,vuex状态管理库|vuex状态管理，页面前进后退，路由导航守卫，qury方式的参数，代码的页面调跳转

◼ **在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需 ****要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就 ****称之为是状态管理。**◼ **在前面我们是如何管理自己的状态呢？** 在Vue开发中，我们使用组件化的开发方式； 而在组件中我们定义data或者在setup中返回使用的数据，这些数据我们称之为state； 在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View；

2024-04-19 00:04:44 8 1

原创 coderwhy前端基础课程|vue教程|（1）前端路由Vue-Router,vuex状态管理库|vue-routr,路由的基本使用，history,路由懒加载，动态路由配置前端路由，

后端路由**： 当我们页面中需要请求不同的。

2024-04-18 23:52:10 2

原创 javascript面试前端面试题目(3)|ajax、axios、fetch的区别,原型和原型链，原型修改，addvntListener,闭包，作用域，执行上下文，forEach,map方法，

（1）AJAXAjax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。其缺点如下：●本身是针对MVC编程，不符合前端MVVM的浪潮。

2024-04-18 23:40:34 1

原创 javascript常见面试题目（2）|原生方法，Unicode、UTF-8、UTF-16、UTF-32，ajax,变量提升，尾调用，es6模块，DOM操作，ES6模块与CommonJS模块

DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。BOM的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。

2024-04-18 23:39:11 2

原创 javascript常见面试题目（1）|对象与数组的解构的理解，map,wakmap,objct,模板语法，rest参数，高度嵌套，正则表达式，json理解，脚本延迟加载

解构是 ES6 提供的一种新的提取数据的模式，这种模式能够从对象或数组里有针对性地拿到想要的数值。1）数组的解构最终，a、b、c分别被赋予了数组第0、1、2个索引位的值数组里的0、1、2索引位的元素值，精准地被映射到了左侧的第0、1、2个变量里去，这就是数组解构的工作模式。通过把中间位留空，可以顺利地把数组第一位和最后一位的值赋给 a、c 两个变量：2）对象的解构对象解构比数组结构稍微复杂一些，也更显强大。在解构对象时，是以属性的名称为匹配条件，来提取想要的数据的。

2024-04-18 21:54:46 1