Memory leak when programmatically changing 'source' prop of Image
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- C++
- Estrellas
- 127k
- Forks
- 25.3k
- Merge medio
- 1 d 23 h
- PR fusionados (30 d)
- 4
Descripción
Description
If you use an Image component in render and use the parent component's state to manage the source prop, each time the source is changed the previous source is not deallocated. Even when the parent component is unmounted, the previous images still use memory.
Reproduction
I've made a simple ImageTest project that demonstrates the bug. (IMPORTANT: run app in release mode to experience the issue)
Code:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableHighlight,
Dimensions,
} from 'react-native';
import image0 from './images/0.png'
import image1 from './images/1.png'
import image2 from './images/2.png'
import image3 from './images/3.png'
import image4 from './images/4.png'
const images = [
image0,
image1,
image2,
image3,
image4,
]
export default class ImageTest extends Component {
constructor() {
super()
this.state = ({
counter: 0,
})
}
increment = () => {
this.setState({
counter: this.state.counter + 1
})
}
render() {
const imageSource = images[this.state.counter]
return (
<View>
<Image
source={imageSource}
style={styles.image}
/>
<TouchableHighlight onPress={this.increment} style={styles.highlight}>
<Text style={styles.text}>NEXT IMAGE</Text>
</TouchableHighlight>
</View>
);
}
}
const window = Dimensions.get('window')
const styles = StyleSheet.create({
highlight: {
backgroundColor: 'yellow',
position: 'absolute',
bottom: 0,
left: 0,
},
text: {
fontSize: 50,
},
image: {
width: window.width,
height: window.height,
},
});
AppRegistry.registerComponent('ImageTest', () => ImageTest);
Solution
Presumably when the source is changed the underlying UIImage/UIImageView needs to be destroyed.
Additional Information
- React Native version: 0.41.0
- Platform: iOS
- Operating System: MacOS 10.12.3 / xcode 8.2
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con la reproducción vinculada de ImageTest y ejecútala en iOS release mode, cambiando la source prop del Image component mientras observas la memoria. Traza el manejo nativo de iOS de los cambios de source del Image component; se considera terminado cuando las imágenes anteriores se desasignan después de los cambios y después de desmontar el parent component.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- ios, react-native
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100