Memory leak when programmatically changing 'source' prop of Image
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
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
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu với bản tái hiện ImageTest được liên kết và chạy nó ở iOS release mode, thay đổi source prop của Image component trong khi theo dõi bộ nhớ. Truy vết cách xử lý native iOS đối với các thay đổi source của Image component; hoàn tất khi các hình ảnh trước đó được giải phóng sau các thay đổi và sau khi parent component được unmount.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- ios, react-native
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100