从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:

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>
  )
}

后续慢慢补充。。。