前端面试题总杠1

一：vue 面试题

1，vue使用的是什么模式？请具体介绍一下这种模式

答：渐进式开发，采用mvvm的模式

model (模型层) axios data vuex(state)

view (视图层) template < template>< /template>

viewmodel（传递者）是双向绑定实现的机制

延伸问题：什么是渐进式？Vue渐进式-先使用Vue的核心库，再根据你的需要的功能再去逐渐增加加相应的插件。（没有多做职责之外的事。）

2，数据渲染 有几种方式 有什么区别？**

答：{{}} == 等价于v-text

v-html:只有v-html可以渲染HTML代码

v-text

3,v-if和v-show有什么区别，切换时组件触发那些生命周期钩子函数？

v-if控制的是dom的销毁和创建
v-show只是控制dom的css中 display属性
触发的生命周期 v-if 显示：创建  挂载 隐藏：销毁
v-show显示隐藏不触发生命周期钩子函数

4，v-if和v-for为什么不建议混合使用

被渲染的dom会重复一个创建销毁的过程v-for的优先级比v-if高，
哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表会影响性能，所以，我们可以把他们改为计算属性：
computed：{
​
        activeClass:function(){
​
                this.users.filter(function(user)){
            
                        return user.isActive
                }
        }
}

5，vue中如何自定义指令（全局和局部）

全局的：参数一:指令调用的dom对象，参数二:指令对象，获取相应的传值信息

Vue.directive('color',function(ele,obj){
  if(obj.value%2==0){
      ele.style.backgroundColor='red';
  }else{
      ele.style.backgroundColor='blue';
  }
})

局部的：
directive:{
	color:function(ele,obj){
		ele.style.backgroundColor='red';
	}
}

问题延伸：自定义指令的钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
 <div id="app">     
		<p v-color="msg">{{msg}}</p>
		<p>
			<input type="text" v-model = "msg" name="">
        </p>
        <button @click='gai'>改值</button>
	</div>
	<script type="text/javascript">
		let vm = new Vue({
			el : '#app',
			data : {
				msg : "hello"
			},
            methods: {
                gai(){
                  this.msg='gaia'
                  console.log(99)
                }
            },
            directives:{
                color:{
                    bind: function (ele) {
                        console.log('sfref')
                        
                        ele.style.backgroundColor='red';
                    },
                    inserted: function (el) {
                        console.log('insetr')
                    },
                    update: function (el) {
                        console.log('update')
                        console.log(el.innerHTML)
                    },
                    unbind: function (el) {
                        console.log('unbind,销毁')
                    }
                }
            },
    
		});
	</script>

6，vue中常用的指令有哪些

V-text：主要用来更新textContent，可以等同于JS的text属性
V-html：双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
V-show：也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。
V-if：可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
V-else-if：充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
V-else：是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
V-on：主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。@
V-bind：用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
v-for：用v-for指令根据遍历数组来进行渲染
V-model：这个指令用于在表单上创建双向数据绑定
V-slot 插槽
V-pre：主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
V-cloak：这个指令是用来保持在元素上直到关联实例结束时进行编译。
V-once：v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

v-pre:

//跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑

<span v-pre>{{ this will not be compiled }}</span>显示的是{{ this will not be compiled }}
<span v-pre>{{msg}}</span>     即使data里面定义了msg这里仍然是显示的{{msg}}

v-cloak:

//当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。
//我们可以使用 v-cloak 指令来解决这一问题。(解决屏幕闪动问题)
<div id="app" v-cloak>
    {{context}}
</div>

v-once:

<div id="app">
		<p v-once>{{msg}}</p>  //msg不会改变,只会在页面加载的时候，加载，不会被更新
		<p>{{msg}}</p>
		<p>
			<input type="text" v-model = "msg" name="">
		</p>
	<button v-on:click="cha">Greet</button>
	</div>
	<script type="text/javascript">
		let vm = new Vue({
			el : '#app',
			data : {
				msg : "hello"
			},
				methods:{
				cha(){
					this.msg='asfsdfs'
				}
			}
		});
	</script>

7，计算属性和实例方法有什么区别？

答：计算属性有缓存，实例方法没有缓存
   计算属性调用时 total 不可以传参 实例方法调用时 total（）可以传参
   computed/methods

8，如何声明一个过滤器（全局的和局部的）

//过滤器，就是将数据被渲染到视图之前进行格式化处理，而不会修改作用域中原有的数据
//原则是：左值右量（变量也可以不写）
vue.filter(‘gettime’,function(date){
		Var time=new date(date)
		Return time.getFullyear()+’/’+time.getMonth()+1’/’+getDate()
})

filters:{
		Gettime(date){
			Var time=new date(date)
			Return time.getFullyear()+’/’+time.getMonth()+1’/’+getDate()
		}	
}

9,你用过那些v-model修饰符？

答：.lazy文本框失去焦点后在更新数据
    .trim清除前后空格的
	.number从字符中获取数字

10,你知道那些事件修饰符

答：.stop阻止事件冒泡
    .once只执行一次，一次性事件
	.self阻止事件冒泡和事件捕获
    .captrue事件捕获阶段触发
	.prevent阻止浏览器默认行为
	.native 触发原生事件

11,怎样声明全局组件，怎样使用全局组件

答：Vue.component（‘myHeader’,{
         Template:` <div>全局组件</div>`
	}）
	<my-header></my-header>

12,怎样声明局部组件，怎样使用局部组件

   答：声明成 ***.vue文件中模板在<template></template>中。
   Js模块化导出<script></script>
   css<style scoped></style>
   定义  import引入 注册components 调用

13,父子组件怎样实现通讯？

   答：父传子：父组件：<mydiv :list='list'> </mydiv>
	  子组件：props[‘list’]
	  子传父：子组件：this.$emit(‘子组件事件名’，参数)//打电话
      父组件：<mydiv @子组件事件名=‘父组件事件名’></mydiv>

14,非父子组件之间如何传递参数？

答：bus总线
   兄弟组件可以父传子 子传父 pass
   Vuex也可以实现数据共享(官方推荐使用vuex)
   sessionStorgey，

15，怎样使用props限定传递的数据，有哪些属性？

答：type //限定传递的数据类型
    Required:true false //是否必传
    Default:false //指定默认值
    // 自定义验证函数
    validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
     } 

16，解释VUE中单向数据流的概念

 答：子组件不可以直接修改父组件传过来的参数，如果直接修改会报错，只能声明成自己的才可以修改
     注：this.$parent.title，可以修改父组件传过来的值

17，vue有哪些插槽，如何使用

答：
默认插槽：能够接受组件外部传给组件大段的HTML代码 <slot></slot>
具名插槽：具有name属性的插槽 可以结合template标签的slot属性，定向给插槽传递内容
作用域插槽：插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。
		  原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。
		  slot-scope就相当于是一个对象，这个对象里面的数据就是子组件插槽绑定传上来了。

18，vue**中怎样实现组件之间的嵌套**

答：组件之间的嵌套使用，可以借助插槽，让插槽接受子组件中的内容

19，vue**中怎样操作dom**

答：ref=’name’
This.$refs.name

this.$refs

document.getbyid（）

20，vue怎样监听数据的变化，怎样监听一个对象属性的变化

答：watch,深度监听，deep:true

21，vue中生命周期钩子函数有哪些，请写出语法

答： 创建前beforeCreate       创建后created（请求axios）
	挂载前beforeMount        挂载后mounted（也可以请求axios）
	更新前beforeUpdate       更新后updated 
	销毁前beforeDestroy      销毁后destroyed 
	注：默认加载组件时候，会执行哪几个

22，挂载和创建之间的区别

答：创建之后只可以访问数据不可以操作dom
   挂载之后可以访问数据可以操作dom

23，keep-alive组件有什么作用？

 答：缓存组件缓存页面，动态组件，router-view等
    它提供了include与exclude两个属性，允许组件有条件地进行缓存。
    例如：
        <keep-alive>
       		 <router-view v-if="$route.meta.keepAlive"></router-view>
    	</keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      属性使用：
      
      只缓存组件别名name为a的组件
      <keep-alive include="a">
            <component></component>
       </keep-alive>
       
       除了name为a的组件，其他都缓存下来
       <keep-alive exclude="a">
            <component></component>
        </keep-alive>

24，vue.nextTick方法有什么用？

 答：数据更新是一个 异步操作异步dom更新后使用vue.nextTick可以立即得到更新后的 数据
    简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，
    注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。		          $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，
    
    Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
    2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它
    
    例如：
      created(){
            let that=this;
            that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
                that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
            });
          },
         

25，vue实现双向数据绑定的原理是什么？

答：当一个vue实例创建后vue会遍历data选项的属性，用object.defineProperty将他转化为getter或者setter，并且内部追踪相关依赖，在属性访问和修改时同时变化
每一个组件实例化都有相应的watcher程序实例，他会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时会通知watcher重新计算，从而使得它相关的组件的以更新
举例说明：
<body>
    <p id='p1'></p>
    <input type='text' id='input1' name='input1'>
</body>
<script>
    var p1 = document.getElementById('p1');
    var inpu1 = document.getElementById('input1');
    var obj = {
        name:'数据'
    }
    p1.innerHTML=obj.name
    inpu1.value=obj.name
    Object.defineProperty(obj,'name',{
        set:function(newdata){
            p1.innerHTML=newdata
            console.log('设置name')
        },
        get:function(newdata){
            console.log('获取name')
        }
    })
    input1.οnchange=function(){
        obj.name=inpu1.value
    }
</script>

26，什么是vue全局事件解绑？

在vue中，写在methods里面的方法，在页面切换时一般就自动销毁了，
但是写在window上的事件，需要我们手动解绑，也是为了提高代码执行效率，
使用生命周期函数Destroy，在页面离开时执行解绑，
或者有定时器，也需要在 bofordestroy销毁事件中销毁，清除

27，$set 方法有什么用？ 有什么特点？

$set是用于设置对象属性的。对于没有声明的属性,直接用赋值的方法,this.xxx= yyy,视图是不会更新的
使用$set ，视图才会更新
​
this.list.num = 888; //不生效
​
this.$set(this.list,'num','888')//
​
forEach(){
    obj['sex'] = 'NAN'
    
}
​

28，路由显示区域和路由跳转 分别是哪个组件？

答:显示：router-view   跳转 router-link <=> a  tag=“span”？ to=“path” **active-class**
 

29，路由中怎样传递和接收参数（单个 多个参数） window.localtion.href=""

30，active-class的作用

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；
使用方式：
1、直接在路由js文件中配置linkActiveClass
    export default new Router({
      linkActiveClass: 'active',
    })
2、在router-link中写入active-class
	<router-link to="/home" class="menu-home" active-class="active">首页</router-link>

31，vue-router有哪几种导航钩子 分别是什么？

答：
全局
	前置router. beforeEach
	后置router. afterEach
路由独享的
	前置beforeEnter
组件内
	beforeRouteEnter(to, from, next){
	//在渲染该组件的对应路由被confirm 前调用
	beforeRouteUpdate(to, from, next) {
		//在当前路由改变，但是依然渲染该组件是调用
	}，
	beforeRouteLeave(to, from ,next) {
		//导航离开该组件的对应路由时被调用
	}

32，路由懒加载怎么实现，有什么意义

答：let Addclass = resolve =>require([' @/views/Addclass' ] ，resolve )  

33，Vue项目性能优化?

代码减少对服务器请求次数** **减小对服务器** **请求代码的体积
v-if 和 v-show选择调用
为item设置唯一key值
减少watch的数据
全局事件解绑函数节流函数防抖
Keep- alive缓存
css精灵图字体图标
spa单页应用图片(数据)懒加载<!--使用前需先安装配置vue-lazyload-->
路由懒加载
Webpack打包压缩代码

34，vue路由模式有哪几种，怎样切换有什么区别

 答：hash,history
 (1 )在url显示: hash有# ; history 无#对seo比较友好
 (2)回车刷新: hash可以加载到hash值对应页面; history 一般就是404掉了
 (3 )支持版本: hash支持低版本浏览器和IE浏览器 ; history,HTML5新推出的API不支持ie低版本

35,vue组件中的data为什么必须是一个函数

答： 如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

36,$route和$router有什么区别

$route是路由信息对象”，包括path, params， hash， query， matched, name 等路由信息参数。

而$router是“路由实例"对象包括了路由的跳转方法，钩子函数等

37,vue如何兼容ie

插件 最低兼容得到ie9  babel-polyfill 
https://blog.csdn.net/XuM222222/article/details/81561890

38,V-on 是都可以监听多个方法 怎样 实现？

39,开发环境与生产环境的区分

//process.env.NODE_ENV 
if` `(process.env.NODE_ENV === ``"development"``) {
  ``alert(``"开发环境"``);
    baseurl = "https://www.baidu.com"
}``else` `{
  ``alert(``"生产环境"``);
    baseurl = "https://www.test.com"
}

40,什么情况会使用到vuex vuex有哪些核心的属性？

state => 基本数据 
getters => 从基本数据派生的数据 （Getter相当于vue中的computed计算属性）
mutations => 提交更改数据的方法，同步！ （commit）
actions => 像一个装饰器，包裹mutations，使之可以异步。 （dispath）
modules => 模块化Vuex

如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；

1, dataScrSetupFlag: true, //总数据总览总设置开关(设置一些开关等，到达一些样式变化的效果)

2，项目的产品的一些配置信息

3，userName: '', // 重置密码之后的 用户名密码 跳转登陆的时候填入

4，api接口路径：百度一下，你就知道

5,用户信息的存储(token),购物车数据的存储等

vue中axios的封装 - 火星黑洞 - 博客园

vue中axios的封装 - 小小公举 - 博客园

vuex的缺点：

vuex没有持久化存储的手段，每次刷新都会重置所有的数据

41，vue中key的作用

diff算法，使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
所以一句话，**key的作用主要是为了高效的更新虚拟DOM**。
另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，
否则vue只会替换其内部属性而不会触发过渡效果。

42，Diff算法 的运行机制？

概念: diff算法是一种优化手段，将前后两个模块进行差异对比，修补(更新)差异的过程叫做patch(打补丁)

通俗的讲，当前层级的dom 先进行对比，如果发现异同  就更新当前dom 和 它的子节点

<!--为什么vue,react这些框架中都会有diff算法呢? 我们都知道渲染真实dom的开销是很大的，这个跟性能优化中的重绘重排意义类似, 回到正题来, 有时候我们修改了页面中的某个数据，如果直接渲染到真实DOM中会引起整棵数的重绘重排, 那么我们能不能只让我们修改的数据映射到真实DOM, 做一个最少化重绘重排呢-->

注：Key值唯一  提高虚拟dom的对比效率
问：Key值的作用 为什么最好不要用index?？？
 Index 索引可以随着队列的操作发生变化 不利于虚拟dom之间的对比
 [
    [id:004,小李]     0
    [id:001,小明]     1
    [id:002,小红]     2
    [id:003,小花]     3
 ] 

总结

- 尽量不要跨层级的修改dom
- 在开发组件时，保持稳定的 DOM 结构会有助于性能的提升
- 设置key可以让diff更高效

43，axios

axios，是基于Promise的http库，用来实现浏览器请求服务器的工具	
 从浏览器中创建 XMLHttpRequests
 从 node.js 创建 http 请求
 支持 Promise API
 自动转换 JSON 数据 
 客户端支持防御 XSRF
#### axios 的语法
 get，请求的方式，如果表单请求，请使用post
 url，请求的文件地址
 then，请求成功时的回调函数
 catch，请求失败时的回调函数

44,axios 数据请求

post请求，需要qs序列化


当axios请求为post，表单提交时，header需要设置content-type为application/x-www-form-urlencoded，
放在body体的参数格式为
 requestbody
{
    name:xxx,
    age:xxx
}，
后台就接收不到参数
这时就需要将参数序列化，用qs序列化参数（qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.），qs.stringify(parmas),转完之后的格式为：formdata
 
name:xxx,
age:xxx

二：React 面试题

45，vue与React的异同

技术层面：》》》》

• Vue 生产力更高（更少的代码实现更强劲的功能）

• React 更 hack 技术占比比较重

• 两个框架的效率都采用了虚拟 DOM

  • 性能都差不多

• 组件化

  • Vue 支持

  • React 支持

• 数据绑定

  • 都支持数据驱动视图

  • Vue 支持表单控件双向数据绑定

  • React 不支持双向数据绑定

• 它们的核心库都很小，都是渐进式 JavaScript 库

• React 采用 JSX 语法来编写组件

• Vue 采用单文件组件

  • template

  • script

  • style

开发团队：》》》》

• React 由 Facebook 前端维护开发

• Vue

  • 早期只有尤雨溪一个人

  • 由于后来使用者越来越多，后来离职专职开发维护

  • 目前也有一个小团队在开发维护

社区：》》》》》

• React 社区比 Vue 更强大

• Vue 社区也很强大

Native APP 开发：》》》》

• React Native

  • 可以原生应用

• Weex

  • 阿里巴巴内部搞出来的一个东西，基于 Vue

46，react 生命周期函数

constructor ：创建
componentWillMount: 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过		                       this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个                     方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会                      被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

47，React组件的三大属性 及作用？

1，refs 操作dom

2，props 接受参数， 路由跳转，路由接收传参

3，state 组件声明自己的状态

48，React 父子组件之间怎样传递参数？

父传子 属性传递this. props.属性名接收

子传父  把父组 件的方法传给子组件子组件给父组件的方法传值//通过props打电话，触发组件标签上的方法传值

48，React 两个路由页面之间怎样传递参数？

1动态路由配置传参

配置： path=’/detail/:id’

传参 ： to=’/detail/100’

接收： this.props.match.params.id

2 js跳转传参

  this.props.history.push({ pathname : '/user' ,query : { day: 'Friday'} })

  this.props.location.query.day

3   通过state同query差不多，只是属性不一样，而且state传的参数是加密的

  this.props.history.push({ pathname:'/user',state:{day : 'Friday' } })

  this.props.location.state.day

49，redirect路由组件有什么作用？

路由重定向，实现路由的跳转可以模拟实现路由守卫的功能

50，react的展示组件，和容器组件的区别

如果我们把两个功能都放在同一个组件内，那么这个组件做的事情就太多了，考虑到组件复用和业务变更，让一个组件只专注做一件事，我们可以把这个组件拆分成多个组件，让每个组件只专注做一件事，所以就衍生了一种React常用的模式：容器组件和展示组件。

展示组件：
    关注UI层
    有自己等dom和样式
    没有自己的状态
    不关心数据是如何获取和变化的
    通过props接收数据和回调函数
    不依赖其他组件
    不需要生命周期函数

容器组件：
    提供数据
    关注业务处理
    与状态管理工具交互
    有自己的状态(state)
    几乎没有dom和样式

通俗的讲：展示组件，只负责展示，可以复用，容器组件，有数据请求，不能复用

51，类组件(Class component)和函数式组件(Functional component)之间有何不同

区别	函数组件	类组件
是否有this	没有	有
是否有生命周期	没有	有
是否有state	没有	有

52,状态(State) 和 属性(Props)

State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

个人理解：
State:是可变的，是一组用于反映组件UI变化的状态集合；
Props:对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。
      在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。

53,何为受控组件(controlled component)

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

54,当我们调用方法时 this指向问题怎样修正？

1，调用时候，bind（this）onClick={this.abc.bind(this)}
2，在constructer中初始化方法，this.abc=this.abc.bind（this）/onClick={this.abc}
3，箭头函数

56，Redux有哪些核心特性？

1，state 数据
2，action 下达命令（定义type，比如我要干啥）
3，reducer 操作数据的系统（根据type，更新state，比如根据action定义的找东西）
4，store 管理者（UI视图唯一数据来源（直接或间接），可以获取state，更新state，监听state变化，取消监听）
	store.getState() 获取当前state
	store.dispatch(action) 更新state
	store.subscribe(listener) store更新后回调listener

57，react diff 原理

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

三：小程序

58，简单描述一下微信小程序的相关文件类型

答:
WXML:(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统，可以构建出页面的结构，
      内部主要是微信自己定义的-套组件。
WXSS:(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式，
js : 逻辑处理，网络请求
json：配饰文件小程序设置，如页面注册，页面标题及tabBar注册组件。
	  项目启动文件app.json
      必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作
      为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程.序的window背景色，配置导航条	     样式，配置默认标题。

59,页面内部有什么参数传值的方法？

id ={{item.id}}或者data-xxxx={{item.index}}
获取： e.currentTarget.dataset.id 或者 e.currentTarget.dataset.xxxx

form表单获取值：
e.detail.value.xxxx

60，：小程序两个页面之间怎样传递和接受数据？

1，<navigator  url='/pages/test/test?id=111&name=张三' >跳转</navigator> 
   onLoad: function(datas) {
    console.log(datas);
   }
 2，使用全局数据存储
 const app = getApp()
 app.globalData.userid = 998888 /

61，小程序组件和组件之间怎样实现通讯？

组件的通信
父传子属性传递
属性必须在properties 里边进行声明
properties: {
    pdata:{
    	type:String
    }
},

子传父发送事件：triggerEvent
onTap: function () {
    var myEventDetail = {} // detail 对象，提供给事件监听函数
    var myEventOption = {} //触发事件的选项
    this . triggerEvent( 'myevent, myEventDetail, myEventOpt ion)
}

62，小程序如何阻止事件冒泡？

catchtap：catch`事件绑定可以阻止冒泡事件向上冒泡。

63，小程序路由

第一种方法：

小程序里面的链接使用navigator组件

<navigator url="http://www.baidu.com">跳转A</navigator> //跳转不成功
<navigator url='test/t' >跳转B</navigator>//跳转成功

第二个能正确跳转, 需要注意的是: url中的页面不能是tabBar(底部菜单)中的页面

但是如果open-type属性的值为switchTab, 则可以跳转到tabBar中的页面

open-type属性取值:

navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 redirect 对应 wx.redirectTo 的功能 switchTab 对应 wx.switchTab 的功能 reLaunch 对应 wx.reLaunch 的功能 1.1.0 navigateBack 对应 wx.navigateBack 的功能 1.1.0

第二种方法：api里面跳转

路由方式	触发时机
初始化	小程序打开的第一个页面
打开新页面	调用 API wx.navigateTo
页面重定向	调用 API wx.redirectTo
页面返回	调用 API wx.navigateBack
Tab 切换	调用 API wx.switchTab
重启动	调用 API wx.reLaunch

64，小程序开发的优势

1)容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本上没有大问题，当然如果
  了解ES6+CSS3则完全可以编写出即精简又动感的小程序;
2)基本上不需要考虑兼容性问题，只要微信可以正常运行的机器，就可以运行小程序;
3 ) 基本组件库已经比较齐全:Toast,Loading框,Picker,定位及地图,Image,Input,Checkbox,ext,TextAre-     SrollView.等常用的组件都有，而且使用也挺简单、方便;
4)发布、审核高效，基本上上午发布审核，下午就审核通过，升级简单，而且支持灰度发布;（灰度发布是对某一产品的发   布逐步扩大使用群体范围，也叫灰度放量）
5)微信官方提供使用人数、频率等数据统计，小程序is脚本执行错误日志; .
6)开发文档比较完善，开发社区比较活跃;
7)支持组件化开发，

65，小程序怎样做到自适应？

一般都以苹果6为基准
苹果6下1px=2rpx 用1:2去换算
Rpx是一个响应式的单位自动实现自适应

66，请谈谈小程序的双向绑定

//bindinput绑定事件，在js中通过this.setData实现
<input class=""  placeholder="添加数据" bindinput="getVal" value=""/> 
//js:
getVal(e){
    this.setData({
      val: e.detail.value
    })
  }

67，请谈谈小程序项目的生命周期函数？（三星一下）

onLoad()  页面加载时触发，只会调用一次。可获取当前页面路径中的参数。
Onshow()  页面显示/切入前台时触发，一般用来发送数据请求;
onReady() 页面初次渲染完成时触发，只会调用-次，代表页面已可和视图层进行交互
onHide()  页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等。
onUnload()页面卸载时触发，如redirectTo 或navigateBack到其他页面时。