use separate row component with shouldUpdate

This commit is contained in:
Vladimir Polyakov 2015-11-29 13:13:36 +03:00
parent 548ddcd0fa
commit e9a1be2e6d
3 changed files with 19 additions and 5 deletions

View File

@ -0,0 +1,4 @@
.code-line
span.code-line_counter
.code-line_body!= this.props.row

View File

@ -1,8 +1,6 @@
.terminal .terminal
pre.terminal_code(ref="code") pre.terminal_code(ref="code")
each row, index in this.state.data each row, index in this.state.data
.code-line(key=index) Row(row=row, key=index)
span.code-line_counter
.code-line_body!= row
.terminal_footer(style={height: '30px'}) .terminal_footer(style={height: '30px'})

View File

@ -6,8 +6,20 @@ define([
'reflux', 'reflux',
'app/stores/terminal', 'app/stores/terminal',
'ansi_up', 'ansi_up',
'templates/app/components/terminal/terminal' 'templates/app/components/terminal/terminal',
], function(_, React, Reflux, terminalStore, ansiUp, template) { 'templates/app/components/terminal/row'
], function(_, React, Reflux, terminalStore, ansiUp, template, rowTemplate) {
var TerminalRow = React.createClass({
render: rowTemplate,
shouldComponentUpdate: function(nextProps) {
return nextProps.row !== this.props.row;
}
});
template = template.locals({
Row: TerminalRow
});
var Component = React.createClass({ var Component = React.createClass({
mixins: [Reflux.ListenerMixin], mixins: [Reflux.ListenerMixin],
shouldScrollBottom: true, shouldScrollBottom: true,