如何避免在班次后重新渲染所有组件

Question

想象一下，这个vim缓冲区是一个名为BufferComponent的React组件，缓冲区的每一行都是RowComponent。

请注意，插入符号位于缓冲区的末尾。当我按下j键时，每行应向上移动，显示第37行并隐藏第12行。以下是实现此行为的简化代码;您还可以找到完整版on Github。

class BufferComponent extends React.Component {
    render() {
        return React.createElement('pre', {},
            this.props.buffer.map((row, index) => React.createElement(RowComponent, {row: row, key: index}))
        );
    }
}

class RowComponent extends React.Component {
    render() {
        return React.createElement('div', {},
            this.props.row.map((char, index) => React.createElement(CharComponent, {char: char, key: index})) 
        );
    }
}

问题是，当我按j时，每行都会使用新内容重新呈现。现在，如果我手动操作DOM，我只需删除第一行div并在最后添加另一行，这将导致最少量的DOM操作。

如何让ReactJS执行此操作而不是重新渲染每一行？我怀疑我必须至少使用一个没有连接到行索引的密钥，但仅此一点还不够。