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()，因此即使没有状态更改，组件也会更新。

在我的shouldComponentUpdate 中比较Animated.Value 没有任何意义，这就是我将其移出状态的原因。

Answer 1

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

1. 您希望将所有对组件渲染结果有影响的内容保留在您的 state/props/context 中。
2. React-Native 动画库有自己的优化，可以避免 setState 调用和重新渲染动画组件的变化。这是官方文档的引用

当组件挂载时，不透明度设置为 0。然后，在 fadeAnim 动画值上启动缓动动画，这将更新其在每一帧上的所有相关映射（在本例中，只是不透明度）作为value 动画到最终值 1。

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

Answer 2

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

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

所以你应该在 state 中存储改变组件渲染输出的东西。如果一个变量根本不影响渲染的输出（并且您根本不在乎在它发生变化时收到通知），那么您可以将其存储为实例/类属性。有时这会对性能产生更好的影响，因为更新该变量的 setState 调用会触发不必要的渲染。

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

回顾一下，您需要将fadeAnim 存储在状态中，因为值的更改会触发重新渲染。