用于TransitionGroup的组件_TransitionGroup需要486秒来删除500个组件_使用React的转换-我应该使用TransitionGroup吗？ - 腾讯云开发者社区

用于TransitionGroup的组件

基础概念

TransitionGroup 是 React 中的一个组件，用于管理一组组件的进入和离开动画。它通常与 CSSTransition 组件一起使用，以实现平滑的过渡效果。TransitionGroup 会跟踪其子组件的挂载和卸载，并在子组件变化时自动应用过渡效果。

类型

TransitionGroup 主要有以下几种类型：

默认类型：使用 CSS 过渡来实现动画效果。
JavaScript 类型：使用 JavaScript 回调函数来实现动画效果。

应用场景

列表项的动态添加和删除：当列表项需要动态添加或删除时，可以使用 TransitionGroup 来实现平滑的过渡效果。
模态框的显示和隐藏：当模态框需要显示或隐藏时，可以使用 TransitionGroup 来实现动画效果。
页面切换：在单页应用中，页面切换时可以使用 TransitionGroup 来实现平滑的过渡效果。

示例代码

以下是一个简单的示例，展示如何使用 TransitionGroup 和 CSSTransition 实现列表项的动态添加和删除动画：

import React, { useState } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import './App.css';

function App() {
  const [items, setItems] = useState([{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]);

  const addItem = () => {
    const newItem = { id: items.length + 1, text: `Item ${items.length + 1}` };
    setItems([...items, newItem]);
  };

  const removeItem = (id) => {
    setItems(items.filter(item => item.id !== id));
  };

  return (
    <div className="App">
      <button onClick={addItem}>Add Item</button>
      <TransitionGroup className="list">
        {items.map(item => (
          <CSSTransition key={item.id} timeout={500} classNames="item">
            <div className="list-item">
              {item.text} <button onClick={() => removeItem(item.id)}>Remove</button>
            </div>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
}

export default App;

CSS 样式

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.item-enter {
  opacity: 0;
  transform: scale(0.5);
}

.item-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 500ms, transform 500ms;
}

.item-exit {
  opacity: 1;
  transform: scale(1);
}

.item-exit-active {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 500ms, transform 500ms;
}