大家好，今天给各位分享react的一些知识，其中也会对dom进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
vue好用吗
什么是Vue.js?
Vue.js是前端的主流框架之一
Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于第三方库即有项目整合（Vue有配置的第三方类库，可以整合起来做大型项目的开发），下一节我们讲解百度地图用Vue的方式引入。
前端的主要工作：主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作页面效果
什么是MVC、MVVM？
后端（JavaPythonNodec#）中的mvc与前端mvvm之间的区别：
mvc是后端的分层开发概念
mvvm是前端视图层的概念，主要关注于视图层分离，也就是说：mvvm把前端的视图层，分为三部分：model，view，vmviewmodel
『View』：视图层（UI用户界面）『ViewModel』：业务逻辑层（一切js可视为业务逻辑）『Model』：数据层（存储数据及对数据的处理如增删改查）
简述MVVM
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象。在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM,不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。Vue的简介
声明式渲染DeclarativeRendering
组件系统Components
vue返回的是一个对象
vue是一个mvvm的框架
Vue是vue的实例，这个实例存在计算机中，主要干俩大事：1、绑定事件；2、dom检测
Vuejs是封装的一个类
Vue全家桶包括
客户端路由Vue-router大规模状态管理Vuex构建工具Webpack/Vue-cli服务端通信AxiosVue.js的优点
简单轻巧，功能强大，拥有非常容易上手的API；可组件化和响应式设计；实现数据与结构分离，高性能，易于浏览器的加载速度；MVVM模式，数据双向绑定，减少了DOM操作，将更多精力放在数据和业务逻辑上Vue的基础语法介绍
v-model:主要是在表单元素的双向数据绑定中使用。比如文本框、下拉框、单选、复选、textarea等等。因为v-model是双向绑定的，所以文本框输入以后，模型也会发生改变。反之模型改变了文本框也会改变。v-text：主要用于文本的渲染。和{{}}功能一样。但是{{}}在第一次页面Vue木没有初始化完成时，会显示{{}}字符。故文本渲染多用v-text。v-html:则会以html的方式把内容载入到界面中v-show：控制显示隐藏。不用艺v-if，使用v-show的情况下，dom是存在的。v-show通过指定CSS样式给元素添加displayblock或者displaynone进行控制。v-if：控制显示隐藏。如果if不成立，则整个dom不进行渲染，即不存在。v-bind：绑定属性。给一个dom元素添加属性。比如：在做图片的渲染过程中，如果图片的src地址是动态的，那么就可以利用v-bind去绑定src属性来实现src的赋值。v-for：循环。主要用于表格<li>标签，去循环一个数组。v-on：事件绑定。(v-on:同等于@)filter:过滤器。格式化数据。如后台返回金额19数字。页面显示：￥19.00元。component：组件。在做单页面过程中使用多些。把每一个网页做成多个组件然后拼接。起到组件复用。如页面头部底部和轮播等。vue.js的优点和缺点在哪
vue是目前国内最火热的前端MVVM框架，其优缺点如下：
一、优点易于开发：vue提供了页面数据渲染模板引擎如v-if、v-for等、提供事件绑定@click等，代码清晰明了，逻辑简单，易于上手；高性能：Vue提出虚拟DOM概念，以及数据驱动DOM思想，减少页面渲染成本，大幅度提高性能；生态完善：许多开发者提供了对vue支持的插件如ElementUI，完善vue的生态，故使用vue进行开发，遇到的难题会较少。开源社区活跃：这提供vue未来更加强大的可能性。二、缺点SEO不好：vue很多内容都是基于JS，如页面显示的标签元素，都成为虚拟DOM，通过数据驱动DOM，这样的页面，在搜索引擎SEO方面，不是很友好；调试困难：vue带来便捷的同时，封装过复杂，开发时遇到问题，很难排查出问题导致的原因。三、小结总之，优点大于缺点，否则vue也不会像现在这么火了，2020.4推出vue3.0，功能更加强大，我们应对vue的未来充满信心。
React是怎样炼成的
大概是上上周的事儿吧：马上双十一了，我才来实习一周不到，由于需要全员作战，所以我被抓壮丁，给你们撸代码上线双十一项目。项目是基于React、Rax的，我是一个vue的忠实粉丝啊，R系我不会啊。。。没办法，强撸灰飞烟灭，只能硬钢一波，三天从入门到放弃开发R系——
前提：确保有JS基础和ES6基础。（基础是大前端的核心呀）
1.JSX学习（其实就是把HTML放到JS里玩了。。。）
2.React官网中文文档，基础看完，只要知道props、state、生命周期以及事件调用即可，其他问题了解下，遇到类似问题能够定位查询就OK。
3.ReactRouter官网（业界良心啊，router自带学习代码开发，简直速成有木有）
4.Redux官网（官网都说了十几分钟你就会用）
5.有了以上基础，你的React体系就基本成型了，然后进入社区吧，React庞大的社区资源会让你眼花缭乱的。
react跳转后不触发方法
1、使用react-router-dom中的Link实现页面跳转。
2、使用react-router-redux中的push进行页面跳转。
3、使用RouteComponentProps中的history进行页面回退
4、打开一个新的tab页，并截取路径。
你遇到的前端面试题都有什么
1.cookiesession的用途和区别，以及有效期
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
2.vue的数据绑定原理，mvvm与mvc的区别MVVM：
m:model数据模型层v:view视图层vm:ViewModelvue中采用的是mvvm模式，这是从mvc衍生过来的MVVM让视图与viewmodel直接的关系特别的紧密，就是为了解决mvc反馈不及时的问题
图片说明一下：
说到MVVM就要说一下双向绑定和数据劫持的原理，
MVC：
m:model数据模型层v:view视图层c:controller控制器
原理：c层需要控制model层的数据在view层进行显示
MVC两种方式，图片说明：
总结：
mvvm与mvc最大的区别：MVVM实现了view与model的自动同步，也就是model属性改变的时候，我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。
不懂得可以复制链接查看：
https://www.pianshen.com/article/3716256399/
3.storage的区别sessionStoragelocalStoragelocalStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性
sessionStorage的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的
4.v-model双向数据原理有一个文本框通过v-bind绑定了value属性值为myname是我们在vue实例中定义的属性传统我们获取文本框值方法可能通过getElementById找到文本框然后获取其value属性但是vue中直接通过v-bind绑定了value属性所以不需要像之前那样获取值所以在后面的按钮中获取name值直接获取vue实例对象data里面的myname属性即可
【数据为尊----数据映射到浏览器如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面----映射关系统称】
5.keepAlive用过吗？什么作用？缓存路由组件
使用的是vue的一个组件，参考vue的官方文档
使用这个东西可以保证我们在切换组件的时候，原来显示的组件不被销毁
-----【保障组件的数据不会被切换路由而销毁数据】
<keep-aliveinclude="Home">Home是对应的组件对象的名字，不是路由的名字
<router-view></router-view>
</keep-alive>
6.多维数组拍平数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组
一红六种方法吧……
了解的请看：https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因解决方案跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
这样就可以说同源策略----协议---端口---域名
原生的src和href可以解决跨域
代理可以解决
请求头也可以携带浏览器提示的也可以解决
一般都是后端解决跨域问题
【别的需要了解看下方链接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容问题§如果你使用cli创建项目（即项目根目录是package.json），不管用什么ide，即便是用HBuilderX，切记cli项目的编译器是在项目下的，HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npmupdate来升级编译器。以及如果你想要安装less、scss等预编译器，也需要自己npm安装在项目下，而不是在HBuilderX的插件管理里安装。
§如果你使用离线打包，请注意HBuilderX升级后，真机运行基座和云打包对应引擎跟随HBuilderX升级，而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。
§如果你使用自定义基座，之前制作的自定义基座是不会跟随HBuilderX升级的，升级HBuilderX后你应该重新制作新版自定义基座。
§如果你使用wgt升级，新版HBuilderX编译的wgt，运行到之前的runtime上，一定要先测试好，看有没有兼容性问题。如果有问题，就不要wgt升级，整包升级。
§考虑到向下兼容，uni-app编译器在升级为新的自定义组件模式后，同时保留了对老编译模式的向下兼容。在HBuilderXalpha版中，App端一定会使用新编译器，不理会manifest配置。在HBuilderX正式版中，新创建的项目会使用新编译器，老项目不会强制使用，而是开发者自己在manifest里配置开启。
§如果你使用其他ide开发uni-app，会经常因为拼错单词而运行失败，因为经过webpack编译一道，很多错误反应的不够直观，排错时间很长，不如从开始就依赖有良好提示的HBuilderX，避免敲错单词。
§云打包的引擎版本说明HBuilderXAlpha，只有1套云打包机，不管你的HBuilderXalpha版本多少，对应的打包机一定是最新的alpha版的客户端引擎。HBuilderX正式版，有2套打包机，一个是最新正式版，一个是次新正式版。中间的紧急更新版本没有独立打包机。举个例子：HBuilderX有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。那么当前可用的打包机有1.9.1和1.8.2这2台。（即每个大版本的最后一个版本）除了这2个HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版对应的打包机。（即只保留2个大版本的云打包机）
【详情请看】
https://ask.dcloud.net.cn/article/35845
React解决了前端开发中的哪些痛点
下面我分一下逻辑来详述一下我对这个问题的见解。
1.前端开发中会有哪些问题需要考虑
2.目前解决这些问题的技术方案
3.React技术栈对上述问题的解决
一、前端开发中会有哪些问题需要考虑
讨论这个问题我觉得应该回到问题的本质-【前端开发会考虑些什么问题】，这些问题即是前端开发过程中的痛点也是难点，了解了这些问题才能知道为什么会有React出现，以及React如何解决这些问题的。
首先，对于一个前端团队来说，在进行前端技术规划的时候都应该考虑的事情：
组件库、模块化
开发效率
运行效率
可维护性
体验优化
组件库、模块化
首先是组件库，任何一个前端业务团队都会做的事情就是沉淀组件，公共基础组件，业务组件，函数工具库，这对于业界的前端来说是共识。组件库也就是轮子库，是提高团队开发效率的最好方式，同时也是团队的基础沉淀（拿KPI的绝佳帮手）
然后是模块化，在几年前，经常会看到一个js几千行的情况，但是基于可维护性和重用性的考虑，会把js拆分成模块，模块化的需求已经很普遍，出现了很多如`AMD``CMD``CommonJs``UMD`这些规范，以及`require.js``seaJs``Browserify``webpack`这些工具和库来解决这些问题。
开发效率
开发效率是前端团队对业务响应速度的反馈，如果一个业务交给前端团队过后几个月都没有结果那必然会引起上下游的不满，不管技术做的多棒，选什么框架，最终的目的都是完成业务。那哪些因素会影响开发效率呢？
1.业务代码架构设计
2.可重用模块和组件
第一点是业务代码的架构设计，好的设计能够极大的减少代码量和出bug的可能。第二是拥有大量可重用的模块和组件，能够快速的实现交互
运行效率
运行效率是用户体验的关键，对于对效率要求极高的业务场景来说，这可能是选择框架的第一标准
可维护性
前端开发中大多数在做的事情是：
1.新业务加功能
2.改版
3.解决bug
特别是在大公司的前端更是体会深刻，可能重来没有做过新业务，都是在维护旧的代码，填坑加埋坑。如果业务代码设计差，可阅读性差，很难定位bug。特别是千奇百怪的MVC设计，大控制器，复杂的Model，想要定位出哪里出了问题真是一件eggache的事情。
体验优化
体验已经成了现代化前端开发的必谈之物，所以出现了当页面应用(SPA)，InstantLoading，ApplicationShell]，Progresswebapp这些名词。
二、目前解决这些问题的技术方案
组件化：webComponent、polymer、x-tag、react、jQuery-plugin、angular-directive
模块化：webpack、browserify、require.js、sea.js
开发效率：MVC(Backbone)<Flux(React)<MVVM(Angular.js、vue、ember.js)
运行效率：Backbone、React
可维护性：Flux、Redux
现代化的一些框架几乎都包含组件化的考虑，不过在其他方面各有其优势，关键点是在开发效率和运行效率之间的平衡
三、React技术栈对上述问题的解决
注意我这里提的是React技术栈，并非题主说的React，个人认为在描述React的时候应该是在讲React生态体系，那对于上面说的难点痛点在React中一一对应的解决方案。
组件化：React天生组件化，这是React的核心，除了能够在团队内部积累业务组件以外，也能找到众多开源组件的实现
模块化：基于webpack可以使用Es6或CommonJs的写法实现模块化代码
开发效率：React的代码基本就是组件的组合，分而治之的方式让代码的可阅读性很高，容易理解。而且相比于MVC几乎是去除了Controller的角色，只用关心一个render函数，不用关系视图局部的修改。
运行效率：React实现了VirtualDOM，相比于MVVM框架具有更优的效率
可维护性：React基于flux或redux的架构设计，确定性的store很容易定位问题，无论是新增业务代码还是查找业务bug都不再是难题
体验：基于React可以很容易的实现SPA（React-router）
题外话：大多数人说React技术栈的学习成本太高，其实我想说的是真没有那么难。。。。真的，如果要学React但又苦于没有系统的学习资源，那我就打个小广告，最近在维护LeanReact-知乎专栏，会系统的讲解React生态的知识，有兴趣的朋友可以关注
react和dom的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！
