前端面试题

页面渲染是个怎样的过程?
1.构建DOM树,代表所有DOM结点解析完毕,但是资源没有下载完毕
2.构建CSSTree
3.将前两个映射成渲染树renderTree
4.Layout页面布局
所以性能优化是尽量减少DOM操作,否则会经常的进行如上操作称作重排,极大的影响效率

使用flex布局实现盒子居中?
在弹性子元素上设置margin: auto,可以使得该弹性子元素在两个轴方向上完全居中。

移动web开发明显的兼容问题?
手机JQ、Zepto的click事件会有300ms延迟
解决办法,引入fastclick.js这个插件
IOS系统new Date不兼容
解决方法:var now = new Date(data.CurrentTime.replace(/-/g, “/”));
IOS非可点击按钮点击事件失效
加CSS: cursor:pointer,加一个手形状,这样点击就能检测到
IOS表单输入光标错位
产生原因 一个是设计的时候将表单设计在弹框内

去除button在ios上的默认样式
-webkit-appearance: none;
border-radius: 0 
不想让按钮touch时有蓝色的边框     -webkit-tap-highlight-color:rgba(0,0,0,0);

h5 c3有什么新特性



1.语义化标签

header、footer、aside、section、article、nav

2.表单输入类型

email、url、number、range、Date Pickers、search、color

3.表单属性

autocomplete、placeholder、form

4.视频音频

video、audio

5.画布

canvas

6.伸缩矢量图

svg

7.拖拽属性

draggable

8.事件

resize
input

9.地理定位

Geolocation

10.web存储

sessionStorage 和 localStorage

11.应用程序缓存 application cache

创建 chche manifest 文件

12.文件通讯协议

websocket

13.文件读取

fileReader



h5

CSS3
1.选择器

:nth-child()
:nth-of-type()
:checked
:disabled

2.盒模型

box-sizing

3.背景

background-image、background-size、background-origin

4.渐变

linear-gradient、radial-gradient

5.边框

border-radius、border-image

6.阴影

box-shadow、text-shadow

7.2D/3D转换

transform:translate rotate scale skew

8.过渡

transition

9.动画

keyframes、animation

10.弹性盒子

flex

11.媒体查询

@media

rem
rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。

css3的animation怎么写
animation属性:name规定名称

                   duration花费时间 

                   timing-function速度曲线:linear均速,ease 低快低,ease-in低开始,ease-out低结束,ease-in-out低开低完

                   delay动画开始前延迟几秒

                   iteration-count 播放次数:  n次数设置,infinite无限次

                  direction是否轮流反向播放

css3过渡
transition: width 2s;
div:hover{width:300px};
media如何设置max-width
@media (max-width:768px)
rem和em区别 vw和vh区别
rem是根元素字体大小的倍数
em不是相对于父元素的font-size,是相对于元素本身的font-size的倍数
大部分时候元素本身是没有font-size的,他是继承父元素的font-size
vw是屏幕的宽度 50vw是屏幕的一般
vh是屏幕可视范围的高度
rpx
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
flex弹性布局
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
有6个属性
flex-direction属性决定主轴的方向
row默认值 :主轴为水平方向,起点在左端
row-reverse : 主轴为水平方向,起点在右端
column : 主轴为垂直方向,起点在上沿
colum-reverse : 主轴为垂直方向,起点在下沿
flex-wrap
flex-flow
justify-content定义在主轴上的对齐方式
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items属性定义在交叉轴上怎么定义
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    align-content
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

Vue组件怎么注册
要注册一个全局组件,可以使用 Vue.component(tagName, options)。
Vue.component(‘my-component’, {
template: ‘A custom component!’
})

注册仅在其作用域中可用的组件:


    var Child = {
          template: '<div>A custom component!</div>'
    }

    new Vue({
          // ...
          components: {
            // <my-component> 将只在父组件模板中可用
        'my-component': Child
          }
    })

vue-router什么作用 为什么用?
Vue Router 是Vue官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。vue-router 默认 hash 模式,还有一种是history模式。
vue-router怎么配置
安装插件vue-router(挂载属性) ,如右侧代码:Vue.use(VueRouter);
建立相关路由文件夹,及相关路由文件(类如home.vue/about.vue文件)
留坑,在app.vue文件中留坑,如右侧代码:
两个以router开头的标签
router.link
router.view
vuex用来做什么的 为什么用
全局状态管理 Vuex 解决的主要问题是不同组件间的通信,以达到对当前页面数据状态的管理。
vue生命周期函数

beforeCreate    组件实例刚被创建
created        组件实例创建完成,属性已绑定,但DOM还未生成,$el属性还不存在
beforeMount        模板挂载之前
mounted        模板挂载之后
beforeUpdate    组件更新之前
updated        组件更新之后
activated        组件被激活时调用
deactivated        组件被移除时调用
beforeDestroy    组件销毁前调用
destroyed        组件销毁后调用

axios安装完成后怎么配置?
找到当前项目的main.js文件,输入:
import axios from ‘axios’
Vue.prototype.axios = axios
这时候还不能跨域请求,
在config下的index.js里输入:
proxyTable: {
‘/api’: { //使用”/api”来代替”http://f.apiplus.c”
target: ‘http://127.0.0.1:5000/’, //源地址
changeOrigin: true, //改变源 ,允许跨域
pathRewrite: {
‘^/api’: ” //路径重写
}
}

mvc和mvvm的区别?
1. Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。总结:在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信
MVC:
用户操作view, 用户操作View去改变Controller,Controller改变Model, Model再直接根据业务代码显示在View上。
优点是 当时极大程度降低了页面与逻辑的耦合性
缺点是 mvc的界面和逻辑关联紧密,数据直接从数据库读取
MVVM:
相当于MVC的升级版,因为双向绑定,真正做到了View与数据逻辑分离,用JS去实现界面的值与Model的关联。
缺点是 ViewModel会增多。

js字符串常见操作
1.获取类方法
(1) charAt()
stringObject.charAt(index)
charAt()方法可用来获取指定位置的字符串,index为字符串索引值,从0开始到string.leng – 1,若不在这个范围将返回一个空字符串。
(2) charCodeAt()
stringObject.charCodeAt(index)
charCodeAt()方法可返回指定位置的字符的Unicode编码。charCodeAt()方法与charAt()方法类似,都需要传入一个索引值作为参数,区别是前者返回指定位置的字符的编码,而后者返回的是字符子串。
(3) fromCharCode()
String.fromCharCode(numX,numX,…,numX)
fromCharCode()可接受一个或多个Unicode值,然后返回一个字符串。

2.查找类方法
(1) indexOf()
stringObject.indexOf(searchvalue,fromindex)
indexOf()用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数,searchvalue表示要查找的子字符串,fromindex表示查找的开始位置,省略的话则从开始位置进行检索。
(2) lastIndexOf()方法
stringObject.lastIndexOf(searchvalue,fromindex)
lastIndexOf()语法与indexOf()类似,它返回的是一个指定的子字符串值最后出现的位置,其检索顺序是从后向前。
(3) search()方法
stringObject.search(substr) 
stringObject.search(regexp)
search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置,如果没有匹配的,则返回-1。
(4) match()方法
stringObject.match(substr) 
stringObject.match(regexp)
match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
如果参数中传入的是子字符串或是没有进行全局匹配的正则表达式,那么match()方法会从开始位置执行一次匹配,如果没有匹配到结果,则返回null。否则则会返回一个数组,该数组的第0个元素存放的是匹配文本,除此之外,返回的数组还含有两个对象属性index和input,分别表示匹配文本的起始字符索引和stringObject 的引用(即原字符串)。

var str = ‘1a2b3c4d5e’;
console.log(str.match(‘h’)); //返回null
console.log(str.match(‘b’)); //返回[“b”, index: 3, input: “1a2b3c4d5e”]
console.log(str.match(/b/)); //返回[“b”, index: 3, input: “1a2b3c4d5e”]

如果参数传入的是具有全局匹配的正则表达式,那么match()从开始位置进行多次匹配,直到最后。如果没有匹配到结果,则返回null。否则则会返回一个数组,数组中存放所有符合要求的子字符串,并且没有index和input属性。

var str = ‘1a2b3c4d5e’;
console.log(str.match(/h/g)); //返回null
console.log(str.match(/\d/g)); //返回[“1”, “2”, “3”, “4”, “5”]

3.截取类方法

(1) substring()
stringObject.substring(start,end)
substring()是最常用到的字符串截取方法,它可以接收两个参数(参数不能为负值),分别是要截取的开始位置和结束位置,它将返回一个新的字符串,其内容是从start处到end-1处的所有字符。若结束参数(end)省略,则表示从start位置一直截取到最后。
(2) slice()
stringObject.slice(start,end)
slice()方法与substring()方法非常类似,它传入的两个参数也分别对应着开始位置和结束位置。而区别在于,slice()中的参数可以为负值,如果参数是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符。
(3) substr()
stringObject.substr(start,length)
substr()方法可在字符串中抽取从start下标开始的指定数目的字符。其返回值为一个字符串,包含从 stringObject的start(包括start所指的字符)处开始的length个字符。如果没有指定 length,那么返回的字符串包含从start到stringObject的结尾的字符。另外如果start为负数,则表示从字符串尾部开始算起。


4.其他方法
(1) replace()方法
stringObject.replace(regexp/substr,replacement)
replace()方法用来进行字符串替换操作,它可以接收两个参数,前者为被替换的子字符串(可以是正则),后者为用来替换的文本。

如果第一个参数传入的是子字符串或是没有进行全局匹配的正则表达式,那么replace()方法将只进行一次替换(即替换最前面的),返回经过一次替换后的结果字符串。

var str = ‘abcdeabcde’;
console.log(str.replace(‘a’, ‘A’));
console.log(str.replace(/a/, ‘A’));

如果第一个参数传入的全局匹配的正则表达式,那么replace()将会对符合条件的子字符串进行多次替换,最后返回经过多次替换的结果字符串。

var str = ‘abcdeabcdeABCDE’;
console.log(str.replace(/a/g, ‘A’)); //返回AbcdeAbcdeABCDE
console.log(str.replace(/a/gi, ‘$’)); //返回$bcde$bcde$BCDE
(2) split()方法
stringObject.split(separator,howmany)
split()方法用于把一个字符串分割成字符串数组。第一个参数separator表示分割位置(参考符),第二个参数howmany表示返回数组的允许最大长度(一般情况下不设置)。

(3) toLowerCase()和toUpperCase()
stringObject.toLowerCase() 
stringObject.toUpperCase()

toLowerCase()方法可以把字符串中的大写字母转换为小写,toUpperCase()方法可以把字符串中的小写字母转换为大写。

promise
Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。

vuejs 基础必备
1、active-class 是哪个组件的属性?嵌套路由怎么定义

  (1)、active-class 是 vue-router 模块的 router-link 组件的属性
  (2)、使用 children 定义嵌套路由

2、怎么定义 vue-router 的动态路由? 怎么获取传过来的值

  在 router 目录下的 index.js 文件中,对 path 属性加上 /:id。

  使用 router 对象的 params.id 获取

3、vue-router 有哪几种导航钩子?

  三种,

  (1)、全局导航钩子

    router.beforeEach(to, from, next),

    router.beforeResolve(to, from, next),

    router.afterEach(to, from ,next)

  (2)、组件内钩子
    
    beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

  (3)、单独路由独享组件

    beforeEnter

4、v-model 是什么?怎么使用? vue中标签怎么绑定事件

  v-model 可以实现双向绑定,

  绑定事件:

5、axios 是什么?怎么使用?描述使用它实现登录功能的流程

  axios 是请求后台资源的模块。 npm i axios -S

  如果发送的是跨域请求,需在配置文件中 config/index.js 进行配置

6、vuex 是什么?怎么使用?哪种功能场景使用它

  vuex 是专门为 vue 开发的数据状态管理模式。组件之间数据状态共享

  使用场景:音乐播放、登录状态、购物车

// 新建 store.js
import vue from ‘vue’
import vuex form ‘vuex’
vue.use(vuex)
export default new vuex.store({
//…rdhub.cn
})

//main.js
import store from ‘./store’

7、mvvm 框架是什么?它和其他框架(jquery) 的区别是什么?哪些场景适合

  mvvm 是 model + view + viewmodel 框架,通过 viewmodel 连接数据模型model 和 view

  区别:vue 是数据驱动,通过数据来显示视图层而不是节点操用

  场景:数据操作比较多的场景,更加快捷

8、自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

  全局定义指令:在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另一个是函数。

  组件内定义指令:directives

  钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)

  钩子函数参数: el、binding

9、说出至少 4 种 vue 当中的指令和它的用法

  v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)

10、vue-router 是什么?它有哪些组件

  vue-router 是 vue 的路由插件,

  组件:router-link router-view

11、vue 的双向绑定的原理是什么

  vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

  具体步骤:

  第一步:需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

  第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

  第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:

  1、在自身实例化时往属性订阅器(dep)里面添加自己

  2、自身必须有一个update()方法

  3、待属性变动dep.notice()通知时,能调用自身的 update() 方法,并触发Compile中绑定的回调,则功成身退。

  第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

12、请详细说下你对vue生命周期的理解

  总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。

  创建前/后

  在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。

  在created阶段,vue实例的数据对象data有了,$el还没有。

  载入前/后

  在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。

  在mounted阶段,vue实例挂载完成,data.message成功渲染。

  更新前/后

  当data变化时,会触发beforeUpdate和updated方法。

  销毁前/后

  在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

vuex 面试题
1、有哪几种属性

  有 5 种,分别是 state、getter、mutation、action、module

2、vuex 的 store 特性是什么

  (1) vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data

  (2) state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新

  (3) 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

3、 vuex 的 getter 特性是什么

  (1) getter 可以对 state 进行计算操作,它就是 store 的计算属性

  (2) 虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用

  (3) 如果一个状态只在一个组件内使用,是可以不用 getters

4、vuex 的 mutation 特性是什么

  action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态

  action 可以包含任意异步操作

5、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中

  如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里

  如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回

5、不用 vuex 会带来什么问题

  可维护性会下降,你要修改数据,你得维护3个地方

  可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的

  增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背

生命周期面试题
1、什么是 vue 生命周期

  vue 实例从创建到销毁的过程就是生命周期。

  也就是从开始创建、初始化数据、编译模板、挂在 dom -> 渲染、更新 -> 渲染、写在等一系列过程

2、vue生命周期的作用是什么

  生命周期中有多个事件钩子,让我们在控制整个 vue 实例的过程时更容易形成好的逻辑

3、vue生命周期总共有几个阶段

  8个阶段:创建前/后、载入前/后、更新前/后、销毁前/后

4、第一次页面加载会触发哪几个钩子

  第一次加载会触发 beforeCreate、created、beforeMount、mounted

5、DOM 渲染在哪个周期中就已经完成

  mounted

6、简述每个周期具体适合哪些场景

  生命周期钩子的一些使用方法:

  beforecreate : 可以在这加个loading事件,在加载实例时触发

  created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用

  mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数

  beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom
![image.png | left | 300×390]

React 中 keys 的作用是什么??????????
Keys 是 React 用于标识列表中哪些元素被修改、添加或者移除。

为什么虚拟 dom 会提高性能?(必考)????????
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用diff 算法避免了没有必要的 dom 操作,从而提高性能。
用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。

react diff 原理(常考,大厂必考)?????????
把树形结构按照层级分解,只比较同级元素。
给列表结构的每个单元添加唯一的 key 属性,方便比较。
React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)
合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

调用 setState 之后发生了什么?????????
调用 setState 函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。经过调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。

react 生命周期函数?????????????

初始化阶段:

getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount:组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后
运行中状态:

componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
销毁阶段:

componentWillUnmount:组件即将销毁

shouldComponentUpdate 是做什么的,(react 性能优化是哪个周期函数?)?????????
shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能,如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能。

React 中 refs 的作用是什么?????????
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回

简述 flux 思想???????
Flux 的最大特点,就是数据的”单向流动”。
用户访问 View
View 发出用户的 Action
Dispatcher 收到 Action,要求 Store 进行相应的更新
Store 更新后,发出一个”change”事件
View 收到”change”事件后,更新页面

了解 redux 么,说一下 redux 把????????
redux 是一个应用数据流框架,主要是解决了组件间状态共享的问题,主要有三个核心方法,action,store,reducer,工作流程是 view 调用 store 的 dispatch 接收 action 传入 store,reducer 进行 state 操作,view 通过 store 提供的 getState 获取最新的数据。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store,在 Flux 中 dispatcher 被用来传递数据到注册的回调事件,但是在 redux 中只能定义一个可更新状态的 store,redux 把 store 和 Dispatcher 合并,结构更加简单清晰
新增 state,对状态的管理更加明确,通过 redux,流程更加规范了,减少手动编码量,提高了编码效率,同时缺点时当数据更新时有时候组件不需要,但是也要重新绘制,有些影响效率。一般情况下,我们在构建多交互,多数据流的复杂项目应用时才会使用它们

redux 有什么缺点????????
一个组件所需要的数据,必须由父组件传过来,而不能像 flux 中直接从 store 取。

React 中有三种构建组件的方式??????
React.Component、ES6 class 和无状态函数。
React全家桶??????
(react+redux+react-router(v4)+react-router-redux(v5-alpah.6)+react-router-config(v1-beta.4))

react 组件的划分 业务组件技术组件?
根据组件的职责通常把组件分为 UI 组件和容器组件。
UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。
两者通过 React-Redux 提供 connect 方法联系起来。

应该在 React 组件的何处发起 Ajax 请求????????
在 React 组件中,应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行,在组件的生命周期中仅会执行一次。更重要的是,你不能保证在组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载的组件上调用 setState,这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
当一个组件相关数据更新时,即使父组件不需要用到这个组件,父组件还是会重新 render,可能会有效率影响,或者需要写复杂的 shouldComponentUpdate 进行判断。

(在构造函数中)调用 super(props) 的目的是什么???????
在 super() 被调用之前,子类是不能使用 this 的,在 ES2015 中,子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

何为高阶组件(higher order component)????
高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合,HOC 最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时,就应该考虑将代码重构为可重用的 HOC。

(组件的)状态(state)和属性(props)之间有何不同????????
State 是一种数据结构,用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。
Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

展示组件(Presentational component)和容器组件(Container component)之间有何不同???????????
展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态。
容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior),它们会调用 Flux actions,并将其作为回调提供给展示组件。容器组件经常是有状态的,因为它们是(其它组件的)数据源。

类组件(Class component)和函数式组件(Functional component)之间有何不同????????????
类组件不仅允许你使用更多额外的功能,如组件自身的状态和生命周期钩子,也能使组件直接访问 store 并维持状态
当组件仅是接收 props,并将组件自身渲染到页面时,该组件就是一个 ‘无状态组件(stateless component)’,可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

(组件的)状态(state)和属性(props)之间有何不同???????????
State 是一种数据结构,用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。
Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

何为受控组件(controlled component)????????????
在 HTML 中,类似 , 和 <select> 这样的表单元素会维护自身的状态,并基于用户的输入来更新。当用户提交表单时,前面提到的元素的值将随表单一起被发送。但在 React 中会有些不同,包含表单元素的组件将会在 state 中追踪输入的值,并且每次调用回调函数时,如 onChange 会更新 state,重新渲染组件。一个输入表单元素,它的值通过 React 的这种方式来控制,这样的元素就被称为”受控元素”。</p>

?什么是模块化:
是从代码的角度来进行分析的;把一些可复用的代码,抽离为单个的模块;便于项目的维护和开发;
什么是组件化:
是从 UI 界面的角度 来进行分析的;把一些可复用的UI元素,抽离为单独的组件;便于项目的维护和开发;
组件化的好处:
随着项目规模的增大,手里的组件越来越多;很方便就能把现有的组件,拼接为一个完整的页面;
Vue是如何实现组件化的: 通过 .vue 文件,来创建对应的组件;
template 结构
script 行为
style 样式
React如何实现组件化:
大家注意,React中有组件化的概念,但是,并没有像vue这样的组件模板文件;React中,一切都是以JS来表现的;因此要学习React,JS要合格;ES6 和 ES7 (async 和 await) 要会用;

虚拟DOM(Virtual Document Object Model) 文档对象模型
? DOM的本质是什么:浏览器中的概念,用JS对象来表示 页面上的元素,并提供了操作 DOM 对象的API;
什么是React中的虚拟DOM:是框架中的概念,是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套;
为什么要实现虚拟DOM(虚拟DOM的目的):为了实现页面中, DOM 元素的高效更新
DOM和虚拟DOM的区别:
DOM:浏览器中,提供的概念;用JS对象,表示页面上的元素,并提供了操作元素的API;
虚拟DOM:是框架中的概念;而是开发框架的程序员,手动用JS对象来模拟DOM元素和嵌套关系;
本质: 用JS对象,来模拟DOM元素和嵌套关系;
目的:就是为了实现页面元素的高效更新;
Diff算法
tree diff:新旧两棵DOM树,逐层对比的过程,就是 Tree Diff; 当整颗DOM逐层对比完毕,则所有需要被按需更新的元素,必然能够找到;
component diff:在进行Tree Diff的时候,每一层中,组件级别的对比,叫做 Component Diff;
如果对比前后,组件的类型相同,则暂时认为此组件不需要被更新;
如果对比前后,组件类型不同,则需要移除旧组件,创建新组件,并追加到页面上;
element diff:在进行组件对比的时候,如果两个组件类型相同,则需要进行 元素级别的对比,这叫做 Element Diff;

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持