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、最後