- 博客(70)
- 收藏
- 关注
RSS订阅原创 react 高频面试题
1、什么是虚拟DOM？ 虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。2、虚拟DOM实现的原理？1)虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象2)状态变更时，记录新树和旧树的差异3)最后把差异更新到真正的dom中3、类组件和函数组件之间的区别是啥？ 类组件可以使用其他特性，如状态 state 和生..
2021-11-30 01:40:14
432
原创 js十问
1.什么是闭包？2.什么是递归？3.什么是防抖？4.什么是节流？5.什么是原型链？6.什么是作用域链？7.什么是 eventloop?8.什么是es6?9.什么是内存泄露？10.什么是垃圾回收机制？
2021-11-27 12:28:29
370
原创 React-配合TS-创建新项目 ===
目录创建项目项目目录的变化tsconfig的介绍类型声明文件的使用说明使用场景类型声明-内置类型声明文件类型声明-第三方库的类型声明文件自带类型声明的不带类型声明的类型声明-自定义的文件项目内共享类型为已有 JS 文件提供类型声明如何基于现有的.js提供声明文件?类型声明文件的使用说明创建项目打开终端，执行命令npx create-react-app 项目名称 --template typescript说明：在.
2021-11-27 01:10:10
994
原创 TypeScript 进阶 ===
typeScript是什么？typeScript 简称 TS，是JavaScript 的 超集，JS有的，TS都有,并在JS基础上添加了 类型支持为什么TS要添加类型支持？js是 动态类的编辑语言，js在运行时才能发现错误ts是静态的编辑语言，ts在写代码时就会发现错误如何使用typeScript？安装包 npm i -g typescript使用步骤1，创建 ts文件2，在终端 使用 tsc 命令 将 ts文件编译成 js 文件3，执行 js 代码...
2021-11-27 00:56:21
312
原创 TypeScript 基本介绍 ===
typeScript是什么？typeScript 简称 TS，是JavaScript 的 超集，JS有的，TS都有,并在JS基础上添加了 类型支持为什么TS要添加类型支持？js是 动态类的编辑语言，js在运行时才能发现错误ts是静态的编辑语言，ts在写代码时就会发现错误如何使用typeScript？安装包 npm i -g typescript使用步骤1，创建 ts文件2，在终端 使用 tsc 命令 将 ts文件编译成 js 文件3，执行 js 代码...
2021-11-25 21:46:14
722
原创 react 项目打包优化 ===
目录项目打包项目本地预览打包体积分析生产环境优化路由懒加载去掉console配置CDN项目打包通过命令对项目进行打包 在项目根目录打开终端，输入打包命令：npm run build 等待打包完成，打包后的内容被放在项目根下的 build 文件夹中 项目本地预览在本地预览打包后的项目 全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务 在项目根目录中执行命令：.
2021-11-21 18:24:12
407
原创 [vue小知识] Vue父子组件生命周期函数执行顺序 ===
单个Vue组件的生命周期是按照上图流程进行运转的，但是父子组件之间生命周期钩子函数运行流程又是什么样子的呢？<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>组件事件流测试</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"&...
2021-11-19 22:25:10
395
原创 [vue小知识] 前端路由和单页面应用的实现 ===
什么是单页面应用 (SPA) ?用一个页面来实现多个页面的功能单页面应用的特点?地址栏的变化导致内容的变化，但是整个页面并不刷新它的好处是第一次获取到index.html这个页面之后，再也不需要请求其他的页面了，所有的功能操作都在这一个页面中完成。实现路由功能由两种方式： hash模式。它主要是监听浏览器的hashchange事件。 history模式。它主要是调用history的pushState,replaceState方法，监听popstate事件。
2021-11-19 22:06:32
380
原创 [vue小知识] Vue跳转路由时的传参方式 ===
1.通过query 传参 , 可以通过 path ,也可以通过命名路由 (name)获取: this.$route.query2.通过 params 传参 , 必须通过命名路由的方式传递 (name)获取: this.$route.params区别:1.params 传参 , 必须通过命名路由的方式传递2.params传参,不会显示在地址栏中,刷新会丢失 可以配合 localStorage 使用...
2021-11-19 21:52:31
100
原创 [vue小知识] key的作用 ===
React 路由介绍现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面） 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系 使用 React 路由简单来说就是：配置路径和组件（配对） ...
2021-11-19 21:38:37
396
原创 [vue小知识] 虚拟DOM
什么是虚拟DOM虚拟dom是相对于浏览器所渲染出来的真实dom而言的. 在vue和react技术出现之前,如果想要修改页面展示的内容,只能通过遍历查询DOM树的方式查找要修改的dom元素进行操作,从而达到更新ui的目的.这种方式相当消耗计算资源,因为每次查找DOM元素,几乎要遍历整棵DOM树,所以就建立了一个与DOM树相对应的虚拟DOM对象,简单理解就是javascript对象以对象嵌套的方法来表示DOM树的层级结构,那么每次DOM的更改就变成了js对象属性的增删改查,这样一来查找对象属性的方法
2021-11-19 16:31:34
731
原创 [vue小知识] 数据双向绑定的原理 ===
基本认知在vue2中,利用的是Object.defineProperty 去劫持对象的访问器(中的Getrer , Setter属性),当对象 属性值 发生变化时,可获取变化,然后根据变化来作后续响应;(它是一个一个的劫持,一次只能截取一个)在vue3中,则是通过 Proxy 代理对象进行类似的操作,劫持的是整个对象,只要对象中的属性变化了,都能劫持到Object.defineProperty 和 Proxy 的优缺点?Proxy1.可以直接监听整个对象,而非是对象的某个..
2021-11-19 14:00:24
359
原创 【react】 路由的基本使用 ===
React 路由介绍现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面） 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系 使用 React 路由简单来说就是：配置路径和组件（配对） ...
2021-11-18 21:37:57
627
原创 [react] redux - 中间件 和 redux调试工具
问题：获取数据时，如何发ajax拿数据，并保存到redux中？方案1：在业务组件中发请求，拿到数据之后，再dispath方案2：在业务组件中直接dispatch，在dispatch中发请求，然后保存redux。redux-中间件-理解中间件：middleware。用来在不损害原功能的前提下，引入额外的代码来拓展功能。Redux 中间件 中间：在 dispatch action 和 到达 reducer 之间 图示没有中间件： disp..
2021-11-15 19:16:18
637
原创 redux 优化 =＞ action creator 和 Action Type 的使用
action creator问题导入dispatch({type: 'book/add', payload: '三国演义'})dispatch({type: 'book/add', payload: '红楼梦'})一个action的type名字出现多次，多次dispatch会重复，不利于修改。解决方式补充一个action creator。 它是一个函数。 作用：用来创建指定类型的action。 入参：payload 返回值: action .
2021-11-15 18:32:14
271
原创 [ js小知识 ] 什么是纯函数? ===
纯函数是函数式编程中的概念，对于纯函数来说，相同的输入总是得到相同的输出var arr = [1,2,3,4,5]arr.slice(1,2)arr.splice(1,2)非纯函数var arr =[1,2,3,4]arr.splice(1,2) //[2, 3]arr.splice(1,2) //[4] 原则： 不得改写参数 不能调用 Date.now()或者 Math.random()等不纯的方法，因为每次会得到不一样的结果 不能..
2021-11-15 18:17:54
433
原创 [react] react-redux-基本使用 ===
目录ProvideruseSelectoruseDispatchreact-redux-Providerreact-redux-useSelector-useDispatchReducer 的分离与合并-思路Reducer 的分离与合并-实现使用react-redux简化redux在react项目中的使用步骤 安装 npmi react-redux 使用 按redux的要求，创建好store, reducer,action等等 从
2021-11-14 20:36:56
635
原创 [react] Redux基本介绍 ===
redux 是什么?Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。当遇到如下问题时，建议开始使用 Redux： 你有很多数据随时间而变化 你希望状态有一个唯一确定的来源 你发现将所有状态放在顶层组件中管理已不可维护 redux 和 react 的关系Redux并不只为react应用提供状态管理， 它还支持其它的框架。为什么Rect要用 ReduxReact 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整
2021-11-14 20:17:23
6340
2
原创 [react] hooks基础 =＞ useContext ===
useContext步骤共3步：1. 导入并调用createContext方法，得到Context对象，导出import { createContext } from 'react'export const Context = createContext()2. 使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据return ( <Context.Provider value={ 这里放要传递的数据 }> <根组件的内...
2021-11-13 23:08:28
539
原创 [react] hooks基础 =＞ useRef ===
使用 useRef 操作DOM使用场景：在 React 中进行 DOM 操作时，用来获取 DOM作用：返回一个带有 current 属性的可变对象，通过该对象就可以进行 DOM 操作了。const inputRef = useRef(null)解释： 参数：在获取 DOM 时，一般都设置为 null 返回值：包含 current 属性的对象。 注意：只要在 React 中进行 DOM 操作，都可以通过 useRef Hook 来获取 DOM（比如，获取 DOM.
2021-11-13 22:32:39
539
原创 [react] hooks基础 =＞useEffect ===
目录useEffect-基本使用useEffect-设置依赖项useEffect的完整格式useEffect数据持久化useEffect发送请求useEffect-副作用函数的返回值-清理副作用示例-模拟 类组件生命周期useEffect-清理副作用-案例自定义hooks理解副作用副作用（Side Effects；Adverse Reactions）系指应用治疗量的药物后所出现的治疗目的以外的药理作用事物的主要作用之外的，就是副作用。.
2021-11-13 15:20:53
665
1
原创 [react] hooks基础 =＞ useState ===
hooks是什么？Hooks：钩子、钓钩、钩住。是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。作用： 为函数组件提供状态、生命周期等原本 在Class 组件中才提供的功能 Hooks 只能在函数组件中使用 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性 Hooks 前后，组件开发模式的对比
2021-11-11 23:04:25
855
原创 json-server-安装及基本使用 和 RESTful接口
使用步骤全局安装json-server以前安装过的全局包：nodemon,nrm它是依赖于nodejs的第三方包，它是一个独立的工具，并不限于某个项目，可以全局安装。npm i json-server -g准备空文件夹在任意目录下，准备一个空文件夹创建json文件在文件夹中新建一个名为db.json文件(可改其它名称，注意名字是是英文）初始化结构在db.json文件中，按json格式的要求，去定义一个对象： 键值对格式 用双引号括起来 ..
2021-11-09 20:57:08
358
原创 react setState进阶 ===
问题导入export default class App extends Component { state = { n: 1 } hClick = () => { this.setState({n: 100}) console.log(this.state.n) // 1 console.log(document.getElementById('span').innerHTML) // 这会打印 1 } render
2021-11-09 20:42:57
381
2
原创 react 组件生命周期 ===
目录生命周期钩子函数react类组件的生命周期钩子函数-整体说明组件生命周期-挂载阶段组件生命周期-更新阶段更新阶段的钩子三种触发更新更新阶段能做的事情组件生命周期-卸载阶段生命周期生命周期：一个事物从创建到最后消亡经历的整个过程组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等钩子函数在生命周期的不同阶段，会自动被调用执行的函数，为开发
2021-11-09 20:05:29
336
1
原创 react 组件通讯 ===
定义，并默认导出组件import React, { Component } from 'react'export default class Com extends Component { render() { return <div>$2</div> }}导入组件import Com from './Com.js'render(<Com></Com>)注意:组件名采用大驼峰命名法 , 组件文件名与组件名一致...
2021-11-08 21:26:19
119
原创 js 转换时间格式 ===
formatDate = () => { const dt = new Date() const year = dt.getFullYear() const month = dt.getMonth() + 1 const date = dt.getDate() const hour = dt.getHours() const minute = dt.getMinutes() const second = dt.getSeconds(...
2021-11-08 19:30:49
111
原创 react 中 获取表单元素的值的两种思路
react 中如何获取表单元素（例如输入框）?初始代码class App extends React.Component { render() { return ( <div> <h1>如何获取input中的值</h1> <p><input type="text" /></p> <button>点击按钮</button> .
2021-11-07 21:58:30
3883
原创 react 中的 事件绑定-事件对象-事件处理 ===
为什么要做事件绑定让页面有交互； 修改数据以更新视图格式<元素 事件名1={ 事件处理函数1 } 事件名2={ 事件处理函数2 } ></元素>注意：React 事件名采用驼峰命名法，比如：onMouseEnter、onFocus、 onClick .....示例import React from 'react'import ReactDOM from 'react-dom'const title = <h1>react中的事件&l..
2021-11-07 16:43:57
220
原创 [vue小知识] watch、methods 和 computed 的区别?
1. 基本说明 1．computed 是计算属性的对象2．methods 是方法集合的对象3．watch 是监听数据变动的对象2. 三者的加载顺序 1. computed 是在 HTML DOM 加载后马上执行的，如赋值；2. methods 则必须要有一定的触发条件才能执行，如点击事件 3. watch 是用于观察 Vue 实例上的数据变动。 3. 默认加载的时候先 computed 再 watch，不执行 methods； 4. 当触发某...
2021-11-07 15:52:54
84
原创 [vue小知识] v-show 和 v-if 指令的共同点和不同点?
1. 相同点： v-show 和 v-if 都能控制元素的显示和隐藏。 2. 不同点： 实现本质方法不同 v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏 v-if 是动态的向 DOM 树内添加或者删除 DOM 元素3. 性能比较 v-show 只编译一次，后面其实就是控制 css，因此切换开销比较小，初始开销较大而 v-if 不停的销毁和创建,因此初始渲染开销较小，切换开销比较大4.适用场景如果要频繁切换...
2021-11-07 15:15:44
359
原创 react 组件介绍 ====
组件对特定功能的封装，主要用来对UI进行拆分。内容结构 HTML样式 CSS逻辑 JS特点 独立 可复用 可组合 分类 基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件 业务组件：由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框 区块组件：由基础组件组件和业务组件组合成的UI块 页面组件：展示给用户的最终页面，一般就是对应一个路由规则 React 组件的两
2021-11-07 11:42:32
400
原创 [vue小知识] Vue 生命周期总共分为几个阶段？
Vue 实例从创建到销毁的过程，就是生命周期。有8个常用的:1. beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2. created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 3. beforeMount 在
2021-11-06 21:24:51
932
原创 [vue小知识] Object.defineProperty 和 Proxy 的区别?
1. Proxy 的优势如下: 1. Proxy 可以直接监听对象而非属性； 2. Proxy 可以直接监听数组的变化； 3. Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、 has 等等是 Object.defineProperty 不具备的； 4. Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修...
2021-11-06 21:15:42
317
原创 [vue小知识] Vue 数据双向绑定的原理是什么?
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据 变化 第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化
2021-11-06 21:11:48
91
原创 [vue的小知识]mvvm 和 mvc 区别是什么？哪些场景适合？
1.MVVM 基本定义MVVM 即 Model-View-ViewModel 的简写。即模型-视图-视图模型。模型 （Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型 (ViewModel)是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)， 即将所看到的页面转
2021-11-06 20:55:12
156
原创 jsx 的 基本使用 ====
JSX是什么JSX：是 JavaScript XML的缩写 在 JS 代码中书写 XML 结构 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。 React用它来创建 UI（HTML）结构 理解：我们之前用html写页面，现在是用jsx来写页面jsx示例优势 采用类似于 HTML 的语法，降低了学习成本，会 HTML 就会 JSX
2021-11-05 23:07:53
264
原创 react 环境配置 - 引入eslint
目录目标思路使用步骤1.安装eslint插件2.安装eslint的包3. 在项目根目录，运行 npx eslint --init4. 设置vscode的自动保存格式化环境配置-引入prettier-now1.安装vscode插件prettier-now2. 补充配置目标在react项目中配置eslint，并启用保存自动格式化功能思路 在项目中安装eslint 用eslint的init命令创建eslint配置文件 设置..
2021-11-05 22:38:04
380
原创 前端之源二: React脚手架-从零开始创建项目====
脚手架create-react-app官方工具: create-react-app创建方式11.先全局安装脚手架工具包命令：npm i -g create-react-app2.用脚手架工具来创建项目命令：create-react-app 项目名称创建方式2直接使用npx来创建项目命令： npx create-react-app 项目名称解释： npx create-react-app 是固定命令，create-react-app 是 React .
2021-11-05 21:35:46
95
原创 vue - 打包优化
目录整体介绍路由懒加载什么是路由懒加载路由懒加载中的魔法注释包大小分析去掉 console-logwebpack配置排除打包整体分析打包瘦身引用网络资源具体配置-在生产环境时生效webpack配置externals配置项注入CDN配置到html模板整体小结:整体介绍项目开发完成打包 ： 用webpack做打包（把.vue, .js, .less -----------> .js, .css, .html） 在项目中都会
2021-11-04 23:32:28
308
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人