写给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的写法仍是居多，把这些项目迁移迭代到最新才是头疼的事情，固然选择适合现有项目的技术体系才是最重要的。