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>

react父子组件props传参

函数表达式写法

父组件

<SonDemo sendSon="fromfather"></SonDemo>


子组件

import React from 'react';

interface IncomeProps{
  sendSon: string;
}

const App: React.FC<IncomeProps> = (props) => {
  console.log(props.sendSon); // 正确解构 props
  return (
    <div>{props.sendSon}</div> // 返回一个 div 元素，展示 sendSon 的值
  );
};

export default App;

函数声明版本

interface IncomeProps{
    clickFn:()=>void
}

function Form(props:IncomeProps){
    const submitShow = () => {
      props.clickFn();
    }

  return(
   <div onClick={submitShow }>
   调用父组件的方法
   </div>


   )

}

react循环显示多个子组件

import React from "react";

// 假设ToDo组件已经定义
const ToDo = ({ id, name, completed, key }) => {
  // ToDo组件的实现
  return (
    <div>
      <span>{ name }</span>
      <input type="checkbox" checked={ completed } />
    </div>
  );
};

const DATA = [
  { id: "todo-1", name: "11", completed: true, key: "todo-1" },
  { id: "todo-2", name: "22", completed: false, key: "todo-2" },
  { id: "todo-3", name: "33", completed: true, key: "todo-3" },
];

const App: React.FC = () => {
  const taskList = DATA.map(task => (
    <ToDo key={task.key} id={task.id} name={task.name} completed={task.completed} />
  ));
  return (
    <div>
      {taskList}
    </div>
  );
};

export default App;