React原生自定义导航栏setState避免全部渲染

Question

我有一个使用react native router flux的自定义导航栏组件：

 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>
    )
}

我有一个backgroundTimer来刷新中间导航栏部分

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

每次调用setState（timeElapsed）时，如何避免{this._renderNavBarLeft（）}和{this._renderNavBarRight（）}渲染？