2016-11-15 45 views
0

我是新来的反应,并想知道是否有一种方法来改变渲染方法中的每一秒一个html行,例如,而不是重新渲染整个组件?有没有办法改变html行而不是重新渲染整个组件?

我必须让其中显示的时间状态栏,所以日期必须每一秒进行更新。是否有可能只改变Menubar时间格?

componentDidMount: function() { 
     const self = this; 
     self.interval = setInterval(function() { 
      self.setState({ 
       now: new Date(), 
      }); 
     }, 1000); 
    }, 

    componentWillUnmount: function() { 
     clearInterval(this.interval); 
    }, 


    render() { 
     return (
      <div className="Menubar"> 
       <div className="Menubar-name"> 
        <p>{this.state.login}</p> 
       </div> 
       <div className="Menubar-date"> 
        <p><Time value={this.state.now} format="DD/MM/YYYY" /></p> 
       </div> 
       <div className="Menubar-time"> 
        <p><Time value={this.state.now} format="HH:mm:ss" /></p> 
       </div> 
      </div> 
     ); 
    }, 

谢谢你的回答。

+1

如何将应该经常更改为更小组件的html的部分包装? – wolendranh

+1

我个人并不担心 - 这对我来说似乎是一种不必要的“优化”。 –

+0

@wolendrahn:难道这不是一回事吗?可能是一个好主意寿。 :) –

回答

1

实际上,整个组件没有重新呈现。 render()返回虚拟DOM的实例,并且仅应用当前DOM与新DOM(由render()返回)之间的差异。所以在这种情况下你不需要担心性能。

当你觉得你的表现贫穷,你可能会考虑实施shouldComponentUpdate。至于我,我只需要执行一次或两次。在极少数情况下,React本身需要优化。

祝你好运!

2

阵营重新呈现整个树时状态的变动,但使其计算虚拟DOM和DOM唯一的区别之间和DOM中DIFF后重新呈现。 所以基本上你不需要做任何事情React会小心在dom中只有计时器文本会改变。

是不是真棒:对

相关问题