巧用生命周期, 选择在 before 或 after 插入元素

componentDidUpdate: function() {
  var node = this.getDOMNode();
  node.scrollTop = node.scrollHeight;
},

仅当用户已经滚到底时执行策略

componentWillUpdate: function() {
  var node = this.getDOMNode();
  this.shouldScrollBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
},

componentDidUpdate: function() {
  if (this.shouldScrollBottom) {
    var node = this.getDOMNode();
    node.scrollTop = node.scrollHeight
  }
},

Insertion at the top

componentWillUpdate: function() {
  var node = this.getDOMNode();
  this.scrollHeight = node.scrollHeight;
  this.scrollTop = node.scrollTop;
},

componentDidUpdate: function() {
  var node = this.getDOMNode();
  node.scrollTop = this.scrollTop + (node.scrollHeight - this.scrollHeight);
},

ref: http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html

The issue provides React lifecycle JSX examples for preserving scroll position and links to a reference article, but it names no repository file, test, or requested change. First determine where this tip belongs and what documentation format is expected; done should be defined by an agreed placement and a reviewed, accurate explanation of the examples.