从写React Hooks到Vue3 JSX

前言

本人写了2年多的React hooks,最近新单位用的框架是Vue3所以转为Vue3技术栈,仅此记录本人从React开发转为Vue3开发的短期内自学的核心要点。鉴于本人水平有限,难以避免错误或者遗漏,请大佬们多多指教。

React业务代码日常使用jsx去写,Vue3则是template,当然也可以使用jsx,本文所有示例代码都是Vue+jsx的。

1. 状态变量

1.1 变量声明

React通过const [count, onChange] = useState()来创建一个状态变量,vue则通过const count = ref()或者const countContainer = reactive{count: null}来创建变量,考虑到一开始接触vue3,ref和reactive的处理方式不同,会显著增加大脑负担,建议新手直接全部用ref声明变量,并用类似count.value来调用。

1.2 变量改变

react可通过调用变更函数onChange(newCount)来改变原value的值,在vue中可以直接通过赋值进行改变,count.value = newCount

2. 父子组件传值

React的父子组件传值,直接通过给子组件加属性就可以完成。

考虑如下React组件:

const [count, onChange] = useState();
<Child count={count} onChange={onChange} />

比如父组件声明需要传递给子组件的变量,子组件通过props.countprops.onChange取值即可,但是vue相对来说复杂得多。

对比如下Vue父组件场景:

const count = ref();
const onChange = (v) => {count.value = v};
return () => <Child count={count.value} onChange={onChange} />

子组件要通过声明props和emits来取值:

export default defineComponent({
    props: ["count"],
    emits: ["change"],
    setup: (props, {emit, attrs}) => {
        const changeCount = () => {
            emit('change', props.count + 1)
        }
        return () => <button onClick={changeCount}>加1</button>
    }
})

这里Vvue会自动截取带on的函数名,从onChange -> change。

还有一种是Vue双向绑定的写法,父组件用v-model绑定属性,子组件用update去改变状态。

例如,父组件给子组件绑定方法:

<Child v-model:count={count.value} />

子组件的处理方式:

export default defineComponent({
    props: ["count"],
    emits: ["update:count"],
    setup: (props, {emit, attrs}) => {
        const changeCount = () => {
            emit("update:count", props.count + 1)
        }
        return () => <button onClick={changeCount}>加1</button>
    }
})

3. 组件刷新

React默认在props改变时,会自动刷新组件,调用组件函数来刷新所有状态,vue没有这个机制,需要通过对props相对应的变量的监听来改变其他的状态。

考虑如下React场景:

const countRelated = props.count + 1; 
return <div>{countrelated}</div>

vue需要这样来使用:

const countRelated = ref(0);
watch(() => props.count, (val) => {
    countReacted.value = val;
});
return () => <div>{countRelated.value}</div>

包括当使用React的useEffect用于监听变量改变,也应该用Vue的watch去写

总结

React hooks和Vue3 组合API在写法上非常相似,只要注意到少许的不同点,切换技术栈的速度可以相当快

原文链接:https://juejin.cn/post/7235091963313717309 作者:chenliangngng

(0)
上一篇 2023年5月21日 上午10:00
下一篇 2023年5月21日 上午10:10

相关推荐

发表评论

登录后才能评论