React中哪种写法性能更好更推荐？

// 函数组件
function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

// 类组件
class MyComponent extends React.Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

// 使用useState Hook
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// 使用useEffect Hook
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return data ? <div>Data: {JSON.stringify(data)}</div> : <div>Loading...</div>;
}

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
});

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}