当组件卸载时,反应本机有多清楚ram?

时间:2017-08-17 14:26:59

标签: javascript reactjs react-native ram

如何在组件卸载时从ram中删除缓存(图像,项目,组件)? 现在,当打开新视图时,RAM不会被清除。 在我继续进行另一个活动后,内存不会被清除,现代的内存也会溢出。 每次打开新组件时,即使之前打开过,也会增加使用的内存量。 抱歉我的英语不好。

export default class Articles extends PureComponent {
constructor(props, context) {
    super(props, context)
    this.state = {
        renderPlaceholderOnly: true,
        unMountStatus: true,
    }
}

componentWillMount() {
    let { params } = this.props.navigation.state
    this.props.fetchData(params.id)
}

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
        this.setState({renderPlaceholderOnly: false})
    })
}

componentWillUnMount() {
    this.setState({
        unMountStatus: false
    })
    this.props.dataArticles.data = []
    this.props.unFetchData()
    console.log(this.props)
    this.props = []
    console.log(this.props)
}

_renderPlaceholderView() {
    return (
        <View>
            <Spinner color={'#575757'} visible={true} textContent={"Loading..."} textStyle={{color: '#575757'}} />
        </View>
    )
}

_addUrlToCache(url) {
    ImageResizer.createResizedImage(url, 375, 175, 'JPEG', 75, 0)
        .then((resizedImageUri) => {
            cache.put('lalka2', resizedImageUri) 
        }).catch((err) => {
            console.log(err)
    })
    return cache.get("lalka2")
}

render() {
    const { navigate } = this.props.navigation
    console.log(this._addUrlToCache("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoiqLLZMXTvg385j12vAs_P9PN3Cv9t3udbBwGnBYwFjC1dPuD"))

    if (this.state.renderPlaceholderOnly) {
        return this._renderPlaceholderView()
    }

    return (
        <View style={styles.container}>
            <Header menuOpen={this.openControlPanel} title={'Articles'} navigate={this.props.navigation}/>
            <Spinner color={'#575757'} visible={this.props.dataArticles.isFetching} textContent={"Loading..."} textStyle={{color: '#575757'}} />

            { this.state.unMountStatus ? <ScrollView>
            {
                this.props.dataArticles.data.length > 0 ? this.props.dataArticles.data.map((item, index) => {
                    return (
                        <Card style={{ flex: 0 }} key={index}>
                            <CardItem style={{backgroundColor: 'white', borderColor: '#841010', borderBottomWidth: 1}}>
                                <Left>

                                    <Body>
                                        <Text style={{fontFamily: 'Roboto', color: "#841010"}}>{item.title}</Text>
                                        <Text note style={{fontFamily: 'Roboto', color: "#6B0D0D"}}>{item.publishedAt}</Text>
                                    </Body>
                                </Left>
                            </CardItem>
                            <CardItem>
                                <Body>


                                    <Text style={{fontFamily: 'Roboto'}}>
                                        {item.description}
                                    </Text>
                                    <Button transparent textStyle={{color: '#87838B', fontSize: 28}} onPress={() => navigate('WebView', { authorArticle: 'Article', url: item.url })}>
                                        <Icon style={{color: "#841010"}} name="link" />
                                        <Text style={{ color: "#841010", fontFamily: 'Roboto'}}>Read More</Text>
                                    </Button>
                                </Body>
                            </CardItem>
                        </Card>
                    )
                }) : <View></View>
        }
            </ScrollView> : null
    }
        </View>
        );
    }
}

0 个答案:

没有答案