React学习笔记（一）

创建函数写法一：

重点：函数有几种写法

function DemoShow() {return (<div className="App">函数声明</div>);
}export default DemoShow;对应js创建函数声明：function sum1(a,b){return a+b
}

创建函数写法二：

import React from 'react'const DemoShow:React.FC=()=>{return{<div>函数表达式</div>}}export default DemoShow对应函数表达式 由于我这边是ts所以有引React.FCconst sun2 = (a,b)=>{console.log(a+b)}

变量写法与Vue对比

react

function TextComponent() {const a = 1;return (<div>React变量写法 {a}</div>);
}export default TextComponent;

 Vue2

<template><div>Vue2的变量写法{{ a }}</div>
</template><script>
export default {data() {return {a: 10};}
};
</script>

Vue3

<template>
模版里面不用.value
<div>Vue3的变量写法{{a}}</div>
<button @click="BtnClick">按钮</button></template><script setup>
import { ref } from 'vue'
const a = ref(10)
ref的变量在方法里面要.value
const BtnClick = () => {console.log(a.value)
}
</script>

行内样式非变量写法对比

react

function App() {return (<div style={{ color: 'red'，fontSize:'18px' }}>红色</div>);
}

Vue 

<template><div style="color: rgba(0, 0, 0, 0.65); font-size: 14px;">Vue的非变量的行内样式写法</div><div :style="styleObject"></div>
</template><script>
export default {data() {return {color: "red",fontSize: "14px"};},computed: {styleObject() {return {color: this.color,fontSize: this.fontSize};}}
};
</script>