从Vue快速上手React
前言
还没使用过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>
<button
onClick={() => {
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 事件绑定:
<template>
<div>
{{ count }}
<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传递
<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可以通过向子组件传递回调函数实现
<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 插槽:
<template>
<ChildComponent>
<h1>默认位置h1>
<h2 slot="place2">第二位置h2>
ChildComponent>
template>
<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;