从vue3速学react

单位老项目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]);

后续慢慢补充。。。