React v17 StrictMode下react-transition-group findDOMNode警告及删除闪屏问题

修复方案 #

import React, { Fragment, useEffect, useRef } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { useContactContext } from '../../context/contact/contactContext';
import { useAuthContext } from '../../context/auth/authContext';

import ContactItem from './ContactItem';
import Spinner from '../layout/Spinner';

// TransitionItem抽离到Contacts组件外部定义
const TransitionItem = ({ contact, ...props }) => {
  const ref = useRef(null);
  return (
    <CSSTransition nodeRef={ref} timeout={1000} classNames="item" {...props}>
      <div ref={ref}>
        <ContactItem contact={contact} />
      </div>
    </CSSTransition>
  );
};

const Contacts = () => {
  const { contacts, filtered, getContacts, loading } = useContactContext();
  const { isAuthenticated } = useAuthContext();

  useEffect(() => {
    if (isAuthenticated) {
      getContacts();
    }
    // eslint-disable-next-line
  }, [isAuthenticated]);

  if (!loading && contacts !== null && contacts.length === 0) {
    return <h4>Please add a contact</h4>;
  }

  return (
    <Fragment>
      {contacts === null || loading ? (
        <Spinner />
      ) : (
        <TransitionGroup>
          {(filtered || contacts).map((contact) => (
            <TransitionItem key={contact._id} contact={contact} />
          ))}
        </TransitionGroup>
      )}
    </Fragment>
  );
};

export default Contacts;

修复逻辑 #

• 闪屏问题：你之前将TransitionItem定义在Contacts组件内部，每次Contacts重渲染都会生成全新的TransitionItem构造函数，React会判定为不同组件直接销毁旧实例、挂载新实例，跳过了退出过渡动画导致闪屏。抽离到外部定义后，组件引用稳定，会正常触发过渡动画。
• StrictMode警告：每个CSSTransition都通过nodeRef绑定了对应DOM节点的引用，不再依赖已废弃的findDOMNode接口，警告会直接消除。

内容的提问来源于stack exchange，提问作者Gabriel