如何结合setTimeout使用React的getDerivedStateFromProps实现Modal关闭过渡？

嘿，这个问题我当初刚切换到React 16.3+时也踩过坑！getDerivedStateFromProps作为静态方法，确实没法像componentWillReceiveProps那样直接在里面塞定时器搞异步操作，得换个思路结合其他生命周期来实现你的需求。

核心思路 #

把同步响应props变化和异步执行动画延迟拆成两部分：

• 用getDerivedStateFromProps同步处理props的变化，标记组件进入退出状态（但不立刻关闭Modal）
• 用componentDidUpdate监听状态变化，在进入退出状态时启动定时器，延迟更新真正控制显示的状态

代码实现示例 #

import React, { Component } from 'react';

class Modal extends Component {
  state = {
    isOpen: this.props.open,
    isExiting: false,
    exitTimer: null
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    // 当外部传入的open从true变为false时，标记进入退出状态，保持Modal显示
    if (nextProps.open === false && prevState.isOpen === true) {
      return {
        isExiting: true,
        isOpen: true
      };
    }

    // 当外部传入的open从false变为true时，重置退出状态，直接打开Modal
    if (nextProps.open === true && prevState.isOpen === false) {
      return {
        isExiting: false,
        isOpen: true
      };
    }

    // 其他情况不更新状态
    return null;
  }

  componentDidUpdate(prevProps, prevState) {
    // 刚进入退出状态时，启动延迟关闭的定时器
    if (this.state.isExiting && !prevState.isExiting) {
      // 清除之前可能残留的定时器，避免重复触发
      if (this.state.exitTimer) clearTimeout(this.state.exitTimer);

      const timer = setTimeout(() => {
        this.setState({
          isOpen: false,
          isExiting: false,
          exitTimer: null
        });
      }, 3000); // 这里设置你需要等待的秒数，比如3秒

      this.setState({ exitTimer: timer });
    }

    // 处理边界情况：退出过程中外部又触发打开Modal，及时清除定时器
    if (this.props.open === true && prevProps.open === false) {
      if (this.state.exitTimer) {
        clearTimeout(this.state.exitTimer);
        this.setState({ exitTimer: null });
      }
    }
  }

  componentWillUnmount() {
    // 组件卸载时清除定时器，避免内存泄漏
    if (this.state.exitTimer) clearTimeout(this.state.exitTimer);
  }

  render() {
    const { isOpen, isExiting } = this.state;
    // 根据状态添加过渡类，实现退出动画
    const modalClasses = `modal ${isExiting ? 'modal-exiting' : ''}`;

    return isOpen ? (
      <div className={modalClasses}>
        <div className="modal-content">
          <button onClick={() => this.props.onClose()}>关闭</button>
          {/* 这里放Modal的内容 */}
        </div>
      </div>
    ) : null;
  }
}

export default Modal;

关键细节说明 #

1. isExiting状态：用来标记当前是否处于退出动画阶段，你可以给这个状态绑定对应的CSS过渡样式（比如modal-exiting类添加透明度、位移等动画）
2. getDerivedStateFromProps的职责：只做同步的状态映射，完全符合React设计这个API的初衷——避免之前componentWillReceiveProps里常见的异步副作用问题
3. 定时器清理：在组件卸载、状态回退时都要清除定时器，防止内存泄漏和意外的状态更新

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