Reactjs 动画和getDerivedStateFromProps

随着

组件将接收道具

被弃用，并且替换的

getDerivedStateFromProps

返回最终状态，我将如何随着时间的推移使用新的

getDerivedStateFromProps

逐渐改变状态（即设置动画）

使用

组件将接收道具

，以下功能可以正常工作：

state = {
  itemOpacity: new Animated.Value(0.25)
};

componentWillReceiveProps(nextProps) {
  if (this.props.items.visible !== nextProps.items.visible) {

    let value = 0;

    if (nextProps.items.visible) {
      value = 1;
    }

    Animated.timing(this.state.itemOpacity, {
      toValue: value,
      duration: 200,
    }).start();
  }
}

---

我如何使用

getDerivedStateFromProps

？还是我的动画模式很愚蠢？

使用newProps和previousState参数调用getDerivedStateFromProps。因此，可以对动画使用previousState：

static getDerivedStateFromProps(nextProps, prevState) {

  let value = 0;
  if (nextProps.items.visible) {
    value = 1;
  }

  Animated.timing(prevState.itemOpacity, {
    toValue: value,
    duration: 200,
  }).start();

  return {
    // update state
  }
}

---

简单的答案就是不要将状态用于动画（感谢dentemm的帮助）：

---

我可以在前一个状态下运行动画吗？我假设

prevState

是不可变的，不代表当前状态。另外，我需要返回什么？prevState是不可变的，但是动画包不会改变状态。事实上，我建议不要在动画中使用state，因为只有通过setState（）显式更新state时，state才是相关的。谢谢，我稍后会尝试。但是

Animated.timeing是如何实现的呢（prevState.itemOpacity…

not alter state？之后，我可以通过

this.state.itemOpacity.\u value

看到状态中的新值。是的，该值会得到更新，但如果不使用状态，它也会得到更新。因此，我以前的语句并不完全正确。但是动画库在幕后不使用状态，它会只需更新您提供的变量即可。我理解，谢谢您的澄清。不幸的是，设置prevState动画实际上并不渲染动画。您的建议是在state/component（

let animations={opacity:new Animated.Value（0.25）}；

）之外定义一个对象，然后运行

Animated.time（animations.opacity…

在该对象上？很高兴它成功了！出于内存管理的原因，我建议将itemOpacity作为组件类的成员。在上面的示例中，您实际上正在泄漏内存。@dentemm这是不可能的，因为getDerivedStateFromProps实际上是静态的。

itemOpacity = new Animated.Value(0.25);

class TestScreen extends Component {

  getDerivedStateFromProps(nextProps) {
      let value = 0;

      if (nextProps.items.visible) {
        value = 1;
      }

      Animated.timing(itemOpacity, {
        toValue: value,
        duration: 200,
      }).start();

    return null;
  }
}