江苏龙网

  1. 主页 > 生活百科 > >

前端框架用vue还是react？清晰对比两者差异( 三 )

前端框架


vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树 。而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制 。
指令指令 (Directives) 是带有
v- 前缀的特殊特性，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 。
vuevue中提供很多内部指令供我们使用，它可以让我们进行一些模板的操作，例如有时候，我们的data中的存放的数据不是个简单的数字或者字符串，而是数组Array类型，这个时候，我们要把数组的元素展示在视图上，就需要用到vue提供的 v-for 指令，来实现列表的渲染 。
react因为react中没有v-for指令，所以循环渲染的时候需要用到map()方法来渲染视图，并且将符合条件的元素放入一个新数组返回 。
性能优化vuevue中的每个组件内部自动实现了
shouldComponentUpdate的优化，在vue里面由于依赖追踪系统的存在，当任意数据变动的时，Vue的每一个组件都精确地知道自己是否需要重绘，所以并不需要手动优化 。用vue渲染这些组件的时候，数据变了，对应的组件基本上去除了手动优化的必要性 。而在react中我们需要手动去优化其性能，但是当数据特别多的时候vue中的watcher也会特别多，从而造成页面卡顿，所以一般数据比较多的大型项目会倾向于使用react 。在react官网中，官方也建议我们使用React来构建快速响应的大型 Web 应用程序 。
react当props或state发生改变的时候会触发
shouldComponentUpdate生命周期函数，它是用来控制组件是否被重新渲染的，如果它返回true，则执行render函数，更新组件；如果它返回false，则不会触发重新渲染的过程 。
有的时候我们希望它在更新之前，和之前的状态进行一个对比，这个时候我们就需要重写
shouldComponentUpdate来避免不必要的dom操作，对比当前的props或state和更新之后的nextProps或nextState，返回true时，组件更新；返回false，则不会更新，节省性能 。
shouldComponentUpdate(nextProps, nextState) {if (this.props.a !== nextProps.a) {return true;}if (this.state.b !== nextState.b) {return true;}return false;}复制代码我们也可以创建一个继承React.PureComponent的React组件，它自带
shouldComponentUpdate，可以对props进行浅比较，发现更新之后的props与当前的props一样，就不会进行render了 。
classTestextendsReact.PureComponent{constructor(props){super(props);}render(){return<div>hello...{this.props.a}</div>}}
由于React.PureComponent进行的是浅比较，也就是说它只会对比原对象的值是否相同，当我们的props或state为数组或者对象这种引用类型的时候，我们修改它的数值，由于数据引用指针没有发生改变，所以组件也是不会重新渲染的 。这个时候我们就需要进行深拷贝，创建一个新的对象或数组，将原对象的各项属性的"值"（数组的所有元素）拷贝过来，是"值"而不仅仅是"引用地址" 。我们可以使用slice()方法：
ew_state.todos = new_state.todos.slice();
或者引入immutable库来实现数据不可变 。
原生渲染nativenative指的是使用原生API来开发App，比如IOS使用OC语言，Android使用java 。
vuevue和Weex进行官方合作，weex是阿里巴巴发起的跨平台用户界面开发框架，它的思想是多个平台，只写一套代码，weex允许你使用 vue 语法开发不仅仅可以运行在浏览器端，还能被用于开发 iOS 和 Android 上的原生应用的组件 。即只需要编写一份代码，即可运行在Web、iOS、Android上 。
weex相对来说上手比较简单，安装vue-cli之后就可以使用，学习门槛低，但是它的社区目前还处于成长期，react native的社区非常成熟活跃，有非常丰富的组件可供扩展 。
reactreact native是Facebook在2015年3月在F8开发者大会上开源的跨平台UI框架，需针对iOS、Android不同编写2份代码，使用react native需要按照文档安装配置很多依赖的工具，相对比较麻烦 。weex的思想是多个平台，只写一套代码，而react-native的思想是多个平台可以写多套代码，但其使用的是同一套语言框架 。weex的目标在于抹平各个平台的差异性，从而简化应用开发 。而react-native承认了各个平台之间的差异，退而求其次，在语言和框架层面对平台进行抽象，从方法论的角度去解决多平台开发的问题 。
ssr服务端渲染服务端渲染核心在于方便seo优化，后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给浏览器，以便用户浏览 。


推荐阅读


上一篇：营销策略是什么

下一篇：如何选择笔记本电脑品牌