reactjs - shouldcomponentupdate - React-native: ¿conserva los valores animados en estado o como propiedad de clase?

react fragment react native

Question

¿Es mejor mantener el valor animado ( fadeAnim ) como una propiedad del estado o está bien convertirlo en una propiedad de clase?

Ejemplo:

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();
    }
}

Aclaración : sé que el estado se usa para la reconciliación de la reacción. Animated valores Animated React-native omiten el renderizado usual (), por lo que el componente se actualiza incluso cuando no hay cambio de estado.

No veo ningún punto al comparar un valor shouldComponentUpdate en mi shouldComponentUpdate , por eso lo moví fuera de estado.

Answer 1

En general, con React hay una gran diferencia entre almacenar algo como una propiedad de instancia / clase (por ejemplo, this.myVar = ''foo'';) o en el estado. La diferencia es que React usa el objeto de estado para determinar cuándo volver a procesar el componente (es decir, volver a llamar a render ()).

Si almacena una variable como propiedad de clase / instancia y luego la modifica, la lógica de representación Reaccionar no sabe nada acerca de ese cambio y, en consecuencia, no verá ningún cambio en la IU procesada.

Por lo tanto, debe almacenar en el estado las cosas que cambian la salida representada de un componente. Si una variable no afecta en absoluto la salida representada (y no le importa que se le notifique cuando cambia básicamente), entonces puede almacenarla como una propiedad de instancia / clase. A veces, esto puede tener mejores implicaciones de rendimiento, ya que una llamada a setState para actualizar esa variable provocaría un procesamiento innecesario.

En el ejemplo de su caso, omitió el método de renderizado, pero es muy probable que necesite acceder a la variable fadeAnim en el estado para realizar la animación. Básicamente, Animated.spring simplemente interpola algunos valores a lo largo del tiempo, pero luego necesita usar esos valores interpolados para realmente animar algo. En el ejemplo de documentos ( https://facebook.github.io/react-native/docs/animated.html ), puede ver esto. this.state.fadeAnim se utiliza dentro de render para controlar (animar) el estilo de opacidad.

Para recapitular, debe almacenar fadeAnim en el estado específicamente porque un cambio en el valor debería desencadenar una nueva representación.

Answer 2

Es mejor seguir la documentación oficial y usar propiedad estatal. Hay dos buenas razones para eso:

1. Desea mantener todas las cosas que tienen efecto en un resultado de renderizado componente en su estado / accesorios / contexto.
2. La biblioteca animada React-Native tiene su propia optimización que le permite evitar setState llamadas a setState y re-renderizar el cambio de componentes animados. Esta es una cita de la documentación oficial

Cuando el componente se monta, la opacidad se establece en 0. Luego, se inicia una animación de aceleración en el valor animado de fadeAnim, que actualizará todas sus asignaciones dependientes (en este caso, solo la opacidad) en cada fotograma a medida que el valor se anime el valor final de 1.

Esto se hace de una manera optimizada que es más rápida que llamar a setState y re-renderizar.