componentWillReceiveProps废弃后，如何用getDerivedStateFromProps实现渐变动画？

嘿，我来帮你搞定这个问题～首先得明确：getDerivedStateFromProps是静态方法，根本没法直接访问组件实例的属性或调用实例方法，所以你没法像在componentWillReceiveProps里那样直接在它里面启动Animated动画。那该怎么处理呢？

先拆解下你原来的逻辑：当props里的items.visible变化时，启动一个透明度渐变动画。原来用componentWillReceiveProps能行，是因为它能直接拿到组件实例，操作state里的Animated.Value。但现在要换成新的生命周期，得调整思路：

核心思路：把状态同步和副作用分开 #

getDerivedStateFromProps的职责是同步props到state（纯逻辑，不能有副作用），而动画这种副作用，应该放到componentDidUpdate里处理——这个生命周期能拿到前后props的对比，也能访问组件实例。

另外还有个小优化：你原来把Animated.Value放在state里其实没必要，因为Animated.Value本身是可变的，有自己的状态管理，React的state应该存不可变的状态，所以把它改成组件的实例属性更合适。

具体代码实现 #

class YourComponent extends React.Component {
  // 把Animated.Value作为实例属性，不用放state里
  itemOpacity = new Animated.Value(0.25);

  // 如果需要同步props到state（比如记录当前visible状态），才用getDerivedStateFromProps
  static getDerivedStateFromProps(nextProps, prevState) {
    // 当visible变化时，同步更新state里的标记
    if (nextProps.items.visible !== prevState.currentVisible) {
      return {
        currentVisible: nextProps.items.visible,
        targetOpacity: nextProps.items.visible ? 1 : 0
      };
    }
    return null;
  }

  // 初始化state
  state = {
    currentVisible: this.props.items.visible,
    targetOpacity: this.props.items.visible ? 1 : 0
  };

  componentDidUpdate(prevProps) {
    // 对比前后props的visible状态，变化时启动动画
    if (prevProps.items.visible !== this.props.items.visible) {
      const targetValue = this.props.items.visible ? 1 : 0;
      Animated.timing(this.itemOpacity, {
        toValue: targetValue,
        duration: 200,
        useNativeDriver: true // 开启原生驱动，动画更流畅
      }).start();
    }
  }

  render() {
    return (
      <Animated.View style={{ opacity: this.itemOpacity }}>
        {/* 你的组件内容 */}
      </Animated.View>
    );
  }
}

简化版：甚至可以不用getDerivedStateFromProps #

如果不需要同步props到state，其实直接在componentDidUpdate里对比前后props就行，完全不用getDerivedStateFromProps：

class YourComponent extends React.Component {
  itemOpacity = new Animated.Value(0.25);

  componentDidUpdate(prevProps) {
    if (prevProps.items.visible !== this.props.items.visible) {
      Animated.timing(this.itemOpacity, {
        toValue: this.props.items.visible ? 1 : 0,
        duration: 200,
        useNativeDriver: true
      }).start();
    }
  }

  render() {
    return (
      <Animated.View style={{ opacity: this.itemOpacity }}>
        {/* 你的组件内容 */}
      </Animated.View>
    );
  }
}

关于你原来的动画模式 #

其实你的核心逻辑没问题，但把Animated.Value放在state里是个小瑕疵——因为Animated.Value是可变对象，React的state设计是用来存不可变状态的，放在实例属性里更符合React的设计理念，也能避免不必要的state更新。

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