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.FC

const 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>