reactjs - ReactCSSTransitionGroup 或 {CSSTransition, TransitionGroup}

Question

我对 ReactCSSTransitionGroup 有点困惑。阅读文档

• https://reactjs.org/docs/animation.html

• http://reactcommunity.org/react-transition-group/

在使用的示例中：ReactCSSTransitionGroup 和单个 CSSTransition，在列表示例 {CSSTransition, TransitionGroup}

所以他们都做同样的事情（动画），但 ReactCSSTransitionGroup 看起来像这样

全部来自文档示例

 render() {
  return (
    <ReactCSSTransitionGroup
      transitionName="example"
      transitionAppear={true}
      transitionAppearTimeout={500}
      transitionEnter={false}
      transitionLeave={false}>
      <h1>Fading at Initial Mount</h1>
    </ReactCSSTransitionGroup>
  );
}

单个 CSSTransition

<CSSTransition
   in={showValidationMessage}
   timeout={300}
   classNames="message"
   unmountOnExit
   onExited={() => {
     this.setState({
     showValidationButton: true,});}}
  >
          *some code*        
</CSSTransition>

{CSSTransition, TransitionGroup} - 像这样

<TransitionGroup className="todo-list">
   {items.map(({ id, text }) => (
      <CSSTransition key={id}  timeout={500} classNames="fade">
         <ListGroupItem>
           *Some code*
         </ListGroupItem>
     </CSSTransition>
  ))}
</TransitionGroup>

那么什么时候我应该/更好地使用 ReactCSSTransitionGroup, single CSSTransition 或 {CSSTransition, TransitionGroup} ？