前端面试题（框架部分）

Vue：
1、MVVM模式与MVC模式的区别
MVVM即Model-View-ViewModel。
它是将“数据模型数据双向绑定”的思想做为核心，所以在View和Model之间没有联系，经过ViewModel进行交互，并且Model和ViewModel之间的交互是双向的，所以视图的数据的变化会同时修改数据源，而数据源数据的变化也会当即反应到View上。
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦建立绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。 ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时做用域某个HTML元素上的，这个HTML元素能够是body，也能够是某个id所指代的元素。 DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面全部View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
MVC即Model-View-Controller
MVC是比较直观的架构模式，用户操做->View（负责接收用户的输入操做）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。
2、v-show与v-if的区别
条件渲染指令，与v-if不一样的是，不管v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值
3、如何让css只在当前组件中起做用

在每个vue组件中均可以定义各自的css，js，若是但愿组件内写的css只对当前组件起做用，只须要在style中写入scoped，即：
<style scoped></style>
4、指令keep-alive
在vue-router写着keep-alive，keep-alive的含义： 若是把切换出去的组件保留在内存中，能够保留它的状态或避免从新渲染。为此能够添加一个keep-alive指令
<component :is='curremtView' keep-alive></component>
5、Vue.js与其余框架的区别？
1.与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不一样点：
（1）.AngularJS的学习成本高，好比增长了Dependency Injection特性，而Vue.js自己提供的API都比较简单、直观。
（2）.在性能上，AngularJS依赖对数据作脏检查，因此Watcher越多越慢。
Vue.js使用基于依赖追踪的观察而且使用异步队列更新。全部的数据都是独立触发的。
（3）.vue中数据放在data对象里面，angular数据绑定在$scope上面
（4）.vue有组件化概念，angular中没有
2.与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，二者都须要编译后使用。
中心思想相同：一切都是组件，组件实例之间能够嵌套。
都提供合理的钩子函数，可让开发者定制化地去处理需求。
都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
在组件开发中都支持mixins的特性。
不一样点：
React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果作脏检查。
Vue.js在模板中提供了指令，过滤器等，能够很是方便，快捷地操做DOM。
参考：http://blog.csdn.net/haoshidai/article/details/52346865
6、Vue的双向数据绑定原理是什么？
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。

具体步骤：

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

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

第三步：Watcher订阅者是Observer和Compile之间通讯的桥梁，主要作的事情是:
一、在自身实例化时往属性订阅器(dep)里面添加本身
二、自身必须有一个update()方法
三、待属性变更dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
7、vue如何实现父子组件通讯，以及非父子组件通讯？
一、父子:
使用props：
props监听父组件传递过来的信息
传递过来后，可直接引用，就如已经传递过来数据塞到data
使用$refs:
this.$refs.XXX
二、子父:
自定义事件:
父组件能够在使用子组件的地方直接用 v-on 来监听子组件触发的事件
子组件$emit()触发，父组件$on()监听
使用$parent：
this.$parent.XXX
三、非父子:
简单场景用bus，复杂场景用vuex

<div id="app4">
<display></display>
<increment></increment>
</div>
<script>
var bus = new Vue();
Vue.component('increment', {
template: `<button @click="add">+</button>`,
data: function () {
return {count: 0}
},
methods: {
add: function () {
bus.$emit('inc', this.count+=1)
}
}
});
Vue.component('display', {
template: `<span>Clicked: <mark>{{c}}</mark> times</span>`,
data: function () {
return {c: 0}
},
created: function () {
var self=this;
// bus.$on('inc', function (num) {
// self.c = num
// });
bus.$on('inc', (num) =>
this.c = num
);
}
});
vm = new Vue({
el: "#app4",
})
</script>

8、vue响应式原理？
工做原理是当咱们把一个普通的JavaScript对象传给Vue 实例的data选项的时候，Vue会遍历此对象的全部属性，并使用Object.definePropert把这些属性所有转化为getter/setter。(Object.definePropert是仅ES5支持，且没有垫片脚本的特性，所以Vue不支持IE8及更低版本浏览器。）用户看不到getter/setter，可是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。每一个组件实例都有相应的watcher实例对象，它会在组件渲染的过程当中把属性记录为依赖，以后当依赖项的setter被调用时，会通知watcher从新计算，从而使它关联的组件得以更新。
9、vue-router相关
一、vue-router实现原理？
单页面应用(SPA)的核心之一是: 更新视图而不从新请求页面,
实现这一点主要是两种方式:
1.Hash: 经过改变hash值
2.History: 利用history对象新特性（详情可出门左拐见: http://www.cnblogs.com/yanze/p/7641774.html）

而在vue-router中，它提供mode参数来决定采用哪种方式，选择流程以下:
默认Hash-->若是浏览器支持History新特性改用History-->若是不在浏览器环境则使用abstract

基本方法分析:
Hash
1.push()
功能: 设置新的路由添加历史记录并更新视图,经常使用状况是直接点击切换视图
调用流程:
1 $router.push() //显式调用方法
2 HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录（window.location.hash= XXX）
3 History.transitionTo() //开始更新
4 History.updateRoute() //更新路由
5 {app._route= route}
6 vm.render() //更新视图

2.replace
功能: 替换当前路由并更新视图，经常使用状况是地址栏直接输入新地址
流程与push基本一致
但流程2变为替换当前hash （window.location.replace= XXX）不懂此方法的可见: http://www.w3school.com.cn/jsref/met_loc_replace.asp

3.监听地址栏变化
在setupListeners中监听hash变化(window.onhashchange)并调用replace

History
1.push
与hash模式相似，只是将window.hash改成history.pushState
2.replace
与hash模式相似，只是将window.replace改成history.replaceState
3.监听地址变化
在HTML5History的构造函数中监听popState（window.onpopstate）

两种模式对比
History模式的优势:
1.History模式的地址栏更美观。。。
2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL（可为不一样的html文件），而hash只能是同一文档
3.History模式的pushState、replaceState参数中的state可为js对象，能携带更多数据
4.History模式的pushState、replaceState参数中的title能携带字符串数据（固然，部分浏览器，例如firefox不支持title，通常title设为null，不建议使用）
缺点:
对于单页面应用来讲，理想的场景是仅仅在进入应用时加载页面（例如index.html）,后续的网络操做靠ajax完成，
而不会从新请求页面。
但当用户直接在用户栏输入地址时则会从新请求，当地址带有参数时二者状况不同
Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值，因此请求的仍然是 xxx.com,没有问题
History 例如: xxx.com/id=5 这时请求的即是xxx.com/id=5，如后端没有配置对应id=XXX的路由处理，则会返回404错误。
二、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id
三、vue-router有哪几种导航钩子？
三种，一种是全局导航钩子：router.beforeEach(to,from,next)，做用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件
四、vue-router是什么？它有哪些组件？
vue用来写路由一个插件。router-link、router-view
五、导航钩子有哪些？它们有哪些参数？
导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数：有to（去的那个路由）、from（离开的路由）、next（必定要用这个函数才能去到下一个路由，若是不用就拦截）最经常使用就这几种
10、scss是什么？安装使用的步骤是？有哪几大特性？
预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader
有哪几大特性:
一、能够用变量，例如（$变量名称=值）；
二、能够用混合器，例如（）
三、能够嵌套
11、vuex相关
一、vuex是什么？怎么使用？哪一种功能场景使用它？
vue框架中状态管理。
在main.js引入store，注入。新建了一个目录store，….. export 。
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
场景有：单页应用中，组件之间的状态。音乐播放、登陆状态、加入购物车
二、vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、 Module

三、vuex的State特性是？
1、Vuex就是一个仓库，仓库里面放了不少对象。其中state就是数据源存放地，对应于与通常Vue对象里面的data
2、state里面存放的数据是响应式的，Vue组件从store中读取数据，如果store中的数据发生改变，依赖这个数据的组件也会发生更新
3、它经过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

四、vuex的Getter特性是？
1、getters 能够对State进行计算操做，它就是Store的计算属性
2、 虽然在组件内也能够作计算属性，可是getters 能够在多组件之间复用
3、 若是一个状态只在一个组件内使用，是能够不用getters

五、vuex的Mutation特性是？
1、Action 相似于 mutation，不一样在于：
2、Action 提交的是 mutation，而不是直接变动状态。
3、Action 能够包含任意异步操做

六、Vue.js中ajax请求代码应该写在组件的methods中仍是vuex的actions中？
1、若是请求来的数据是否是要被其余组件公用，仅仅在请求的组件内使用，就不须要放入vuex 的state里。
2、若是被其余地方复用，这个很大概率上是须要的，若是须要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。若是不要复用这个请求，那么直接写在vue文件里很方便。

七、不用Vuex会带来什么问题？
1、可维护性会降低，你要想修改数据，你得维护三个地方
2、可读性会降低，由于一个组件里的数据，你根本就看不出来是从哪来的
3、增长耦合，大量的上传派发，会让耦合性大大的增长，原本Vue用Component就是为了减小耦合，如今这么用，和组件化的初衷相背。
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结构依然存在
二、什么是vue生命周期？
Vue 实例从建立到销毁的过程，就是生命周期。也就是从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，咱们称这是 Vue 的生命周期。
三、vue生命周期的做用是什么？
它的生命周期中有多个事件钩子，让咱们在控制整个Vue实例的过程时更容易造成好的逻辑。

四、vue生命周期总共有几个阶段？
它能够总共分为8个阶段：建立前/后, 载入前/后,更新前/后,销毁前/销毁后

五、第一次页面加载会触发哪几个钩子？
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

六、DOM 渲染在 哪一个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了。

七、简单描述每一个周期具体适合哪些场景？
答：生命周期钩子的一些使用方法： beforecreate : 能够在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 若是对数据统一处理，在这里写上相应函数 beforeDestroy : 能够作一个确认中止事件的确认框 nextTick : 更新数据后当即操做dom
十3、请说下封装 vue 组件的过程？
首先，组件能够提高整个项目的开发效率。可以把页面抽象成多个相对独立的模块，解决了咱们传统项目开发：效率低、难维护、复用性等问题。
而后，使用Vue.extend方法建立一个组件，而后使用Vue.component方法注册组件。子组件须要数据，能够在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。能够采用emit方法。
十4、vue-loader是什么？使用它的用途有哪些？
解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：js能够写es六、style样式能够scss或less、template能够加jade等
十5、你对Vue.js的template编译的理解？
简而言之，就是先转化成AST树，再获得的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
首先，经过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以建立编译器的。另外compile还负责合并option。
而后，AST会通过generate（将AST语法树转化成render funtion字符串的过程）获得render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

React:
1、当你调用setState的时候，发生了什么？
当调用 setState 时，React会作的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您能够将其视为 UI 的对象表示）。
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）。
经过这样作， React 将会知道发生的确切变化，而且经过了解发生什么变化，只需在绝对必要的状况下进行更新便可最小化 UI 的占用空间。
2、在 React 当中 Element 和 Component 有何区别？
简单地说，一个 React element 描述了你想在屏幕上看到什么。换个说法就是，一个 React element 是一些 UI 的对象表示。
一个 React Component 是一个函数或一个类，它能够接受输入并返回一个 React element t（一般是经过 JSX ，它被转化成一个 createElement 调用）。
3、何时在功能组件( Class Component )上使用类组件( Functional Component )？
若是您的组件具备状态( state )或生命周期方法，请使用 Class 组件。不然，使用功能组件
4、什么是 React 的 refs ，为何它们很重要？
refs就像是一个逃生舱口，容许您直接访问DOM元素或组件实例。为了使用它们，您能够向组件添加一个 ref 属性，该属性的值是一个回调函数，它将接收底层的 DOM 元素或组件的已挂接实例，做为其第一个参数。

class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}

以上注意到咱们的输入字段有一个 ref 属性，其值是一个函数。该函数接收咱们而后放在实例上的实际的 DOM 元素，以便在 handleSubmit 函数内部访问它。常常误解的是，您须要使用类组件才能使用 ref ，但 ref 也能够经过利用 JavaScript 中的 闭包 与 功能组件( functional components )一块儿使用。

function CustomForm ({handleSubmit}) {
let inputElement
return (
<form onSubmit={() => handleSubmit(inputElement.value)}>
<input
type='text'
ref={(input) => inputElement = input} />
<button type='submit'>Submit</button>
</form>
)
}

5、React 中的keys是什么，为何它们很重要？
keys是什么帮助 React 跟踪哪些项目已更改、添加或从列表中删除。

return (
<ul>
{this.state.todoItems.map(({task, uid}) => {
return <li key={uid}>{task}</li>
})}
</ul>
)
}

每一个 keys 在兄弟元素之间是独一无二的。咱们已经谈过几回关于和解（reconciliation）的过程，并且这个和解过程（reconciliation）中的一部分正在执行一个新的元素树与最前一个的差别。keys 使处理列表时更加高效，由于 React 可使用子元素上的 keys 快速知道元素是新的仍是在比较树时才被移动。

并且 keys 不只使这个过程更有效率，并且没有 keys ，React 不知道哪一个本地状态对应于移动中的哪一个项目。因此当你 map 的时候，不要忽略了 keys 。
6、受控组件( controlled component )与不受控制的组件( uncontrolled component )有什么区别？
React 的很大一部分是这样的想法，即组件负责控制和管理本身的状态。

当咱们将 native HTML 表单元素（ input, select, textarea 等）投入到组合中时会发生什么？咱们是否应该使用 React 做为“单一的真理来源”，就像咱们习惯使用React同样？ 或者咱们是否容许表单数据存在 DOM 中，就像咱们习惯使用HTML表单元素同样？ 这两个问题是受控（controlled） VS 不受控制（uncontrolled）组件的核心。

受控组件是React控制的组件，也是表单数据的惟一真理来源。

以下所示， username 不存在于 DOM 中，而是以咱们的组件状态存在。每当咱们想要更新 username 时，咱们就像之前同样调用setState。

class ControlledForm extends Component {
state = {
username: ''
}
updateUsername = (e) => {
this.setState({
username: e.target.value,
})
}
handleSubmit = () => {}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
value={this.state.username}
onChange={this.updateUsername} />
<button type='submit'>Submit</button>
</form>
)
}
}

不受控制( uncontrolled component )的组件是您的表单数据由 DOM 处理，而不是您的 React 组件。

咱们使用 refs 来完成这个。

class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}

虽然不受控制的组件一般更容易实现，由于您只需使用引用从DOM获取值，可是一般建议您经过不受控制的组件来支持受控组件。

主要缘由是受控组件 支持即时字段验证 ，容许您有条件地禁用/启用按钮，强制输入格式
7、在哪一个生命周期事件中你会发出 AJAX 请求，为何？

AJAX 请求应该在 componentDidMount 生命周期事件中。 有几个缘由:

Fiber，是下一次实施React的和解算法，将有能力根据须要启动和中止渲染，以得到性能优点。其中一个取舍之一是 componentWillMount ，而在其余的生命周期事件中出发 AJAX 请求，将是具备 “非肯定性的”。 这意味着 React 能够在须要时感受到不一样的时间开始调用 componentWillMount。这显然是AJAX请求的很差的方式。
-您不能保证在组件挂载以前，AJAX请求将没法 resolve。若是这样作，那意味着你会尝试在一个未挂载的组件上设置 StState，这不只不会起做用，反而会对你大喊大叫。 在 componentDidMount 中执行 AJAX 将保证至少有一个要更新的组件。
8、shouldComponentUpdate 应该作什么，为何它很重要？
在生命周期方法 shouldComponentUpdate 中，容许咱们选择退出某些组件（和他们的子组件）的 reconciliation 过程。

咱们为何要这样作？

如上所述，“和解（ reconciliation ）的最终目标是以最有效的方式，根据新的状态更新用户界面”。若是咱们知道咱们的用户界面（UI）的某一部分不会改变，那么没有理由让 React 很麻烦地试图去弄清楚它是否应该渲染。经过从 shouldComponentUpdate 返回 false，React 将假定当前组件及其全部子组件将保持与当前组件相同。
9、您如何告诉React 构建（build）生产模式，该作什么？
一般，您将使用Webpack的 DefinePlugin 方法将 NODE_ENV 设置为 production。这将剥离像 propType 验证和额外的警告。除此以外，还有一个好主意，能够减小你的代码，由于React使用 Uglify 的 dead-code 来消除开发代码和注释，这将大大减小你的包的大小。

为何要使用 React.Children.map（props.children，（）=>） 而不是 props.children.map（（）=>）

由于不能保证props.children将是一个数组。

以此代码为例，

<Parent>
<h1>Welcome.</h1>
</Parent>
在父组件内部，若是咱们尝试使用 props.children.map 映射孩子，则会抛出错误，由于 props.children 是一个对象，而不是一个数组。

若是有多个子元素，React 只会使props.children成为一个数组。就像下面这样：

<Parent>
<h1>Welcome.</h1>
<h2>props.children will now be an array</h2>
</Parent>
这就是为何你喜欢 React.Children.map ，由于它的实现考虑到 props.children 多是一个数组或一个对象。
10、概述下 React 中的事件处理逻辑

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差别，保证了行为的一致性。另外有意思的是，React 并无直接将事件附着到子元素上，而是以单一事件监听器的方式将全部的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不须要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。
11、createElement 与 cloneElement 的区别是什么？
createElement 函数是 JSX 编译以后使用的建立 React Element 的函数，而 cloneElement 则是用于复制某个元素并传入新的 Props。
12、传入 setState 函数的第二个参数的做用是什么？
该函数会在setState函数调用完成而且组件开始重渲染的时候被调用，咱们能够用该函数来监听渲染是否完成：

this.setState(
{ username: 'tylermcginnis33' },
() => console.log('setState has finished and the component has re-rendered.')
)
十3、react的优缺点
优势：
能够经过函数式方法描述视图组件（好处：相同的输入会获得一样的渲染结果，不会有反作用；组件不会被实例化，总体渲染性能获得提高）集成虚拟DOM（性能好）
单向数据流（好处是更容易追踪数据变化排查问题
一切都是component：代码更加模块化，重用代码更容易，可维护性高
大量拥抱 es6 新特性
jsx
缺点：
jsx的一个问题是，渲染函数经常包含大量逻辑，最终看着更像是程序片断，而不是视觉呈现。后期若是发生需求更改，维护起来工做量将是巨大的
大而全，上手有难度
十4、React：组件的生命周期
实例化
首次实例化

getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
实例化完成后的更新

getInitialState
componentWillMount
render
componentDidMount
存在期
组件已存在时的状态改变

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
销毁&清理期
componentWillUnmount
说明
生命周期共提供了10个不一样的API。

1.getDefaultProps

做用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。

2.getInitialState

做用于组件的实例，在实例建立时调用一次，用于初始化每一个实例的state，此时能够访问this.props。

3.componentWillMount

在完成首次渲染以前调用，此时仍能够修改组件的state。

4.render

必选的方法，建立虚拟DOM，该方法具备特殊的规则：

只能经过this.props和this.state访问数据
能够返回null、false或任何React组件
只能出现一个顶级组件（不能返回数组）
不能改变组件的状态
不能修改DOM的输出
5.componentDidMount

真实的DOM被渲染出来后调用，在该方法中可经过this.getDOMNode()访问到真实的DOM元素。此时已可使用其余类库来操做这个DOM。

在服务端中，该方法不会被调用。

6.componentWillReceiveProps

组件接收到新的props时调用，并将其做为参数nextProps使用，此时能够更改组件props及state。

componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}
7.shouldComponentUpdate

组件是否应当渲染新的props或state，返回false表示跳事后续的生命周期方法，一般不须要使用以免出现bug。在出现应用的瓶颈时，可经过该方法进行适当的优化。

在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用

8.componentWillUpdate

接收到新的props或者state后，进行渲染以前调用，此时不容许更新props或state。

9.componentDidUpdate

完成渲染新的props或者state后调用，此时能够访问到新的DOM元素。

10.componentWillUnmount

组件被移除以前被调用，能够用于作一些清理工做，在componentDidMount方法中添加的全部任务都须要在该方法中撤销，好比建立的定时器或添加的事件监听器。
十5、React组件通讯
一、父组件向子组件通讯：使用 props
这是最简单也是最经常使用的一种通讯方式：父组件经过向子组件传递 props，子组件获得 props 后进行相应的处理。
二、子组件向父组件通讯：使用 props 回调
利用回调函数，能够实现子组件向父组件通讯：父组件将一个函数做为 props 传递给子组件，子组件调用该回调函数，即可以向父组件通讯。
三、跨级组件间通讯：使用 context 对象
所谓跨级组件通讯，就是父组件向子组件的子组件通讯，向更深层的子组件通讯。跨级组件通讯能够采用下面两种方式：

中间组件层层传递 props
使用 context 对象

对于第一种方式，若是父组件结构较深，那么中间的每一层组件都要去传递 props，增长了复杂度，而且这些 props 并非这些中间组件本身所须要的。不过这种方式也是可行的，当组件层次在三层之内能够采用这种方式，当组件嵌套过深时，采用这种方式就须要斟酌了。
使用 context 是另外一种可行的方式，context 至关于一个全局变量，是一个大容器，咱们能够把要通讯的内容放在这个容器中，这样一来，无论嵌套有多深，均可以随意取用。

使用 context 也很简单，须要知足两个条件：

上级组件要声明本身支持 context，并提供一个函数来返回相应的 context 对象
子组件要声明本身须要使用 context

若是是父组件向子组件单向通讯，可使用变量，若是子组件想向父组件通讯，一样能够由父组件提供一个回调函数，供子组件调用，回传参数。
在使用 context 时，有两点须要注意：

父组件须要声明本身支持 context，并提供 context 中属性的 PropTypes
子组件须要声明本身须要使用 context，并提供其须要使用的 context 属性的 PropTypes
父组件需提供一个 getChildContext 函数，以返回一个初始的 context 对象
四、非嵌套组件间通讯：使用事件订阅
非嵌套组件，就是没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。对于非嵌套组件，能够采用下面两种方式：

利用两者共同父组件的 context 对象进行通讯
使用自定义事件的方式

若是采用组件间共同的父级来进行中转，会增长子组件和父组件之间的耦合度，若是组件层次较深的话，找到两者公共的父组件不是一件容易的事
自定义事件是典型的发布/订阅模式，经过向事件对象上添加监听器和触发事件来实现组件间通讯。
十6、react中prop和state的区别？
须要理解的是，props是一个父组件传递给子组件的数据流，这个数据流能够一直传递到子孙组件。而state表明的是一个组件内部自身的状态（能够是父组件、子孙组件）。
十7、redux的原理？Redux 把一个应用程序中，全部应用模块之间须要共享访问的数据，都应该放在 State 对象中。这个应用模块多是指 React Components，也多是你本身访问 AJAX API 的代理模块，具体是什么并无必定的限制。State 以 “树形” 的方式保存应用程序的不一样部分的数据。这些数据可能来自于网络调用、本地数据库查询、甚至包括当前某个 UI 组件的临时执行状态（只要是须要被不一样模块访问）