React Native自定义Navbar SetState避免渲染全部

Question

我有一个自定义的navbar组件，使用反应本机路由器通量：

 render() {
    return (
        <View style={styles.navBar}>
            {this._renderNavBarLeft() }
            {this._renderNavBarMiddle() }
            {this._renderNavBarRight() }
        </View>
    )
}

渲染中间部分：

 _renderNavBarMiddle() {
    return (
        <View style={styles.navBarItem}>
            { this.state.timeElapsed ? (<Text style={styles.text}>{Moment.utc(this.state.timeElapsed).format('HH:mm:ss')}</Text>) : <Text style={styles.text}>00:00:00</Text>}
        </View>
    )
}

，我有一个背景二聚体来刷新中间纳维托部分

   componentDidMount(){
    console.warn("mount")
    const intervalId = BackgroundTimer.setInterval(() => {
        this.setState({
            timeElapsed : new Date() - this.state.startTime,
        })
    },1000)
}

我如何避免{this._rendernavbarleft（）}} and {this._rendernavbarright（）}每次呈现setState（timeElepsed）的渲染？

Answer 1

您可以尝试包括

shouldComponentUpdate(nextProps, nextState) {
    // return false, if component should not update 
    return false;
}

在您的左和右磁带组件上。可能您需要通过附加道具，以避免重新订阅。