1.vue和react区别
vue和react区别有以下11点:1、响应式原理不同;2、监听数据变化的实现原理不同;3、组件写法不同;4、Diff算法不同;5、核心思想不同;6、数据流不同;7、组合不同功能的方式不同;8、组件通信方法不同;9、模板渲染方式不同;10、渲染过程不同;11、框架本质不同。
1、响应式原理不同
vue:vue会遍历data数据对象,使用Object.definedProperty()将每个属性都转换为getter和setter,每个Vue组件实例都有一个对应的watcher实例,在组件初次渲染的时候会记录组件用到了那些数据,当数据发生改变的时候,会触发setter方法,并通知所有依赖这个数据的watcher实例调用update方法去触发组件的compile渲染方法,进行渲染数据。
react:React主要是通过setState()方法来更新状态,状态更新之后,组件也会重新渲染。
2、监听数据变化的实现原理不同
vue:Vue通过 getter/setter以及一些函数的劫持,能精确知道数据变化。
react:React默认是通过比较引用的方式(diff)进行的,如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢?这是因为Vue和React设计理念上的区别,Vue使用的是可变数据,而React更强调数据的不可变,两者没有好坏之分,Vue更加简单,而React构建大型应用的时候更加鲁棒。
3、组件写法不同
vue:Vue的组件写法是通过template的单文件组件格式。
react:React的组件写法是JSX+inline style,也就是吧HTML和CSS全部写进JavaScript中。
4、Diff算法不同
vue和react的diff算法都是进行同层次的比较,主要有以下两点不同:
vue对比节点,如果节点元素类型相同,但是className不同,认为是不同类型的元素,会进行删除重建,但是react则会认为是同类型的节点,只会修改节点属性。
vue的列表比对采用的是首尾指针法,而react采用的是从左到右依次比对的方式,当一个集合只是把最后一个节点移动到了第一个,react会把前面的节点依次移动,而vue只会把最后一个节点移动到最后一个,从这点上来说vue的对比方式更加高效。
5、核心思想不同
vue:Vue的核心思想是尽可能的降低前端开发的门槛,是一个灵活易用的渐进式双向绑定的MVVM框架。
react:React的核心思想是声明式渲染和组件化、单向数据流,React既不属于MVC也不属于MVVM架构。
6、数据流不同
vue:Vue1.0中可以实现两种双向绑定:父子组件之间,props可以双向绑定;组件与DOM之间可以通过v-model双向绑定。Vue2.x中去掉了第一种,也就是父子组件之间不能双向绑定了(但是提供了一个语法糖自动帮你通过事件的方式修改),并且Vue2.x已经不鼓励组件对自己的 props进行任何修改了。
react:React一直不支持双向绑定,提倡的是单向数据流,称之为onChange/setState()模式。不过由于我们一般都会用Vuex以及Redux等单向数据流的状态管理框架,因此很多时候我们感受不到这一点的区别了。
7、组合不同功能的方式不同
vue:Vue组合不同功能的方式是通过mixin,Vue中组件是一个被包装的函数,并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的?比如声明的props怎么接收到的?这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事,所以我们自己如果直接把组件的声明包装一下,返回一个HoC,那么这个被包装的组件就无法正常工作了。
react:React组合不同功能的方式是通过HoC(高阶组件)。React最早也是使用mixins的,不过后来他们觉得这种方式对组件侵入太强会导致很多问题,就弃用了mixinx转而使用HoC。高阶组件本质就是高阶函数,React的组件是一个纯粹的函数,所以高阶函数对React来说非常简单。
8、组件通信方法不同
vue:Vue中有三种方式可以实现组件通信:父组件通过props向子组件传递数据或者回调,虽然可以传递回调,但是我们一般只传数据;子组件通过事件向父组件发送消息;通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据,可以跨越多个层级。
react:React中也有对应的三种方式:父组件通过props可以向子组件传递数据或者回调;可以通过 context 进行跨层级的通信,这其实和 provide/inject 起到的作用差不多。React 本身并不支持自定义事件,而Vue中子组件向父组件传递消息有两种方式:事件和回调函数,但Vue更倾向于使用事件。在React中我们都是使用回调函数的,这可能是他们二者最大的区别。
9、模板渲染方式不同
vue:Vue是在和组件JS代码分离的单独的模板中,通过指令来实现的,比如条件语句就需要 v-if 来实现对这一点,这样的做法显得有些独特,会把HTML弄得很乱。
react:React是在组件JS代码中,通过原生JS实现模板中的常见语法,比如插值,条件,循环等,都是通过JS语法实现的,更加纯粹更加原生。
10、渲染过程不同
vue:Vue可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
react:React在应用的状态被改变时,全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制,但Vue将此视为默认的优化。
11、框架本质不同
vue:Vue本质是MVVM框架,由MVC发展而来;
react:React是前端组件化框架,由后端组件化发展而来。
2.node.js可以做什么
1、“I/O”密集型应用
Node.js 的优势主要在于事件循环,非阻塞异步 I/O,只开一个线程,不会每个请求过来都去创建一个线程,从而产生资源开销。
2、中间层
通常我们可以使用 Node.js 来做为中间层,负责组装数据提供 API 接口给到前端调用,这些数据源可能来自第三方接口或者数据库,例如,以前可能我们通过后端 Java、PHP 等其它语言来做,现在我们前端工程师通过 Node.js 即可完成,后端则可以更专注于业务开发。
3、RPC服务
RPC(Remote Procedure Call),即远程过程调用,也许你对它很陌生,但是在当今微服务模式下,我们可能是针对功能或者具体的业务形态进行服务化,那么服务之间的通信一种常见的模式我们都知道通过 HTTP 来实现,了解网络模型的同学可能知道,如果我们现在通过 TCP 的方式是不是会更高效呢?
当然是的,HTTP 属于应用层协议,在这之下就是传输层,显然以 TCP 形式是很有优势的,RPC 服务也就是采用的 TCP,现在出名的 RPC 服务例如,Google 的 gRPC、阿里的 Dubbo。
4、基础工具
可以作为基础工具,前端领域中的编译器、构建工具、搭建脚手架等。比较出名的例如 Webpack、Gulp 都是很成功的。
5、论坛社区系统
Nodeclub 是使用 Node.js 和 MongoDB 开发的社区系统,界面优雅,功能丰富,小巧迅速,可以用它搭建自己的社区。
6、BFF应用
Backend For Frontend,简称 BFF,服务于前端的后端,并非是一种新技术只是一种逻辑上的分层,在这一层我们可以做一些资源的整合,例如:原先前端需要从三个不同的地方来获取资源,那么,有了这一层之后,我们是不是可以做个聚合,统一处理之后返回给前端,同时也不授后端系统的变迁,导致也要去更改。
7、Serverless
这将是未来经常会听到的一个词,ServerLess 是一种 “无服务器架构”,它不需要开发者去关心运维、流量处理这些工作,开发者则可以更关注于业务本身。
函数即服务,那么写一个函数就可以实现一个 API 接口给到前端,显然对开发工作是减轻了很多,在 JavaScript 中函数则是一等一的公民,在 ServerLess 这一场景下 Node.js 本身也很轻量级,还是拥有着很大的优势。
8、微服务
微服务也是近两年一个很火热的词,这里提几个微服务主要的特点:小型服务、以独立进程运行、可以使用不同语言。那么这里则可以根据业务形态来选择不同的语言实现,Node.js 本身也是很轻量级的,实现起来也很快,在一些 I/O 密集场景还是很适用的。
3.React Native与原生开发的对比
基础对比
1,环境搭建
a)首选你要选择开发平台macOS/Windows/Linux
b)其次选择你对应的目标平台iOS/Android,
不同目标平台要安装对应的环境依赖
比如iOS需要Node、Watchman、Xcode和 CocoaPods。
Android需要Node、JDK和 Android Studio。
c)创建项目
执行cmd命令 npx react-native init YourProjectName,这里我命名为AwesomeProject
项目创建成功后可以使用相关工具打开进行编程了
开发RN的工具有很多,选择性也比较多,比如Facebook专门为React开发的IDE:Nuclide,还有做前端比较熟悉的WebStorm、Sublime Text 3、VS Code等。
RN目录.png
iOS/Android :对应的开发工具创建
2,开发语言
React Native本质上是JavaScript框架。
RN类似于Vue开发,运用JSX与一些标签对来进行一些流式布局
iOS:Object-C/Swift
Android:Java/Kotlin
3,Debug
大家才能够目录中可以看到,RN项目一般是包括iOS项目和Android项目,调试的时候需要用对应的开发工具调试不同的平台。
4,开发技能要求
我所理解的最能运用RN开发的coder需要掌握JS开发(对公用模块的绘制与功能处理)、iOS开发、Android开发(主要处理端对端与第三方的兼容交互,一些功能集成处理例如推送、支付等)
React Native 与原生开发的优劣
1,React Native原理
a)React属于JavaScript框架,每个HTML界面可以看做一个文档对象模型(DOM),React框架采用组件化方式简化Web开发,可以把一组相关的DOM和JavaScript单独封装到一个组件类中,便于复用。
b)RN底层是把React转换为对应的原生API,例如针对iOS,RN会在一开始生成Object-C模块表,然后把这个模块表传入JS中,JS参照模块表,就能间接调用OC的代码。
c)工作流程
RN工作流程.png
2,React Native与原生的比较
a)相比原生各自维护一套(iOS、Android)业务逻辑大同小异的代码,React Native 只需要同一套javascript代码就可以运行于iOS和 Android两个平台,在开发、测试和维护的成本上要低很多。
b)能即时更新 App,原生发布更新则需要提交审核到不同的市场,发布和测试新功能的效率大幅提高。
c)动画性能。React Native在动画效率和性能的支持还存在一些问题,性能上不如原生Api。
d)React Native 严重依赖于Facebook的维护。苹果在iOS上每次技术的更新、政策的改变都会让原来使用了 React Native 代码库受到影响,等待 Facebook和社区的修复会妨碍 App 的更新和用户体验。
e)原生应用开发人员需要更多指定给原生应用构建的模块,如访问摄像头、推送通知和其他设备传感器。
f)性能。
写在最后
何时选择 React Native
a)你想构建一款简单的电子商务App。
c)你需要尽快进入市场,在人员不够的情况下。
d)你的项目预算较少。