前言
还没使用过React 的 vue同学可以通过这篇博客快速上手React。
1、数据读写
Vue 数据读写：
import { ref, reactive } from 'vue'const str = ref<string>('Aos')
const obj = reactive<Record<string, string>>({name: 'vue',version: '3.2.x'
})
str.value = '66666'
console.log(obj.name,str.value)
React 数据读写：
import React, { useState } from "react";const Component: React.FC = function () {const [getCount, setCount] = useState<number>(0);return (<><div>{getCount}</div><button onClick={() => setCount(getCount + 1)} /></>);
};export default Component;
2、数据监听
Vue提供了 watch 帮忙监听数据变化
React提供了 useEffect 帮忙监听数据变化，但请注意，useEffect还有其他用途，并不局限于此
注意：vue中的数据监听watch可以直接获取新旧值，而react中数据监听useEffect不支持直接获取新旧值
Vue 数据监听:
import { watch, ref, reactive } from 'vue'
const aaa = ref<string>('123456')
const bbb = reactive<Record<string, string>>({name: 'vue',version: '3.3.4'
})
// 单个监听
watch(aaa, (val, oldVal) => {console.log(val)console.log(oldVal)
})
// 多个监听
watch([aaa, bbb], (val, oldVal) => {console.log(val)console.log(oldVal)
}, {deep: true,immediate: true
})
React 数据监听:
import React, { useState, useEffect } from "react";const app = () => {const [count, setCount] = useState<number>(0);const [aaa, setAaa] = useState<number>(100);useEffect(() => {console.log("监听count");// 注意：这个初始化时会执行一次，类似于 watch 的 immediate = true}, [count]);useEffect(() => {console.log("支持多个监听");}, [count, aaa]);return (<><div>count: {count}</div><div>aaa: {aaa}</div><button onClick={() => setCount(count + 1)}>count++</button><buttononClick={() => {setCount(count => count + 1);setAaa(aaa => aaa + 1);}}>多个</button></>);
};export default app;
React 获取新旧值方法示例:
import React, { useState, useEffect, useRef } from "react";export default function RefHookDemo() {const [count, setCount] = useState(0);const countRef = useRef(count);useEffect(() => {console.log("旧值", countRef.current);countRef.current = count;console.log("新值", count);}, [count]);return (<div><h2>前一次的值: {countRef.current}</h2><h2>这一次的值: {count}</h2><button onClick={() => setCount(count + 1)}>+1</button></div>);
}
3、事件绑定
vue 事件绑定:
<!-- vue3 -->
<template><div>{{ count }}<!-- vue dom事件绑定时候必须传 运行函数 --><button @click="setCount()"> +1 </button><button @click="setCount(3)"> +3 </button><button @click="() => { setCount(5) }"> +5 </button><button @click="count += 7"> +7 </button></div>
</template><script lang="ts" setup>
import { ref } from 'vue'const count = ref<number>(0)const setCount = (addNum: number = 1) => {count.value += addNum
}
</script>
React 事件绑定:
import React, { useState } from "react";const app = () => {const [count, setCount] = useState<number>(0);const addNum = (num: number) => {setCount(count + num);};return (<>{count}{/* react dom事件绑定时候必须传函数类型 */}<button onClick={() => addNum(1)}> +1 </button><button onClick={() => setCount(count + 3)}> +3 </button></>);
};export default app;
4、父子组件通信
父 => 子：
vue和react都一样，通过 props传递
<!-- vue3 -->
<template><childComponent title="data1" :value="23" />
</template>
<script lang="ts" setup>
import childComponent from 'xxxxxx'
</script>// React
import React from "react";const Child = (porps: any) => {return (<><div>title: {porps.title}</div><div>value: {porps.value}</div></>);
};const Parent = () => {const title = "标签";return <Child title={title} value="23" />;
};export default Parent;
子 => 父：
Vue可以通过emits向父传递回调事件，React可以通过向子组件传递回调函数实现
<!-- vue3 -->
<template><button @click="sendMsg()">向父传消息</button>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue'
const $emits = defineEmits(['send'])const sendMsg = () => {$emits('send', '我是子组件的回调')
}
</script>
// React
import React, { useCallback } from "react";const Child = (porps: any) => {return <button onClick={porps.cb}>向父传消息</button>;
};const Parent = () => {const getChildEvent = useCallback(() => {console.log("我是子组件的回调");}, []);return <Child cb={getChildEvent} />;
};export default Parent;
使用useCallBack包一下需要传入子组件的那个函数。那样的话，父组件重新渲染，子组件中的函数就会因为被useCallBack保护而返回旧的函数地址，子组件就不会检测成地址变化，也就不会重选渲染。
5、插槽
vue通过插槽方式实现，react通过获取props.children，加载到对应位置实现
Vue 插槽:
<!-- vue3 parent -->
<template><ChildComponent><h1>默认位置</h1><h2 slot="place2">第二位置</h2></ChildComponent>
</template>
<!-- vue3 Child -->
<template><div><!-- 默认位置 --><slot></slot><hr/><!-- 第二位置 --><slot name="place2"></slot></div>
</template>
React 插槽:
import React from "react";const Child = (porps: any) => {return (<>{porps.place}<hr />{porps.place2}</>);
};const Parent = () => {return <Child place={<h1>默认位置</h1>} place2={<h2>第二位置</h2>}></Child>;
};export default Parent;
React 实现 v-if 指令
import { useState } from "react";const Child = (porps: any) => {return <>{porps.show ? <div>条件渲染</div> : null}</>;
};const Parent = () => {const [show, setShow] = useState(false);return (<><button onClick={() => setShow(!show)}>控制条件隐藏</button><Child show={show}></Child></>);
};export default Parent;
React 实现 v-for 指令
import React from "react";const app = () => {const list = [9, 0, 6, 8, 1, 4, 9];return (<>{list.map((item, index) => {return <div key={index}>{item}</div>;})}</>);
};export default app;
React 实现 v-model 指令
import { useState } from "react";const app = () => {const [value, setValue] = useState("");const onChange = e => {setValue(e.target.value);};return (<><input value={value} onChange={onChange} /></>);
};export default app;
