不同Component,render生命周期问题



  • 写了两个Component RnDmeo和CountDown,RnDemo是注册的主容器,CountDown被拿来引用,当RnDemo setState后,CountDown的render也被重新调用了。
    怎样才能让CountDown的render不被调

    代码如下:

    import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Button
    } from 'react-native';
    
    class CountDown extends Component {
        state = {
            count: this.props.time,
        };
    
        addTime = (time) => {
            const {count} = this.state;
            this.setState({
                count: count + 10,
            })
        };
    
        timeup = () => {
            alert('时间到');
            this.props.timeupParent && this.props.timeupParent();
        };
    
        renderResult = () => {
            const {count} = this.state;
            if (count > 0) {
                return (
                    <Text>{count}</Text>
                )
            } else {
                this.timeup();
                return (
                    <Text>时间到!</Text>
                )
            }
        }
    
        render() {
            const {count} = this.state;
            return (
                <View>
                    <Text>{this.renderResult()}</Text>
                    <Text>{count > 0 ? count : '时间到!'}</Text>
                </View>
            )
        }
    
        componentDidMount() {
            this.timer = setInterval(() => {
                const {count} = this.state;
                if (count === 0) {
                    return clearInterval(this.timer);
                }
                this.setState({
                    count: count - 1,
                });
            }, 1000)
        }
    
        componentWillMount() {
            clearInterval(this.timer);
        }
    }
    
    export default class RnDemo extends Component {
        state = {
            likes: 0
        };
    
        onPress = () => {
            const {likes} = this.state;
            this.setState({
                likes: likes + 1
            });
        };
    
        addTime = () => {
            this.countDown.addTime();
        };
    
        timeupParent = () => {
            alert('时间到了');
        };
    
        render() {
            return (
                <View style={styles.container}>
    
                    <CountDown time={6} ref={countDown => this.countDown = countDown} timeupParent={this.timeupParent} />
    
                    <Button title='click me' onPress={ this.onPress }/>
    
                    <Text>{this.state.likes}</Text>
    
                    <Button title='延长10s' onPress={this.addTime} />
    
    
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
        },
        instructions: {
            textAlign: 'center',
            color: '#333333',
            marginBottom: 5,
        },
    });
    
    AppRegistry.registerComponent('RnDemo', () => RnDemo);

  • administrators


登录后回复