前言
Vue和React都是目前最流行、生态最好的前端框架之一。框架本身没有优劣之分,只有适用之别,选择符合自身业务场景、团队基础的技术才是我们最主要的目的。
1.背景
vue
Google 前工程师尤雨溪于 2014 年创建了这个框架。Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
react
与 Vue 不同,react 库是由 Facebook 创建的。最初是为了 Facebook 广告流量管理创建的。那时 Facebook 遇到了维护和编码方面的问题。它以动态创建和交互式 UI 的能力而闻名。
2.核心思想
vue与react都推崇组件式的开发理念,但是在设计的核心思想上有很大差别。
vue
vue的整体思想仍然是拥抱经典的html(结构)+css(表现)+js(行为)的形式,vue鼓励开发者使用template模板,并提供指令供开发者使用(v-if、v-show、v-for等等),因此在开发vue应用的时候会有一种在写经典web应用(结构、表现、行为分离)的感觉。另一方面,在针对组件数据上,vue2.0通过Object.defineProperty对数据做到了更细致的监听,精准实现组件级别的更新。
react
react整体上是函数式的思想,组件使用jsx语法,all in js,将html与css全都融入javaScript,jsx语法相对来说更加灵活,我一开始刚转过来也不是很适应,感觉写react应用感觉就像是在写javaScript。当组件调用setState或props变化的时候,组件内部render会重新渲染,子组件也会随之重新渲染,可以通过shouldComponentUpdate或者PureComponent可以避免不必要的重新渲染(个人感觉这一点上不如vue做的好)。
3.组件形式
vue
vue组件定义使用xx.vue文件来表示,vue组件将html、css、js组合到一起,模板部分使用数据使用{{}}。
react
react推荐使用jsx或者js文件来表示组件,react支持class组件和function组件2种形式,react使用{}包裹变量。
注意: 组件名称必须以大写字母开头。React 会将以小写字母开头的组件视为原生 DOM 标签。例如,<div /> 代表 HTML 的 div 标签,而 <Welcome /> 则代表一个组件,并且需在作用域内使用 Welcome。
4.数据管理
组件数据管理通常包含2部分,来自父组件的数据props与自身的数据。
vue与react中的props都是单向数据流的,父级prop的更新会向下流动到子组件中,但是反过来则不行。prop可以是数组或对象,用于接收来自父组件的数据。
5.生命周期
组件的生命周期一般包含:初始化、挂载、更新、卸载四个大阶段,接下来分别看下vue和reac的生命周期。
vue
vue生命周期包含:
beforeCreate
实例组件刚创建,元素DOM和数据都还没有初始化,暂时不能在这个周期里面进行任何操作。
created
数据data已经初始化完成,方法也已经可以调用,但是DOM未渲染。调用后台接口获取数据可以在这个阶段完成。
beforeMount
DOM未完成挂载,数据也初始化完成,但是数据的双向绑定还是显示{{}},虚拟DOM结构已经生成。
mounted
数据和DOM都完成挂载,在上一个周期占位的数据把值给渲染进去。这个周期适合执行初始化需要操作DOM的方法。
beforeUpdate
页面数据改变了都会触发,在更新前触发,此时的数据还是未更新前的数据,没有数据改变则不执行。
updated
页面数据改变都会触发,在更新完成之后触发,此时的数据是更新后的数据。
beforeDestroy
组件销毁之前执行,在这个周期里仍然可以访问data和method,多组件间通信需要发布信息时可以在该阶段完成。
destroyed
当离开组件对应页面时组件销毁时触发,主要用于取消一些副作用(取消事件监听、取消定时器、取消不必要的请求等)
react
react 16.0之后移除的生命周期函数
componentWillMount
componentWillReceiveProps
componentWillUpdate
但是为了向下兼容,react并未删除这三个生命周期,新增以 UNSAFE_ 前缀为别名的三个函数 UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()。
新增的生命周期函数:
static getDerivedStateFromProps(nextProps, prevState)
getSnapshotBeforeUpdate(prevProps, prevState)
总结:
(1)初始化阶段保持不变
(2)挂载阶段:
getDerivedStateFromProps => render => componentDidMount
(3)更新阶段
getDerivedStateFromProps => shoudeComponentUpdate => render => getSnapshotBeforeUpdate => componentDidUpdate
(4)卸载阶段保持不变
总结
这些是个人对vue和react的简单理解,其它内容后期在逐步更新。
Vue和React的一些区别
最新推荐文章于 2024-06-26 13:44:17 发布