单位老项目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很常见的一个参数,下面讲解了大概的意思（没写过react企业级项目，可能意思理解不是很正确）
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>
)
}
然后上面的函数可以优化下,这样可以一直点，数值一直变大
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} value={value}></Child>
</>
)
}
// 子组件
function Child(props) {
const fn1 = () => {
props.fn(props.value+1)
}
return (
<button onClick={fn1}>子传父{props.value}</button>
)
}
如果要获取组件的ref对象，要咋获取呢，需要用到关键字useRef，对比下vue3就不需要这个关键字了
vue3:
<button ref="tableRef" className="square" onClick={onSquareClick}>
{{count}}
</button>
const tableRef = ref(null);
react:
const tableRef = useRef<any>();
return (
<button ref={tableRef} className="square" onClick={onSquareClick}>
{count}
</button>
);
路由跳转：
vue3:
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
// 获取路由的params数据
const projectId = route.params.projectId;
// 路由跳转
router.push({ path: `/project/xxx/edit`, query: { id: '123' } });
react:
import React from 'react'
import { useHistory,useLocation } from 'react-router-dom'
export default ()=> {
const history = useHistory();
const location = useLocation();
// 获取路由数据
console.log(location, 'props');
// 路由跳转 路由跳转后，参数会显示在地址栏
history.push({pathname: '/personal', search: 'test=22222'});
// 路由跳转 路由跳转后，页面刷新不会丢失数据，并且地址栏也看不到数据 跳转的方法是使用
history.push({pathname: '/personal', state: { test: 'dashboard' }})
return 123
}
计算属性，vue里面用的是computed，react有个类似的useMemo
useMemo使用：
useMemo(fn, arr)第一个参数为函数。第二个参数为依赖项，并且其值发生改变，才会多次执行执行，否则只执行一次，如果为空数组[]，fn只执行一次。
vue3:
const isRunning = computed(() => {
return props.data.status === 'running';
});
react:文章来源：https://www.toymoban.com/news/detail-611787.html
const isRunning = useMemo(() => {
return props.data.status === 'running';
}, [props.data.status]);
后续慢慢补充。。。文章来源地址https://www.toymoban.com/news/detail-611787.html
到了这里，关于从vue3速学react的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
