一般 H5 的，或者一些做不大的系统，首选 Vue。因为 Vue 简单，开发效率比较高。同时 Vue 包的体积也更小，在移动端网络差异大的情况下，资源体积是非常重要的。

像一些后台系统，会越做越大的，就用 React。解决方案更多，后期也更方便迭代与维护。（本人有幸开发过 Vue 大项目，webpack 热更新一下 3mins+）

二、核心思想

Vue 早期定位是尽可能的降低前端开发的门槛（这跟 Vue 作者是独立开发者也有关系）。所以 Vue 推崇灵活易用（渐进式开发体验），数据可变，双向数据绑定（依赖收集）。

React 早期口号是 Rethinking Best Practices(重新思考最佳实践)。背靠大公司 Facebook 的 React，从开始起就不缺关注和用户，而且 React 想要做的是用更好的方式去颠覆前端开发方式（事实上跟早期 jquery 称霸前端，的确是颠覆了）。所以 React 推崇函数式编程（纯组件），数据不可变以及单向数据流。函数式编程最大的好处是其稳定性（无副作用）和可测试性（输入相同，输出一定相同），所以通常大家说的 React 适合大型应用，根本原因还是在于其函数式编程。

由于两者核心思想的不同，所以导致 Vue 和 React 许多外在表现不同（从开发层面看）。

引用这位大哥写的 理解 Vue 和 React 区别

三、生命周期

Vue

Vue 生命周期官方图解

React

大神绘图 React 生命周期 点击生命周期即可跳转官网解读

综合对比

生命周期这块基本都是围绕着挂载、更新、卸载三个方面

• Vue 提供的比较多，但是常用的: created/mounted/destroyed
• React 新版废弃了一些，常用的: componentDidMount/componentDidUpdate/componentWillUnmount，Hooks 更是没有

四、数据流

Vue

双向绑定，单向数据流：vue2.x 通过 v-model 实现双向绑定，可以不关心受控组件，v-model 相当于 onChange 的语法糖

<input v-model="value" />
复制代码

React

单向数据流：万物皆 Props，主要通过 onChange/setState()的形式该更新数据，需要所以在 react 中需要关注受控组件的写法

// 会报错，props的值不可修改
<input value={this.props.value}/>

// 在onChange调用setState修改数据,需要调用setState修改绑定数据
<input value={this.state.value} onChange={this.onChange}/>
复制代码

受控组件

五、组件

1、组件封装

Vue

// 父组件
<template>
  <div class="father">
    父组件
    <Child :text="text"></Child>
  </div>
</template>
<script>
import Child from './Child'
export default {
  name: 'Father',
  components: {
    Child
  },
  data() {
    return {
      text: '接收到了父组件数据'
    }
  }
}
</script>

// 子组件
<template>
  <div class="child">
    <p>{{ text }}</p>
    <p>{{ children }}</p>
  </div>
</template>

<script>
export default {
  name: 'child',
  props: ['text'],
  data() {
    return {
      children: '子组件自己的数据'
    }
  }
}
</script>
复制代码

React

import React, { useState, useEffect } from "react";

function Child({ onClick }) {
  const [list, setList] = useState<number[]>([]);
  useEffect(() => {
    setList([1, 2, 3]);
  }, [onClick]);

  return (
    <div>
      {list.map((item, index) => {
        return <div key={index}>{item}</div>;
      })}
    </div>
  );
}

function Father() {
  const show = () => {
    return [4, 5, 6];
  };

  return (
    <div>
      <Child onClick={show}></Child>
    </div>
  );
}

export default Father;

复制代码

2、组件通信

Vue

• props/emit
• provide/inject
• vuex（双向数据绑定，响应式）
• event bus

React

• props(子传父通过props.function)
• context
• redux（单向数据流）

3、组件嵌套

Vue:slot 插槽

// index.vue
<template>
  <Test>
    <div>插槽文本</div>
  </Test>
</template>;
import Test from "./test";

// test.vue
<template>
  <div>
    <slot></slot>
  </div>
</template>;
复制代码

React: props.children

// 父组件
import Test from "./test";

<Test>
  <div> 组件嵌套 </div>
</Test>;

// 子组件
import * as React from "react";

const Test: React.FC<any> = (props) => {
  return (
    <>
      <div>测试props.children</div>
      <div>{props.children}</div>
    </>
  );
};

export default Test;

文章转载自乐字节

求关注
欢迎大家关注我的 B站账号
B站账号
如果内容有帮到你，欢迎大家点赞、收藏 + 关注

学习交流群
交流群