口试中问框架，经常会问到一些道理性的东西，明显一向在用，也晓得怎样用，
但口试时却答不上来，也是挺为难的，就痛快把react相干的题目查了下材料，再按自身的明白整顿了下这些答案。
react生命周期有哪些
组件载入阶段：componentWillMount:组件行将被装载、衬着到页面上，只挪用1次componentDidMount:组件真正在被装载以后，这里可以拿到实在DOM实行操纵，只挪用1次
运转中状况：componentWillReceiveProps(nextProps):组件将要吸取到新属性的时刻挪用，在这时候setState不会触发分外的render,由于此时已有一次来自父组件激发的render了。
shouldComponentUpdate:组件接收到新属性或许新状况的时刻（返回 false，吸取数据后不更新，阻挠 render ，背面的函数不会继承实行）componentWillUpdate:组件行将更新不能修正属性和状况componentDidUpdate:组件已更新
烧毁阶段：componentWillUnmount:组件行将烧毁，这时候刻可以烧毁绑定的事宜监听或许定时器什么的。
有些彷佛把render也算进生命周期了：render:组件在这里天生假造的 DOM 节点
react在哪一个生命周期做优化
shouldComponentUpdate，这个要领用来推断是不是须要挪用 render 要领重绘 dom。
由于 dom 的描写异常斲丧机能，假如我们能在这个要领中可以写出更优化的 dom diff 算法，可以极大的进步机能。
react的diff算法是怎样完成的
1.把树形组织依据层级剖析，只比较同级元素。
2.经由历程给列表组织的每一个单位增加的唯一 key值举行辨别同条理的子节点的比较。
3.React 只会婚配雷同 class 的 component（这内里的 class 指的是组件的名字）
4.兼并操纵，挪用 component 的 setState 要领的时刻, React 将其标记为 dirty.
到每一个事宜轮回完毕, React 搜检统统标记 dirty 的 component 从新绘制。
5.挑选性衬着。开辟人员可以重写 shouldComponentUpdate 进步 diff 的机能。
图片源自：react精华之一—diff算法
react假造DOM完成道理，以及为何假造 dom 会进步机能
完成道理：
1. 用 js对象组织示意 DOM 树的组织；然后用这个树构建一个真正的 DOM 树，插到文档当中。
2. 当状况更改的时刻，从新组织一棵新的对象树。然后对照新旧假造DOM树，纪录两棵树差别。
3. 把 2 所纪录的差别运用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。
缘由：假造 dom 相当于在 js 和实在 dom 中心加了一个缓存，运用 dom diff 算法削减了对实在DOM的操纵次数，从而进步机能。
react怎样从假造dom中拿出实在dom
Refs 是 React 供应给我们的平安接见 DOM 元素或许某个组件实例的句柄。
我们可认为元素增加 ref 属性然后在回调函数中接收该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回。或许ref可以传字符串。
比方：<input ref=((input)=>{return this.name=input}) />， this.name.value取值
或许 <input ref="name" />，this.refs.name取值
React中的props和state的用法
state 是一种数据组织，用于组件挂载时所需数据的默许值。state 可能会跟着时候的推移而发作突变，但多半时刻是作为用户事宜行动的效果。
Props则是组件的设置。props 由父组件通报给子组件，而且就子组件而言，props 是不可变的(immutable)。
react组件之间怎样通讯
父子：父传子：props； 子传父：子挪用父组件中的函数并传参；
兄弟：运用redux完成。
统统关联都通用的要领：运用PubSub.js定阅
react的setState的道理及用法
道理：当挪用setState时，它并不会马上转变，而是会把要修正的状况放入一个使命行列，比及事宜轮回完毕时，再兼并指更新。
因而，setState有 异步，兼并更新更新两个特征。
这里应当须要了解下
Batch Update 。
运用：
1.最常见的用法就是传入一个对象。
this.setState({
isLoading:false
})2.还可以吸取一个函数
this.setState((prevState,props)=>{
// 要做的事宜
return {isLoading:false};
})3.由于setState是异步的，所以它还可以吸取第二个参数，一个回调函数
this.setState({count:2},()=>{
isLoading:this.state.count===2 ? true : false
})setState为何是异步的
1.保证内部的一致性
由于props是要比及父组件衬着事后才拿到，也就是不能同步更新，state出于一致性设成异步更新。2.机能优化
举例说你正在一个谈天窗口输入，假如来了一条新消息又要render,那就会壅塞你的当前操纵，致使耽误什么的。3.支持state在幕后衬着
异步可以使state在幕后更新，而不影响你当前旧的页面的交互，提拔用户体验。概况可以点击上面的参考链接，写的很细致的。
别的：setstate在原生事宜，setTimeout,setInterval,promise等异步操纵中，state会同步更新。
react的上风以及特性
上风：
1. 完成对假造DOM的操纵，使得它速度快，进步了Web机能。
2. 组件化，模块化。react里每一个模块都是一个组件，组件化开辟，可保护性高。
3. 单向数据流，比较有序，有便于治理，它跟着React视图库的开辟而被Facebook观点化。
4. 跨浏览器兼容：假造DOM协助我们处置惩罚了跨浏览器题目，它为我们供应了标准化的API，甚至在IE8中都是没题目的。不足：
1. react中只是MVC情势的View部份，要依靠引入很多其他模块开辟。、
2. 当父组件举行从新衬着操纵时，纵然子组件的props或state没有做出任何转变，也会一样举行从新衬着。
特性：
1. 声明式设想：React采纳声明范式，可以轻松形貌运用。
2. 高效：React经由历程对DOM的模仿，最大限定地削减与DOM的交互。
3. 天真：React可以与已知的库或框架很好地合营。
React怎样机能优化
讲一些项目中用到的小的点：
1. 充分运用shouldComponentUpdate函数，不过这须要你的组件只管最小化，假如当前组件数据过于庞杂，实际上是很难优化的。
2. 给你的DOM遍历上加上唯一的key,注重只管不要用index,由于假如你新DOM中删了某一个节点，它会从新排列index，
那跟本来同层级一比就都邑完整不一样，而从新衬着了，所以最好运用id值什么的作key值。
3. 能用const声明的就用const。
4. DOM里罕用箭头函数，固然实在要传参时也照样得用。再者，函数bind只管写在constructor，防止每次render从新bind。
5. 削减对实在DOM的操纵。
6. 假如是用webpack搭建环境的话，当一个包过大加载过慢时，可分打成多个包来优化。react-perf机能检察东西，可自行了解下：
react-perf
react与vue的对照
有些是个人看法，仅供参考。
雷同点：
1. 都用假造DOM完成疾速衬着
2. 我以为父子，兄弟通讯这些都挺像的，也都有自身的状况治理器：react=>redux, vue=>vuex
3. 都是轻量级框架
4. 如今vue也在逐渐吸取react中的一些语法，比方JSX语法，类式声明写法等
差别点：
1. React属于单向数据流——MVC情势，vue则属于双向——MVVM情势。
2. react兼容性比vue好，vue不兼容IE8.
3. react采纳JSX语法，vue采纳的则是html模板语法。
4. vue的css可以有组件的私有作用域，react则没有。
5. react比vue好的另一点是，它是团队保护，而vue属于个人，一般来说，大型项目更倾向于react，小型则用vue，固然这也不是相对。
Redux的完成流程
用户页面行动触发一个Action，然后，Store 自动挪用 Reducer，而且传入两个参数：当前 State 和收到的 Action。Reducer 会返回新的 State 。每当state更新以后，view会依据state触发从新衬着。
react-redux的完成道理
Redux作为一个通用模块，重要照样用来处置惩罚运用中state的更改，经由历程react-redux做衔接，可以在React+Redux的项目中将二者连系的更好。
react-redux是一个轻量级的封装库，它重要经由历程两个中心要领完成：
Provider：从最外部封装了全部运用，并向connect模块通报store。
Connect：
1、包装原组件，将state和action经由历程props的体式格局传入到原组件内部。
2、监听store tree变化，使其包装的原组件可以响应state变化
redux中心件的明白，以及用过哪些中心件
明白：中心件就是要对redux的store.dispatch要领做一些革新，以完成其他的功用。
我用过redux-thunk，就拿它举例。
背景：Redux 的基本做法，是用户发出 Action，Reducer 函数马上算出新的 State，View 从新衬着，但这是做同步。
而假如有异步要求时，那就不能晓得什么时刻猎取的数据有存进store内里，因而此时须要在要求胜利时返回一个标识或状况，并在此时再触发action给reducer传值。
因而，为了处置惩罚异步的题目，就引入了中心件的观点。作用： redux-thunk 协助你一致了异步和同步 action 的挪用体式格局，把异步历程放在 action 级别处置惩罚，对 component 挪用没有影响。
引入运用可参照：
明白redux和redux的中心件redux-thunk的熟悉
redux-thunk VS redux-saga对照 异步处置惩罚计划中心件
redux-thunk
瑕玷：
(1).一个异步要求的action代码过于庞杂，且异步操纵太疏散，相对照saga只需挪用一个call要领就显得简朴多了。
(2).action情势不一致，假如不一样的异步操纵，就要写多个了。长处：进修本钱低
redux-saga:
长处：
（1）集合处置惩罚了统统的异步操纵，异步接口部份一览无余(有供应自身的要领)
（2）action是一般对象，这跟redux同步的action如出一辙({type:XXX})
（3）经由历程Effect，轻易异步接口的测试
（4）经由历程worker和watcher可以完成非壅塞异步挪用，而且同时可以完成非壅塞挪用下的事宜监听
（5） 异步操纵的流程是可以掌握的，可以随时作废响应的异步操纵。瑕玷：进修本钱高。
比较redux和vuex的区分
原文链接不记得了（囧…)
雷同点：
1.数据驱动视图，供应响应式的视图组件
2.都有virtual DOM， 组件化开辟，经由历程props参数举行父子组件数据的通报，都完成webComponents范例
3.都支持服务端衬着
4.都有native处置惩罚计划，reactnative（facebook团队） vs weex（阿里团队）差别点：
1.vuex是一个针对VUE优化的状况治理体系，而redux仅是一个通例的状况治理体系（Redux）与React框架的连系版本。
2.开辟情势：React自身，是严厉的view层，MVC情势；Vue则是MVVM情势的一种体式格局完成
3.数据绑定：Vue自创了angular，采用双向数据绑定的体式格局；React，则采用单向数据流的体式格局
4.数据更新：Vue采用依靠追踪，默许是优化状况：按需更新；
React在则有两种挑选：
1）手动增加shouldComponentUpdate，来防止冗余的vdom，re-render的状况
2）Components 只管都用 pureRenderMixin，然后采纳 redux 组织 + Immutable.js
5.社区：react比拟来说照样要大于vue，毕竟背地支持团队差别。
facebook vs 个人！固然现在vue的增长速度是高于react的增速，不晓得将来的发展趋势是怎样。
总之：期待构建一个大型运用程序——挑选React，期待运用只管的小和快——挑选Vue
react-router的完成道理
道理：完成URL与UI界面的同步。个中在react-router中，URL对应Location对象，
而UI是由react components来决议的，如许就转变成location与components之间的同步题目。
长处：
1.作风: 与React融为一体,专为react量身打造，编码作风与react保持一致，比方路由的设置可以经由历程component来完成
2.简朴: 不须要手工保护路由state，使代码变得简朴
3.壮大: 壮大的路由治理机制，体如今以下方面
4.路由设置: 可以经由历程组件、设置对象来举行路由的设置
5.路由切换: 可以经由历程<Link> Redirect举行路由的切换
6.路由加载: 可以同步纪录，也可以异步加载，如许就可以完成按需加载
7.运用体式格局: 不仅可以在浏览器端的运用，而且可以在服务器端的运用
瑕玷：API不太稳固，在晋级版本的时刻须要举行代码更改。
react router3到4有什么转变
我只挑了一部份。
原文链接：https://blog.csdn.net/qq_3548…
1. V4不再运用V3里的{props.children}(代表统统路由-个人明白)，而V4丢给 DOM 的是我们的运用程序自身.
2. V4还同时支持同时衬着多个路由，1和2都可参照下面代码，当接见 /user 时，两个组件都邑被衬着。(V3可完成但历程庞杂) <div className="primary-layout">
<header>
Our React Router 4 App
<Route path="/user" component={UsersMenu} />
</header>
<main>
<Route path="/" exact component={HomePage} />
<Route path="/user" component={UsersPage} />
</main>
</div>;3.猎取路由的途径婚配，可以运用props.match.path猎取，match上另有match.params,match.url等属性。
注：url是浏览器的url的一部份，path是给router写的途径
4.多了一个限定未登录的用户接见某些路由功用，可以在运用程序顶端中设置一个主进口，区分登录和未登录UI展现界面。
对webpack的明白：
参考链接：
webpack设置整顿
观点： webpack是一个预编译模块计划，它会剖析你的项目组织将其打包成合适浏览器加载的模块。
打包道理：把统统依靠打包成一个bundle.js文件，经由历程代码支解成单位片断并按需加载。
中心头脑：
1.统统皆模块，一个js，或许一个css文件也都算作一个模块，
2.按需加载，传统的模块打包东西（module bundlers）最终将统统的模块编译天生一个巨大的bundle.js文件。
但是在实在的app里边，“bundle.js”文件可能有10M到15M之大可能会致使运用一向处于加载中状况。
因而Webpack运用很多特征来支解代码然后天生多个“bundle”文件，而且异步加载部份代码以完成按需加载。基本设置项：
1. entry:{} 进口，支持多进口
2. output 出口
3. resolve 处置惩罚依靠模块途径的剖析
4. module 处置惩罚多种文件花样的loader
5. plugins 除了文件花样转化由loader来处置惩罚，其他大多半由plugin来处置惩罚
6. devServer 设置 webpack-dev-server
7. 搭配package.json设置环境变量，以及剧本设置。
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development"
}
"scripts": {
"build_": "NODE_ENV=production webpack",
"start_": "NODE_ENV=development webpack-dev-server"
}
react高阶组件
参考材料：
浅谈React高阶组件
定义：js里的高阶函数的定义是吸取一个函数作为参数，并返回一个函数。redux的connect就是一个高阶函数。
那react高阶组件就是指吸取一个react组件作为入参，并返回一个新react组件的组件。优点：它不必体贴组件从哪来，也就是不必自身去引入很多个组件了。
一个简朴的高阶组件：(写法不是唯一)
export default function withHeader(WrappedComponent){
return class HOC extends component{
return (
<div className="wrap">
<div>这是一段一般的笔墨</div>
<WrappedComponent {...this.props} />
</div>
)
}
}
直接引入：import withHeader from 'withHeader'高阶组件部份另有待补充。
