Vue 轉 React 不完全指北

一、橫向對比

1、Vue 官方對比

Vue 官方對比 React

2、個人的理解

一般 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

雙向綁定，單向數據流：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

React

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;
複製代碼

六、總體感受

1、一些區別

2、學習

3、資源推薦

七、參考文章

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/iNdgQf4gtVDOaYE6T5dduA

猜你喜歡