寫給vue轉react的同志們（4）

本系列文章將由淺慢慢深刻，一步步帶你領略react和vue的同工異曲之處，讓你左手react，右手vue無憂。

前提要顧：

寫給vue轉react的同志們（1）

寫給vue轉react的同志們（2）

寫給vue轉react的同志們（3）

應各位老爺要求，這篇文章開始擁抱hooks，本文將從vue3與react 17.x（hooks）對比來感覺兩大框架的同工異曲之處。

今天的主題：

1. vue3與react 定義與修改數據
2. vue3與react 計算屬性
3. vue3與react 實現監聽

vue3與react hooks 定義與修改數據

實際上二者都是偏hooks的寫法，這樣的高靈活性的組合，相信大部分人仍是以爲香的，不管是之前的vue options或是react class的寫法都是比較臃腫且複用性較差的（相較於hooks）。下面舉個例子對比一下。

vue3

<template>
    <div> <p @click='setObj'>age: {{obj.age}}</p> <p>sex: {{obj.sex}}</p> </div>
</template>
<script> import { reactive } from 'vue' export default { setup() { const obj = reactive({ age: 25, sex: 'man' }) function setObj() { obj.age ++ } return { obj, setObj } } } </script>
複製代碼

react

import { useState } from 'react';
function App() {
    const [todos, setTodos] = useState({ 
        age: 25,
        sex: 'man'
    })
    const setObj = () => {
        setTodos({
            ...todos,
            age: todos.age + 1
        })
    }
    return (
        <div> <p onClick={setObj}>{todos.age}</p> <p>{todos.sex}</p> </div>
    );
}


複製代碼

經過比較上述代碼能夠看到vue3和react hooks基本寫法是差很少的，只是vue提倡template寫法，react提倡jsx寫法，模板的寫法並不影響你js邏輯的使用，因此不論框架再怎麼變化，js也是咱們前端的鐵飯碗，請各位務必掌握好！

vue3與react 計算屬性

計算屬性這一塊是爲了避免讓咱們在模板處寫上太過複雜的運算，這是計算屬性存在的意義。vue3中提供了computed方法，react hook提供了useMemo讓咱們實現計算屬性（沒有類寫法中可使用get來實現計算屬性具體可看往期文章）

vue3

<template>
    <div> <p>age: {{obj.age}}</p> <p>sex: {{obj.sex}}</p> <p>info: {{people}}</p> </div>
</template>
<script> import { reactive, computed } from 'vue' export default { setup() { const obj = reactive({ age: 25, sex: 'man' }) const people = computed(() => { return `this people age is ${obj.age}, sex is ${obj.sex}` }) return { obj, people } } } </script>

複製代碼

react

import { useMemo, useState } from 'react'
function App() {
    const [obj, setObj] = useState({ 
        age: 25,
        sex: 'man'
    })
    const people = useMemo(() => {
        return `this people age is ${obj.age} and sex is ${obj.sex}`
    }, [obj])
    return (
        <div> <p>age: {obj.age}</p> <p>sex: {obj.sex}</p> <p>info: {people}</p> </div>
    )
}

複製代碼

能夠看到對比兩大框架的計算屬性，除了模板書寫略有不一樣其餘基本神似，都是hooks寫法，經過框架內部暴露的某個方法去實現某個操做，這樣一來追述和定位錯誤時也更加方便，hooks大機率就是現代框架的趨勢，它不只讓開發者的代碼能夠更加靈活的組合複用，數據和方法來源也更加容易定位清晰。

vue3與react 實現監聽

在vue3裏watch被暴露成一個方法經過傳入對應監聽的參數以及回調函數實現，react中也有相似的功能useEffect，實際上他和componentDidMount、componentDidUpdate 和 componentWillUnmount 具備相同的用途，只不過被合併成了一個 API。看例子：

vue3

<template>
    <div> <p @click="setCount">count: {{count}}</p> </div>
</template>
import { ref, watch } from 'vue'
export default {
    setup() {
        const count = ref(0)
        watch(count,
          (val) => {
            console.log(val)
          },
          { immediate: true, deep: true }
        )
        function setCount() {
          count.value ++
        }
        return {
            count,
            setCount
        }
    }
    
}
複製代碼

react

import { useState, useEffect } from 'react'
function App() {
    const [count, setCount] = useState(0)
    const setCount = () => {
        setCount(count + 1)
    }
    useEffect(() => {
        console.log(count)
    })
    return (
        <div> <p onClick={setCount}>count: {count}</p> </div>
    )
}
複製代碼

能夠看到，vue3總體趨勢是往hooks靠，不難看出來將來不論哪一種框架大機率最終都會往hooks靠，react hooks無疑是給了咱們巨大的啓發，函數式編程會愈來愈普及，從遠古時期的傳統三大金剛html、css、script就能產出一個頁面到如今的組件化，一個js便可是一個頁面。

總結

函數式編程是趨勢，但其實有不少老項目都是基於vue2.x的options寫法或者react class的寫法仍是居多，把這些項目遷移迭代到最新纔是頭疼的事情，固然選擇適合現有項目的技術體系纔是最重要的。