当前位置：首页 > news >正文

从vue3速学react

news 2025/8/4 7:28:42

单位老项目vue2,新项目vue3,业务已经熟练使用vue了，空余时间自学下react，写个博客记录下

react没有双向绑定，用的是jsx语法，useState后面是初始化值，需要改变data的时候，需要用定义的setXXX来改变XXX值，比如下面我写的就是setData，里面可以直接赋值，也可以写个复杂的函数处理

vue3:

const data=ref({});
data.value={xxx:xxxx};

react:

const [data, setData] = useState({});
setData({xxx:xxxx});
// 也可以写函数
setData(()=>{return {xxx:xxxx}
});

useEffect，很常见的一个参数

react:

useEffect(() => {// 副作用函数的内容
})  
每次更新之后都要执行
和vue的watchEffect类似
--------------------
useEffect(() => {// 副作用函数的内容
}, []) 
初始化页面时 只执行第一次
和vue的onMonuted类似
--------------------
useEffect(() => {// 副作用函数的内容
}, [依赖项]) //依赖项可以有多个
1 初始执行一次 2 每次依赖项的值变化时执行
和vue的watch并设置immediate类似

那react是怎么传数据的呢？vue里面有props上下级传，react里面一个个组件都写成了函数的形式，如下，参考的是官网的例子，父组件Board给子组件Square的value传值

切记，react语法，如果函数是组件，函数名称要大写

react:

function Square({ value }) {return <button className="square">{value}</button>;
}export default function Board() {return (<><div className="board-row"><Square value="1" /><Square value="2" /><Square value="3" /></div><div className="board-row"><Square value="4" /><Square value="5" /><Square value="6" /></div><div className="board-row"><Square value="7" /><Square value="8" /><Square value="9" /></div></>);
}

那么vue里面的emit在react要怎么实现呢
通过父组件传递函数让子组件调用

import {useState} from 'react'
// 父组件
export default function App() {const [value,setValue] = useState(0)const fn = (value) => {setValue(value)}return (<><div>我是子组件传递的Value:{value}</div><Child fn={fn}></Child></>)
}// 子组件
function Child(props) {const fn1 = () => {props.fn(123)}return (<button onClick={fn1}>子传父</button>)
}