写给vue转react的同志们(4)

3,772

本系列文章将由浅慢慢深入,一步步带你领略react和vue的同工异曲之处,让你左手react,右手vue无忧。

前提要顾:

写给vue转react的同志们(1)

写给vue转react的同志们(2)

写给vue转react的同志们(3)

应各位老爷要求,这篇文章开始拥抱hooks,本文将从vue3react 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>
    );
}


通过比较上述代码可以看到vue3react 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 实现监听

vue3watch被暴露成一个方法通过传入对应监听的参数以及回调函数实现,react中也有类似的功能useEffect,实际上他和componentDidMountcomponentDidUpdate 和 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.xoptions写法或者react class的写法还是居多,把这些项目迁移迭代到最新才是头疼的事情,当然选择适合现有项目的技术体系才是最重要的。