Vue 转 React不彻底指北

老东家 Vue，加实习写了两年半~，期间只是简单学过 React，没怎么写过。新东家用 React + Typescript，用了一个半月，写了写Demo 在线预览。

这里简单总结下和vue的区别，若是你也是在Vue转React阶段，欢迎加V交流扫码加V

有不一样看法，欢迎评论区指教🤓

1、横向对比

一、Vue 官方对比

Vue 官方对比 React

二、我的的理解

通常 H5 的，或者一些作不大的系统，首选 Vue。由于 Vue 简单，开发效率比较高。同时 Vue 包的体积也更小，在移动端网络差别大的状况下，资源体积是很是重要的。

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

2、核心思想

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

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

因为二者核心思想的不一样，因此致使 Vue 和 React 许多外在表现不一样（从开发层面看）。

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

3、生命周期

Vue

Vue 生命周期官方图解

React

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

综合对比

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

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

4、数据流

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}/>
复制代码

受控组件

5、组件

一、组件封装

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;

复制代码

二、组件通讯

Vue

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

React

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

三、组件嵌套

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;
复制代码

6、整体感觉

一、一些区别

• vue 更简单，更方便，熟悉了 api 之后，实现某些简单功能更快。react 写法更偏向于原生 JS，Class 的写法不是很舒服，我的更喜欢 hooks。
• 熟悉了 hooks 之后，写起来很自由，不用关心 vue 中固定的 options api
• react 作中后台优点更大，有大厂加持，生态更好，组件库功能也更多，解决方案也更多
• vue2.x 对 typescript 不太友好，react + typescript 更加温馨，二者写起来风格差距较大。
• react JSX 写起来仍是不够熟练，onClick、style、className 等等，没有 v-if，v-for，All in JS。Vue 则推崇 html、js、css 分离的写法，固然 vue 也能够写 JSX
• vue 的 prop 必须在子组件 props 字段里声明。React 的 prop 不强制声明，直接使用，若是用 TS 的话仍是要声明的

二、学习

• 不少人说 vue 转 react 很简单，一周熟练上手。我比较菜，感受适应起来仍是有成本的，可是也没有很难，最主要的仍是要多动手，不懂就深挖为何
• 通读一遍 react 官网，对着例子多敲敲，好好理解，作作笔记。
• B 站 React技术全家桶 学习视频，能够不敲，快速过一遍，毕竟都不是小白了。而后本身搞个项目，去实现一些本身感兴趣的东西
• 基础知识过完之后，查缺补漏，找各类博文读一读，不理解的再次进行学习
• 总结本身的学习成果，react已经学了一段时间了，后面再整理一下，发出来
• 为了提升熟练度，用公司的组件库（zent）本身动手写了写，有兴趣的老哥参考下：在线预览:俊劫学习系统 Github 源码:基于 react + typescript 欢迎start

三、资源推荐

• React 中文文档
• React 生命周期图解
• React + TypeScript实践 字节前端
• 「React进阶」 React所有api解读+基础实践大全(夯实基础2万字总结)
• React Hooks 万字总结 哈罗技术团队
• 学习React Hooks系列 - useRef
• React+TS+Redux+Antd从零开发一个企业级后台管理系统 B站视频 视频
• B 站 React技术全家桶 视频

7、参考文章

• 「Vue」与「React」--使用上的区别
• 从 Vue 转 React 的一些体验
• Vue 转 React 指南，看这篇文章就够了
• 理解 Vue 和 React 区别

8、最后