FC

ts：FC<any>

import './index.less';

/**
 * ai生文
 */
const CreateText = () => {
    return (
        <div>
            生文
        </div>
    );
};

export default CreateText;

FC hook

const DemoState = (props) => {
   /* number为此时state读取值 ，setNumber为派发更新的函数 */
   let [number, setNumber] = useState(0) /* 0为初始值 */
   return (<div>
       <span>{ number }</span>
       <button onClick={ ()=> {
         setNumber(number+1)
         console.log(number) /* 这里的number是不能够即使改变的  */
       } } ></button>
   </div>)
}

其他

import React, { useState, useEffect } from 'react';

// 使用Hook的函数组件示例
function Clock() {
  // 声明一个新的状态变量，我们将其称为 "count"
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    // 类似于 componentDidMount 和 componentDidUpdate:
    // 更新 DOM 在这里进行
    const timer = setInterval(() => setDate(new Date()), 1000);

    // 清理函数返回一个函数，React 将会在执行最新的 effect 之前运行它
    return () => {
      clearInterval(timer);
    };
  }, []); // 空数组 [] 作为依赖项，表示这个effect只在组件挂载和卸载时执行

  return (
    <div>
      <h2>现在的时间是 {date.toLocaleTimeString()}。</h2>
    </div>
  );
}

这些示例展示了React中不同类型的组件如何定义和使用。函数组件和Hooks因其简洁性和易于测试的特性，在现代React应用开发中变得越来越流行。