创建函数写法一：
重点：函数有几种写法
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>react+ts的父子组件传参
父组件<SonDemo sendSon="fromfather"></SonDemo>子组件import React from 'react';interface MiddleProps {sendSon: string;
}const App: React.FC<MiddleProps> = (props) => {console.log(props.sendSon); // 正确解构 propsreturn (<div>{props.sendSon}</div> // 返回一个 div 元素，展示 sendSon 的值);
};export default App;
