网站设计宁波,西安seo网站推广优化,海洋公园网站建设方案,浙江省建设网站单位老项目vue2,新项目vue3,业务已经熟练使用vue了#xff0c;空余时间自学下react#xff0c;写个博客记录下
react没有双向绑定#xff0c;用的是jsx语法#xff0c;useState后面是初始化值#xff0c;需要改变data的时候#xff0c;需要用定义的setXXX来改变XXX值空余时间自学下react写个博客记录下
react没有双向绑定用的是jsx语法useState后面是初始化值需要改变data的时候需要用定义的setXXX来改变XXX值比如下面我写的就是setData里面可以直接赋值也可以写个复杂的函数处理
vue3:
const dataref({});
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 classNamesquare{value}/button;
}export default function Board() {return (div classNameboard-rowSquare value1 /Square value2 /Square value3 //divdiv classNameboard-rowSquare value4 /Square value5 /Square value6 //divdiv classNameboard-rowSquare value7 /Square value8 /Square value9 //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}/divChild fn{fn}/Child/)
}// 子组件
function Child(props) {const fn1 () {props.fn(123)}return (button onClick{fn1}子传父/button)
}后续慢慢补充。。。
