reactjs - 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 的协调。 React-native 的 Animated 值会绕过通常的 render()，因此即使没有状态更改，组件也会更新。

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

Answer 1

最好遵循官方文档并使用国家属性(property)。有两个很好的理由:

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

When the component mounts, the opacity is set to 0. Then, an easing animation is started on the fadeAnim animated value, which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.

This is done in an optimized way that is faster than calling setState and re-rendering.