React-native:保持状态或类属性的动画值？

Question

将动画值(fadeAnim)保持为状态属性还是可以将其设置为类属性更好？

例:

class ModalShade extends React.Component {
    fadeAnim = new Animated.Value(0)

    render() {
        return (
            <Animated.View
                cls="bg-black absolute-fill"
                style={{ opacity: this.fadeAnim }}
            />
        )
    }

    componentDidMount() {
        Animated.spring(
            this.fadeAnim, {
                toValue: 0.6,
                tension: 100,
                friction: 20
            }
        ).start();
    }
}

澄清:我知道该状态用于反应的和解.React-native' Animated值绕过通常的render(),因此即使没有状态更改,组件也会更新.

我没有看到在比较Animated.Value我的任何一点shouldComponentUpdate,这就是为什么我把它移出州.

Answer 1

最好遵循官方文档并使用国家财产。这样做有两个很好的理由：

1. 您希望将所有对组件渲染结果产生影响的内容保留在您的状态/道具/上下文中。
2. React-Native Animated 库有自己的优化，可以避免setState在 Animated 组件更改时调用和重新渲染。这是官方文档的引用

当组件挂载时，不透明度设置为 0。然后，在淡入淡出动画值上启动一个缓动动画，这将更新它在每一帧上的所有依赖映射（在这种情况下，只是不透明度），因为值动画为最终值为 1。

这是以优化的方式完成的，比调用 setState 和重新渲染更快。

Answer 2

一般来说，在 React 中，将某些内容存储为实例/类属性（例如 this.myVar = 'foo';）或存储在状态中之间存在很大差异。不同之处在于，React 使用状态对象来确定何时重新渲染组件（即再次调用 render()）。

如果您将变量存储为类/实例属性，然后更改它，React 渲染逻辑不会知道有关该更改的任何信息，因此您不会在渲染的 UI 中看到任何更改。

因此，您应该在状态中存储更改组件渲染输出的内容。如果变量根本不影响渲染的输出（并且您基本上不关心它发生变化时收到通知），那么您可以将其存储为实例/类属性。有时这可能会产生更好的性能影响，因为更新setState该变量的调用会触发不必要的渲染。

在您的示例中，您省略了 render 方法，但您很可能需要访问fadeAnim状态中的变量才能实际执行动画。基本上，Animated.spring 只是随着时间的推移插入一些值，但随后您需要使用这些插入的值来实际制作动画。在文档示例（https://facebook.github.io/react-native/docs/animated.html）中，您可以看到this.state.fadeAnim内部用于render控制（动画）不透明度样式。

回顾一下，您需要fadeAnim专门存储状态，因为值的更改应该触发重新渲染。