从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 事件绑定:

<!-- 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;