1、选用react的原因
业务需求 > 用户体验 > 开发痛点 > 个人习惯 1、React自身非常简单 2、足够成熟与活跃的社区。 3、最接近原生JavaScript的语法
vue的优势：
- 模板和渲染函数的弹性选择
- 简单的语法及项目创建
- 更快的渲染速度和更小的体积
react优势
1.更适用于大型应用和更好的可测试性
2.同时适用于web端和原生APP
3.更大的生态圈带来的更多的支持和工具
vue和react的相同之处：
- 利用虚拟DOM实现快速渲染工具
- 轻量级
- 响应式组件
- 服务端渲染
- 易于集成路由工具、打包工具以及状态管理工具
- 优秀的支持和社区
答案链接：
2、从2张运行流程图看vue和react区别
www.jianshu.com/p/1ebe36fbd…
2、ifram跳转引出react-router实现原理
一、通过Hash实现前端路由
1、hash的原理
早期的前端路由是通过hash来实现的：改变url的hash值是不会刷新页面的。 因此可以通过hash来实现前端路由，从而实现无刷新的效果。hash属性位于location对象中，在当前页面中，可以通过：
window.location.hash='edit'
来实现改变当前url的hash值。执行上述的hash赋值后，页面的url发生改变。
赋值前：http://localhost:3000
赋值后：http://localhost:3000/#edit
在url中多了以#结尾的hash值，但是赋值前后虽然页面的hash值改变导致页面完整的url发生了改变，但是页面是不会刷新的。此外，还有一个名为hashchange的事件，可以监听hash的变化,我们可以通过下面两种方式来监听hash的变化：
window.onhashchange=function(event){
console.log(event);
}
window.addEventListener('hashchange',function(event){
console.log(event);
})
当hash值改变时，输出一个HashChangeEvent。该HashChangeEvent的具体值为：
{isTrusted: true, oldURL: "http://localhost:3000/", newURL: "http://localhost:3000/#teg", type: "hashchange".....}
有了监听事件，且改变hash页面不刷新，这样我们就可以在监听事件的回调函数中，执行我们展示和隐藏不同UI显示的功能，从而实现前端路由。
此外，除了可以通过window.location.hash来改变当前页面的hash值外，还可以通过html的a标签来实现：
<a href="#edit">edit</a>
2、hash的缺点
hash的兼容性较好，因此在早期的前端路由中大量的采用，但是使用hash也有很多缺点。
搜索引擎对带有hash的页面不友好
带有hash的页面内难以追踪用户行为
二、通过history实现前端路由
HTML5的History接口，History对象是一个底层接口，不继承于任何的接口。History接口允许我们操作浏览器会话历史记录。
(1)History的属性和方法
History提供了一些属性和方法。
History的属性：
1、History.length: 返回在会话历史中有多少条记录，包含了当前会话页面。此外如果打开一个新的Tab，那么这个length的值为1
2、History.state:
保存了会出发popState事件的方法，所传递过来的属性对象（后面会在pushState和replaceState方法中详细的介绍）
History方法：
- History.back(): 返回浏览器会话历史中的上一页，跟浏览器的回退按钮功能相同
- History.forward():指向浏览器会话历史中的下一页，跟浏览器的前进按钮相同
- History.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页
- History.pushState():pushState可以将给定的数据压入到浏览器会话历史栈中，该方法接收3个参数，对象，title和一串url。pushState后会改变当前页面url，但是不会伴随着刷新
- History.replaceState():replaceState将当前的会话页面的url替换成指定的数据，replaceState后也会改变当前页面的url，但是也不会刷新页面。 上面的方法中，pushState和repalce的相同点：
就是都会改变当前页面显示的url，但都不会刷新页面。
不同点：
pushState是压入浏览器的会话历史栈中，会使得History.length加1，而replaceState是替换当前的这条会话历史，因此不会增加History.length.
(2)BOM对象history
history在浏览器的BOM对象模型中的重要属性，history完全继承了History接口，因此拥有History中的所有的属性和方法。
这里我们主要来看看history.length属性以及history.pushState、history.replaceState方法。
- history.pushState(stateObj,title,url) or history.replaceState(stateObj,title,url) pushState和replaceState接受3个参数，分别为state对象，title标题，改变的url。
window.history.pushState({foo:'bar'}, "page 2", "bar.html");
此时，当前的url变为：
执行上述方法前：http://localhost:3000
执行上述方法后：http://localhost:3000/bar.html
如果我们输出window.history.state:
console.log(window.history.state); // {foo:'bar'}
window.history.state就是我们pushState的第一个对象参数。
- history.replaceState()方法不会改变hitroy的长度
- console.log(window.history.length);
- window.history.replaceState({foo:'bar'}, "page 2", "bar.html");
- console.log(window.history.length);
上述前后两次输出的window.history.length是相等的。
此外。
每次触发history.back()或者浏览器的后退按钮等，会触发一个popstate事件，这个事件在后退或者前进的时候发生：
window.onpopstate=function(event){
}
注意：
history.pushState和history.replaceState方法并不会触发popstate事件。
如果用history做为路由的基础，那么需要用到的是history.pushState和history.replaceState,在不刷新的情况下可以改变url的地址，且如果页面发生回退back或者forward时，会触发popstate事件。
hisory为依据来实现路由的优点：
1、对搜索引擎友好
2、方便统计用户行为
缺点：
1、兼容性不如hash
2、需要后端做相应的配置，否则直接访问子页面会出现404错误
segmentfault.com/a/119000001…
juejin.cn/post/684490…
3、react-router怎么实现无状态路由刷新的
4、react中用了哪些es6，以及项目中用了哪些es6新语法
5、v-model的双向绑定的原理
6、看综治项目中的路由处理代码
7、react组件通信
React的6种通信方式(附带例子)：juejin.cn/post/684490…
