2023面试题汇总二

发布时间：2023-04-22 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

一、CSS面试题

1. 清除浮动的方式有哪些？

  1. 额外标签法(在最后一个浮动标签后，新加一个标签，给其设置clear: both; ) (不推荐)
  2. 父级添加overflow属性 (父元素添加overflow:hidden) (不推荐)
  3. 使用after伪元素清除浮动 (推荐使用)
.clear:after{
	content:''; display:block; 
	overflow:hidden; 
	visibility:hidden; 
	clear:both;
}
  1. 使用before 和 after 伪元素清除浮动

```javascript
.clearfix:after,.clearfix:before{
	content: "";
	display: table;
}
.clearfix:after{
	clear: both;
}
.clearfix{
	*zoom: 1;
}

2. position 几 个 属 性 的 作 用 ？

3. 在一个页面中给多个元素设置相同的 id, 会导致什么问题?

4. Less 是什么?

5. Scss 是什么?(sass)

6. Stylus 是什么?(.styl)

7. 写一个左中右布局占满屏幕, 其中左右两块固定宽度 200,中间自适应,要求先加载中间块, 请写出结构和样式？

*{
padding: 0;
margin: 0;
}
html,body{ heig
ht: 100%;
}
.center{ heigh
t: 100%;
background: #1FA363; 
margin:0 200px;
}
.left{
position: absolute; 
width: 200px; 
height: 100%;
left: 0;
top: 0;
background: #DC4C3F;
}
.right{
position: absolute; 
width: 200px; 
height: 100%;
right: 0;
top: 0;
background: #FFCE44;
}
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>

8. 页面编码和被请求的资源编码如果不一致如何处理？

<script src="http://www.xxx.com/test.js" charset="utf-8"></script>

9. 遇到过哪些移动端兼容性问题？

  1. 不同浏览器的最小字体不同，有的是10px，有的是12px。

解决办法：设置字体时，不要小于12px,如果一定要小于12px，使用transform:sacle( ) 进行缩放。

  1. 移动端文字实现两端对齐，使用text-align-last在ios会有兼容性问题。

使用text-align-last：justify; 在安卓上面表现没有问题，但是在ios上面不会对齐。
解决办法：在当前的元素后面添加一个after伪类，并给当前的元素设置行高为0，如下:

span {
	text-align: justify;
	text-align-last: justify;
	line-height: 0px;
	&::after {
		content: "";
		width: 100%;
		display: inline-block;
	}
}
  1. scrollTo(0,0)和scrollTop=0

苹果低版本的手机上不支持获取使用dom.scrollTo(0,0)，使用该方法会报错。 换言之，使用dom.scrollTop=0，就可以正常使用。

  1. 用position:absolute/fixed;把一个按钮固定在页面的底部，在android系统中，当调用输入法时，该按钮会被顶起。

解决办法：使用媒体查询@media screen and (max-width:400px){}当页面高度小于某一个值时，给元素一个top值，不同浏览器默认margin，padding不同。解决办法：*{margin:0;padding:0;}

  1. click事件延迟的问题。

移动端的点击事件都会有300ms延迟，是因为浏览器在等待你是否执行双击，但此延迟导致用户体验不好。 解决办法: 用script标签引入fastclick库去除延迟， 禁止缩放 user-scable=“no” 。

二、js面试题

1. 什么是原型对象?

2. 什么是原型链？

3. 什么是构造函数?

3. 常见的继承有哪些？

  1. 原型链继承
  2. 借用构造函数继承
  3. 组合继承
  4. 原型式继承
  5. class类实现继承

通过extends 和super实现继承

  1. 寄生式继承

4. this的指向有哪些？

  1. 普通函数中的this指向window
  2. 定时器中的this指向window
  3. 箭头函数中没有this，它的this指向取决于外部环境
  4. 事件中的this指向事件的调用者
  5. 构造函数中的this指向和原型对象中的this，都是指向构造函数new出来的实例对象
  6. 自执行函数中的this指向window

5. 什么是递归？

6. 你平时都用了哪些方法进行性能优化？

资源加载方面：
  1. 减少http的请求次数 具体方案, 代码合并(合并 css,js), 使用精灵图; 减少 http 请求数据量, 代码压缩(css,js,html), 合理设置缓存。
  2. 打包压缩的上线代码
  3. 使用懒加载
  4. 使用精灵图
  5. 动态渲染组件
  6. CDN加速
代码层面：
  1. 避免滥用全局变量, 减少作用域查找(能用局部变量就不要声明全局变量), 不要滥用闭包;
  2. 减少 DOM 操作, 操作 DOM 的时候对已经查找到的 DOM 对象进行缓存, 避免重复查找;
  3. 使用图片懒加载, 避免单次加载图片数量过多导致页面卡顿; 将script 标签写在页面底部, 因为 js 的加载会阻塞页面的渲染;
  4. 不要在本地书写大量 cookie, 因为 cookie 会伴随每一次 http 请求;

7. js的执行机制是怎么样的？

  1. 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
  2. 异步任务指的是，不进入主线程、而进入"任务队列”的任务，只有“任务队列"通知主线程某个异步任务可以执行了，该任务才会进入主线程执行。

8. 知道lodash吗? 它有哪些常见的API?

  1. .cloneDeep 深度拷贝
  2. .reject 根据条件去除某个元素
  3. .drop(array,[n=1])作用: 将 array 中的前 n 个元素去掉，然后返回剩余的部分

9. set和map是什么？

  1. set 是es6 提供的一种新的数据结构，它类似于数组，但是成员的值都是唯一的。
  2. map 是es6 提供的一种新的数据结构,它类似于对象，也是键值对的集合，但是键的范围不仅限于字符串，各种类型的值都可以当做键。也就是说，Object 结构提供了“字符串一值”的对应，Map 结构提供了”值一值”的对应，是一种更完善的 Hash 结构实现。如果你需要"键值对”的数据结构，Map 比 object更合适。

10. 简述以下es6中的类？

  1. 通过class 关键字创建类,类名我们还是习惯性定义首字母大写。
  2. 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象。
  3. constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数类也会自动生成这个函数
  4. 多个函数方法之间不需要添加逗号分隔。
  5. 生成实例 new不能省略。
  6. 语法规范,创建类 类名后面不要加小括号,生成实例 类名后面加小括号,构造函数不需要加function。
    （1）继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的。
    （2）继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近
    原则)。
    （3）如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用 父类的构造函数,super 必须在了类this之前调用。
  7. 时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用。
    （1）constructor中的this指向的是new出来的实例对象。
    （2）自定义的方法，一般也指向的new出来的实例对象。
    （3）绑定事件之后this指向的就是触发事件的事件源。
    （4）在ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象。

11. call、apply、bind三者的异同？

  1. call 经常做继承。
function fn(a,b,c){
        console.log(this,a+b+c); // this指向window
    }
    fn();
    fn.call(document,1,2,3);//call改变之后this指向document  
    //输出 #document 6   1,2,3是实参 结果相加为6
  1. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值。
function fn(a,b,c){
        console.log(this,a+b+c); 
    }
    fn();
    fn.apply(document,[1,2,3]);
  1. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向。
function fn(a,b,c){
    console.log(this,a+b+c); //window
}
let ff = fn.bind('小明',1,2,3); //手动调用一下

12. 列举和数组操作相关的方法

  1. push:将元素添加到数组的末尾, 返回值是数组长度
  2. pop:将数组最后一个元素弹出, 返回值是被弹出的元素
  3. unshift:在数组的开头插入一个元素,返回值是数组的长度
  4. shift:将数组第一个元素弹出,返回值是被弹出的元素
  5. splice(index,len):删除数组中指定元素
  6. concat:连接数组
  7. reverse: 翻转数组

13. 列举和字符串操相关的方法

  1. substr(start,len)/substring(start,end)： 截取字符串
  2. slice:从数组会字符串中截取一段
  3. indexOf/lastIndexOf:查找某一个字符是否存在于另外一个字符串中, 存在则返回索引, 不存在则返回-1;indexOf 是从前向后顺序查找;
  4. lastIndexOf:是从后向前查找
  5. replace:替换字符串特定的字符
  6. toUpperCase:将字符串转成大写
  7. toLowerCase:将字符串转成小写
  8. charAt:获取字符串中指定索引的字符

14. 例举 3 种强制类型转换和 2 种隐式类型转换？

  1. 强制转换：转化成字符串 toString() 、String() 、转换成数字 Number()、parseInt()、 parseFloat()。
  2. 隐式转换：转换成布尔类型 Boolean() 隐式拼接字符串，例子 var str = “” + - / % ===

15. 分别阐述 split()、slice()、splice()、join()？

  1. split 可以使用一个字符串切割另外一个字符串, 返回值是数组
  2. slice 可以从数组中截取一部分(字符串对象也有 slice 方法)
  3. splice(index,len)可以删除指定的数组元素;
  4. join 可以将数组元素使用特定的连接符拼接成字符串

15. 什么是预解析?

16. 使用js封装一个冒泡排序？

function sortBubble(arr){
for(var i=0;i<arr.length;i++){
	for(var j=0;j<arr.lengthi;j++){ if(arr[j]>arr[j+1]){
		var temp=arr[j]; 
		arr[j]=arr[j+1]; 
		arr[j+1]=temp;
		}
	}
}
return arr;

17. 使用 js 求 10000 以内的所有质数的和？

function getZs(num) {
	 var sum=0;
	for (var i = 2; i <= num; i++) {//4
		//假设所有的数都是质数
		var flag = true;
		//通过嵌套循环找到 i 除了 1 和本身以外所有可能出现的因子
		for (var j = 2; j < i; j++) {
			//判断 i 是否为质数
			if (i % j == 0) {//能进到当前的分支 说明不是质数
			flag = false;
		}
	}
		if (flag == true) { 
			console.log(i); 
			sum+=i;
		}
	}
	return sum;
}

18. 二维数组根据 num 的值进行升序排序？

var list = [
{
id: 32, num: 5
},
{
id: 28, num: 12
},
{
id: 23, num: 9
}]
// 实现过程
list.sort(function(a,b){ r
	eturn a.num-b.num;
})

19. Js 中 eval 的功能是什么? 缺点是什么?

20. 列举 DOM 元素增删改查的 API

  1. 创建 DOM: document.createElement();
  2. 查 找 DOM: document.getElementById(); document.getElementsByClassName(); document.getElementsByName(); document.querySelectorAll(); document.querySelector();
  3. 追加 DOM: parentDom.appendChild();
  4. 移除 DOM: parentDom.removeChild()。

21. BOM 中有哪些常用的对象?

location:
	location.href; 页面 url 地址
	location.hash; url 中#后的部分
	location.search; url 中?后的部分(查询字符串)
	location.reload(); 刷新页面; 
navigator:
	navigator.userAgent: 浏览器的 userAgent 信息
history:
	history.go(1);前进 1 步
	history.go(-1);后退 1 步;
	history.forward();前进
	history.back(); 后退
screen:
	screen.availWidth: 屏幕有效宽度
	screen.availHeight: 屏幕有效高度

22. 列举几个常见的浏览器兼容问题?

主流浏览器发送 ajax 使用 XMLHttpRequest 创建异步对象,
IE 浏览器时候用 XActive 创建异步对象;
主流浏览器注册事件
	addEventListener("eventType","handler","true|false"); 
	removeEventListner("eventType","handler","true|false");
IE 浏览器:
	注册事件:attachEvent( "eventType"，"handler") 
	移除事件:detachEvent("eventType"，"handler" ) 
	阻止事件冒泡:
	主流浏览器:event.stopPropagation()
	IE 浏览器:event.cancleBubble=true; 
获取事件源:
	主流浏览器: event.target
	IE 浏览器:event.srcElement

23. 请尽可能详尽的解释 ajax 的工作原理

  1. 第一步:创建一部对象 var xhr=new XMLHttpRequest()
  2. 第二步:设置请求行 xhr.open(‘请求方式’,请求地址);
  3. 第三步:发送请求 Get 方式 xhr.send(null)，如果是 post 请求还要设置请求头。
  4. 第四步:监听服务端的响应。
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded ');
xhr.send("name=zs&age=18");
//第四步:监听服务端的响应
xhr.onreadystatechange=function(){
	if(xhr.status==200&&xhr.readyState==4){
		// 获取 json
		var json=xhr.responseText&&JSON.parse(xhr.responseText)
		// 获取 xml
		var xml=xhr.responseXML; 
		console.log(json,xml)
	}
}

24. 什么是同步和异步, 那种执行方式更好?

25. 什么是 RESTful API?

补充说明:
动词通常就是五种 HTTP 方法，对应 CRUD 操作:
GET：读取（Read）
POST：新建（Create）
PUT：更新（Update）
PATCH：更新（Update），通常是部分更新
DELETE：删除（Delete）

26. 谈谈 async/await 的使用方式和场景

27. 箭头函数有什么作用及实际应用场景?

28. 谈谈对 Promise 的理解

29. break和continue和return的区别？

  1. break
    (1) break用于跳出一个循环体或者完全结束一个循环，不仅可以结束其所在的循环，还可以结束其外层循环。
    (2) 只能在循环体内和switch语句内使用break。
    (3) 不管是哪种循环只要一旦在循环体中遇到bre eak系统将完全结束循环，开始执行循环后的代码。
    (4)在switch语句中，满足某种条件就会跳出本层循环体。
  2. continue
    (1)continue:只是中止本次循环，然后开始下一次循环。
    (2)continue并没有使整个循环终止。
    (3)continue只能在循环语句中使用。for循环、 while循环、do…while循环中使用。
  3. return
    (1)return是结束一个方法。如果在循环体内执行一个return语句，return语句将会结束该方法，循环也会随之结束。

30. const 声明的变量不可以修改怎么理解？

三、网络

1. HTTP状态码分别代表什么意思？

2. 什么是SEO?

3. 什么是渐进增强和优雅降级?

  1. 渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）
  2. 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web 站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于 IE 独特的盒模型布局问题，针对不同版本的IE 的 hack 实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

4.什么是 CDN 加速?

5. 为什么利用多个域名来存储网站静态资源会更有效？

四、vue面试题

1. 移动端有哪些常见的问题？怎么解决的？

  1. H5页面窗口自动调整到设备宽度，并禁止用户缩放页面。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimumscale=1.0,maximum-scale=1.0,user-scalable=no">

2. 说说图片懒加载的原理?实际开发中用过哪些图片懒加载的插件?

3. 移动端点击事件会有多少秒的延时?什么原因造成的?如何解决?

4. Js 是如何实现异步操作的?

5. 分别介绍下 MVC, MVVM, MVP 这三种设计模式?

6. vue 中如何封装一个组件？

7. 说说 Vue 路由的使用步骤?

  1. 第一步:下载路由模块 vue-router。
  2. 第二步:创建路由对象。
  3. 第三步:配置路由规则。
  4. 第四步:将路由对象注册为 vue 实例对象的成员属性。

8. 谈谈对于 MVVM 的理解?

9. Vue 的生命周期?

  1. 创建阶段: 只执行一次。beforeCreate(开始进行一些数据和方法的初始化的操作, data 中的数据和 methods 中的方法还不能用),
    created(已经完成数据和方法的初始化, data 中的数据和 methods 中的方法可以使用了)。
  2. 挂在阶段：beforeMount(开始渲染虚拟 DOM)，mounted(已经完成了虚拟 DOM 的渲染, 可以操作 DOM 了, 只执行一次)。
  3. 运行阶段: 执行多次。beforeUpdate(data 中的数据即将被更新, 会执行多次)，updated(data 中的数据已经更新完毕, 会执行多次) 。
  4. 销毁阶段: 只执行一次，beforeDestroy(vue 实例即将销毁, 此时 data 中的数据和 methods 中的方法依然处于可用状态)。destroyed(vue 实例已经销毁, 此时 data 中的数据和 methods 中的方法已经不可用)。

10. Vue 中有几种路由模式?

11. Vue 路由导航守卫是什么, 以及应用场景？

  1. 全局前置守卫
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// from 从里来
// to 到哪里去
// next 是否要放行
})
  1. 全局后置钩子
router.afterEach((to, from) => {
// ...
})
  1. 路由独享守卫: 在声明路由的时候, 针对特定路由的钩子函数。
const router = new
VueRouter({ routes: [
	{
		path: '/foo', 
		component: Foo,
		beforeEnter: (to, from, next) => {
			// ...
		 }
	  }
	]
})

12. Vue 路由模块中$route 和$router 的区别?

1. $route 中存储的是跟路由相关的属性(如$route.params,$route.query) ;
2.$router中存储的是和路由相关的方法(如$router.push(),$router.go())。

13. vue 中 v-for 指令循环遍历中 key 属性的作用？

14. Vue 和 react 有哪些不同的地方?

  1. Vue 实现了双向数据绑定(数据<=>界面)。
  2. react 仅仅实现了单项数据流(数据层=>界面层)。
  3. vue 中提供了指令, react 中没有指令的概念。
  4. vue 中使用插值表达式在进行数据渲染, react 中使用 jsx 进行数据的渲染。

15. 列举 Vue 中常用的指令

  1. v-model:实现双向数据绑定;
  2. v- bind: 绑定属性;
  3. v-on:注册事件;
  4. v-html: 设置标签内容(允许内容 html)。
  5. v-text: 设置标签的内容(不允许包含 html) 。
  6. v-clack: 解决插值表达式闪烁问题。
  7. v-for: 循环遍历数组或对象。

16. Vue 中如何解决插值表达式闪烁问题?

  1. 使用 v-html 或 v-text 替代插值表达式;
  2. 使用 v-clack 解决插值表达式闪烁，第一步:声明属性选择器[v-clack]{display:none} ；第二步:在插值表达式所在标签添加属性 v-clack。

17. Vue 路由中如何实现通过锚点值的改变切换组件?

  1. 通过监听 hashchange 事件, 具体如下:
window.addEventListener('hashchange',function(){
   console.log('hash change');
});

18. Vue 中如何动态添加一个路由规则?

什么是路由懒加载? 路由懒加载有什么好处? 如何实现路由懒加载?

import Vue from 'vue';
import Router from 'vue-router';
// 异步导入组件
// 异步加载方式一
const List = resolve => require(['@/components/list'], resolve);
// 异步加载方式二
const Detail = () => import(/* webpackChunkName: "group-master" */ 
'@/components/detail')
Vue.use(Router);
export default new Router({
// 路由规则
routes:[
	{path:'/list',component:List},
	{path:'/detail',component:Detail}
],
// 路由模式: 默认 hash, 可选值 hash(如#/index)|history(/index)
mode:'history'
});

19. Vue 中有哪些内置的组件?

 <!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>
<!--tansition 动画组件的使用-->
<transition>
	<div v-if="ok">toggled content</div>
</transition>

20. vue 实例中有哪些属性?

  1. vm.$data 可以获取 vm 实例对象 data 中的数据;
  2. vm.$props 可以获取 vm 组件接收到的 props 对象数据;
  3. vm.$el 可以获取 vm 实例对象的根 dom 元素;
  4. vm.$refs 可以获取 vm 实例中注册过 ref 特性的所有 dom 元素和组件实例。

21. Vue.use(plugin)的作用是什么, 使用的时候需要注意什么问题?

22. vm.$nextTick(fn)的作用是什么?

<body>
<div id="app"><h1 ref="h1">{{title}}</h1></div>
</body>
<script>
	var vm = new 
	Vue({ el: '#app', 
		data: {
			title: '这是一个标题'
		}
	created: function () {
		 this.$nextTick(() => {
			// 在 created 里直接操作 ref 会报错
			this.$refs.h1.innerHTML = '这是更新以后的标题';
		});
	}
})

23. vue 中的混入(mixin)有什么作用?

24. 如何开发一个 vue 插件?

// 定义插件
const myPlugin={ install:(Vue,options)=>{
	// 1. 添加全局方法或属性
	Vue.myGlobalMethod = function () {
	// 逻辑...
}
// 2. 添加全局指令
Vue.directive('my-directive', {
	bind (el, binding, vnode, oldVnode) {
	// 逻辑...
	}
})
// 3. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
	// 逻辑...
}
// 4. 注入组件选项(混入) 
Vue.mixin({
	created: function () {
	}
})
// 5. 注册全局组件
Vue.component('myCompent',{ 
	template:'<h1>loading...</h1>'
	});
}
}
export default myPlugin;
// 调用插件
Vue.use(myPlugin,{})

25. 什么是 ssr? 如何实现 ssr?

26. 什么是虚拟 DOM, 使用虚拟 DOM 有什么优势?

27. 商城的购物车是怎么实现的?

28. 前后端分离的项目如何实现登录状态的保持?

29. 前后端分离开发的后台管理系统一般如何实现权限管理?

30. Vue 开发中如果由于某种特殊原因数据更新之后, 页面层没有同步更新, 该如何处理?

五、React面试题

1. 简单介绍下 react 中的 diff 算法?

// 创建对比函数
function updateChildren(vnode, newVnode) { 
	var children = vnode.children || []
	var newChildren = newVnode.children || []
	children.forEach(function (childrenVnode, index) {
	// 首先拿到对应新的节点
	var newChildVnode = newChildren[index]
	// 判断节点是否相同
	if (childrenVnode.tag === newChildVnode.tag) {
		// 如果相同执行递归，深度对比节点
		updateChilren(childrenVnode, newChildVnode)
	} else {
		// 如果不同则将旧的节点替换成新的节点
		repleaseNode(childrenVnode, newChildVnode)
	}
})
}
// 节点替换函数
function repleaseNode(vnode, newVnode) 
{ var elem = vnode.elem
var newEle = createElement(newVnode)
}

2. 什么是 Redux?

  1. store 存储数据的对象,必须通过 createStore 方法来创建;
  2. action 更新数据的规则, 必须有一个属性 state, 值必须是字符串;
  3. reducer 更新数据的函数, 需要传入 state 状态数据和 action 更新规则。在 react 中使用 redux 的时候, 一般会使用 react-redux 来简化使用步骤。

3. React 有哪些常用的组件库?

4. React 中如何操作 DOM?

5. 什么是高阶组件(HOC)?

6. React 中调用 setState 后发生了什么?

7. React 中状态 state 和属性 props 有什么不同?

8. React 中有几种创建组件的方式?

9. React 中的组件按照职责不同, 可以分为几种类型?

10. 类组件(Class component)和函数式组件(Functional component)之间有何不同?

11. 说说 react 的生命周期函数?

  1. 初始化阶段：getDefaultProps:获取实例的默认属性getInitialState:获取每个实例的初始化状态componentWillMount：组件即将被装载、渲染到页面上render:组件在这里生成虚拟的 DOM 节点componentDidMount:组件真正在被装载之后。
  2. 运行中状态：componentWillReceiveProps:组件将要接收到属性的时候调用shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）componentWillUpdate:组件即将更新不能修改属性和状态render:组件重新描绘componentDidUpdate:组件已经更新。
  3. 销毁阶段：componentWillUnmount:组件即将销毁。

12. react 性能优化可以使用哪个生命周期函数？

13. 应该在 React 组件的何处发起 Ajax 请求?

14. 自定义的 react 组件首字母为什必须要大写?

15. setState 什么时候是同步,什么时候是异步?

六、微信小程序开发？

1. 微信小程序目前有几种主流的开发模式?

  1. 微信官方：原生方式;
  2. 第三方公司：uni-app。

2. 简单介绍微信小程序的开发过程？

3. 简单描述微信小程序的生命周期?

七、Typescript 和 javascript 的区别?

1. Typescript 中有哪些数据类型?

2. Typescript 和 javascript 的区别?

八、代码版本控制工具

1. git 中有哪些常用的命令?

初始化仓库: git init
添加暂存区: git add 文件名
提交到本地仓库: git commit -m ‘注释‘
推送到远程仓库: git push 仓库地址 分支名称
拉取远程仓库代码: git pull
克隆仓库: git clone 仓库地址创
建分支: git branch 分支名称切
换分支: git checkout 分支名称查
看分支: git branch
合并分支: git merge 分支名称查
看日志: git log (git log --oneline)
查看所有日志: git reflog
版 本 回 退 : git reset --hard 版 本 号 (commit-id 可 以 通 过 git log
–oneline 获取)

2. git 和 svn 有什么不同?

3. 在线 Git 代码托管平台有哪些?

github(https://www.github.com),
gitlab(https://www.gitlab.com),
gitee(https://www.gitee.com),
coding(https://coding.net),
腾讯云开发者平台(https://dev.tencent.com),
bitbucket(https://bitbucket.org/product/)

标签 , ,