vue 与 react 有很多的相似之处, 但它们也有完全不一致的地方. 下面本篇文章给大家介绍一些 vue 框架和 react 的区别. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
vue 框架和 react 的区别
设计思想
vue: vue 的官网介绍说 vue 是一种渐进式框架, 采用自底向上增量开发的设计;
react: 采用函数式编程, 推崇纯组件, 数据不可变, 单向数据流;
构建工具
vue: 提供 cli 脚手架, 可以非常容易的创建项目并进行配置;
react: 使用 creat-react-App, 有局限行, 不能完成某些配置;
编写语法
vue: 采用单文件组件格式, 保留了 html,CSS,JS 分离的写法;
react: 通过 jsx 渲染模板, HTML,CSS 全部写入 JS 中;
REACT 与 vue 最大的不同是模板的编写. vue 鼓励你去写近似常规的 HTML 的模板. 写起来很接近标准 HTML 元素, 只是多了一些属性.
- <ul>
- <template v-for="item in items">
- <li>{{ item.msg }}</li>
- <li class="divider"></li>
- </template>
- </ul>
这些属性也可以被使用在但文件组件中, 尽管它需要在构建时将组件转换为合法的 JavaScript 和 HTML.
- <ul>
- <pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key"
- @order="handleOrder(key)">
- </pasta-item>
- </ul>
vue 鼓励你去使用 HTML 模板去进行渲染, 使用相似于 Angular 风格的方法去输出动态的内容. 因此, 通过把原有的模板整合成新的 Vue 模板, Vue 很容易提供旧的应用的升级. 这也让新来者很容易适应它的语法..
另一方面, React 推荐你所有的模板通用 JavaScript 的语法扩展 --JSX 书写. 同样的代码, 用 JSX 书写的例子如下:
- <ul className="pasta-list">
- {
- Object.keys(this.state.pastadishes).map(key =>
- <PastaItem index={key} key={key} details={this.state.pastadishes[key]}
- addToOrder={this.addToOrder} orders={this.state.orders[key]} />
- )
- }
- </ul>
React/JSX 乍看之下, 觉得非常啰嗦, 但使用 JavaScript 而不是模板来开发, 赋予了开着许多编程能力.
但清记住: 能力越大, 责任越大. Ben Parker
JSX 只是 JavaScript 混合着 xml 语法, 然而一旦你掌握了它, 它使用起来会让你感到畅快. 这可能只是我个人的意见, 但我觉得这比 Angular 1 风格的属性好多了, Angular 1 真的难以忍受.
而相反的观点是 VUE 的模板语法去除了往视图, 组件中添加逻辑的诱惑, 保持了关注点分离.
值得一提的是, 与 REACT 一样, vue 在技术上也支持 render 函数和 JSX, 但只是不默认而已.
状态管理 VS 对象属性
如果你对 REACT 熟悉, 你会知道应用中的状态是 REACT 关键的概念. 也有一些配套框架被设计管理一个大的 state 对象, 如 Redux. 此外, state 独享在 REACT 应用中是不可边的, 意味着它不能被直接改变, 这 yexu 不一定正确. 在 REACT 中你需要使用 setState() 方法去更新状态.
- addToOrder(key) {
- //Make a copy of this.state
- const orders = { ...this.state.orders };
- //update or add
- orders[ key ] = orders[ key ] + 1 || 1;
- this.setState( { orders } );
- }
在 VUE 中, state 对象并不是必须的, 数据由 date 属性在 vue 对象中进行管理.
- export default {
- name: 'app',
- data() {
- return {
- samplePasta: samplePasta,
- orders: {}
- }
- },
- ...
- methods: {
- handleOrder: function (key) {
- if (!this.orders.hasOwnProperty(key)) {
- this.$set(this.orders, key, { count: 0 });
- }
- this.orders[key].count += 1;
- }
- }
- }
而在 vue 中, 则不需要使用如 setState() 之类的方法去改变它的状态, 在 VUE 对象中, data 参数就是应用中数据的保存者.
对于管理大型应用中的状态这一话题而言, vue.js 的作者尤雨溪曾说过,(Vue 的) 解决方案适用于小型应用, 但对于对于大型应用而言不太适合.
多数情况下, 框架内置的状态管理是不足以支撑大型应用的, Redux 或 Vuex 等状态管理方法是必须使用的.
有鉴于次, 争论你的应用中如何管理状态很有可能属于过早优化, 并且这很可能只是客人偏好问题. 此外, 你可能真没必要担心这方面.
REACT Native vs>?
React Native 能在手机上创建原生应用, React 在这方面处于领先位置. 使用 JavaScript, CSS 和 HTML 创建原生移动应用, 这是一个重要的革新.
vue 也有很多第三方制作的, 例如阿里的 Weex, 以及 UNI-App 等.
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/17215.html