单位老项目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:
const isRunning = useMemo(() => {return props.data.status === 'running';
}, [props.data.status]);
后续慢慢补充。。。
