vue组件和react组件的原理有什么不同_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 6:39:43 共计：3604 浏览

vue组件和react组件的原理有什么不同？

很高兴回答你的问题:

两个组件的原理我准备用比较的方式来了解下，毕竟通过比较才知道各有各的优势吧。

共同点都使用虚拟dom。提供了响应式和组件化的视图组件。注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。区别监听数据变化的实现原理不同

Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能。

React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染。

2. 数据流的不同

大家都知道Vue中默认是支持双向绑定的。在Vue1.0中我们可以实现两种双向绑定：

父子组件之间，props 可以双向绑定

组件与DOM之间可以通过 v-model 双向绑定。

在 Vue2.x 中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。

所以现在我们只有组件 <--> DOM 之间的双向绑定这一种。

然而 React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState()模式。

3. HoC 和 mixins

在 Vue 中我们组合不同功能的方式是通过 mixin，而在React中我们通过 HoC (高阶组件）。

4. 组件通信的区别

5. 模板渲染方式的不同

React 是通过JSX渲染模板

Vue是通过一种拓展的HTML语法进行渲染

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。