自己写一个react 进出场动画的组件，不使用现有的组件

好的，以下是一个使用React Hooks自定义的进出场动画组件示例：

import React, { useState, useEffect } from 'react';
import './FadeInOut.css'; // 引入CSS文件

const FadeInOut = ({ children }) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  const handleAnimationEnd = () => {
    if (!isVisible) {
      setIsVisible(true);
    }
  };

  const handleTransitionEnd = () => {
    if (!isVisible) {
      setIsVisible(false);
    }
  };

  return (
    <div
      className={`fade ${isVisible ? 'fade-in' : 'fade-out'}`}
      onAnimationEnd={handleAnimationEnd}
      onTransitionEnd={handleTransitionEnd}
    >
      {children}
    </div>
  );
};

export default FadeInOut;

其中，使用了`useState`来管理组件的进出场状态，使用了`useEffect`来在组件挂载时设置初始状态。在`handleAnimationEnd`和`handleTransitionEnd`方法中，根据组件的进出场状态判断是否需要隐藏组件，从而实现进出场动画效果。

需要在CSS文件中定义动画效果，例如：

.fade {
  transition: opacity 0.3s ease-in-out;
}

.fade-in {
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

以上代码实现了一个简单的淡入淡出效果，可以通过修改CSS文件来实现更多样的动画效果。