ReactJS 写瀑布流布局的问题

Question

我需要用ReactJS写一个两列瀑布流的布局，计算两列高度，哪边矮就把新item加到哪一列，

目前想到的思路是：在componentDidMount中先给左右列各添加一个item，然后在componentDidUpdate中计算添加后的高度，然后添加下一个，直到所有item添加完毕。

这样会rerender很多次，我想问，这样会造成性能不好吗？像这样的需求，老司机们觉得该怎么处理？

第一个回答不能达到目的：
因为每次计算高度时都没有经过render，所以高度差始终为零，结果所有item都堆到了左边

Answer 1

代码像应该这样的，React版本 ：（react: ^15.4.1），建议先看官方文档，你的写法有很多问题

class MainColumns extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      leftColumn : [],
      rightColumn: []
    };
  }
  componentDidMount(){
    let leftArr = [];
    let rightArr = [];
    let that = this;
    this.props.templates.forEach(function(item,index){
      let oHeightDiff =  that.leftColumn.offsetHeight - that.rightColumn.offsetHeight;
      if(oHeightDiff > 0){
          //左边高，新表格添加到右边
          leftArr.push(item);
      }else if(oHeightDiff <=0 ){
          //右边高，或一样高，新表格添加到左边
          rightArr.push(item);
      }
    });
    this.setState(prevState=>({
      leftColumn : prevState.leftColumn.concat(leftArr),
      rightColumn : prevState.rightColumn.concat(rightArr)
    }));
  }
  render() {
    return (
      <section id="templatesWrap" className="clearfix">
        <div className="leftColumn" ref={(lc)=>{this.leftColumn = lc}}>
          <ul>
            {
              this.state.leftColumn.map((item,index)=>{
                return <li key={index}>{item.rows[0].key+'---'+item.rows[0].reference+'----'+item.rows[0].note}</li>
              })
            }
          </ul>
        </div>
        <div className="rightColumn" ref={(rc)=> { this.rightColumn = rc }}>
          <ul>
            {
              this.state.rightColumn.map((item,index)=>{
                return <li key={index}>{item.rows[0].key+'---'+item.rows[0].reference+'----'+item.rows[0].note}</li>
              })
            }
          </ul>
        </div>
      </section>
    );
  }
}

const templates = [
      {rows:[
              {key:"name1", myType: String, reference:"xxx", note:"xxxx"},
              {key:"name2", myType: String, reference:"xxx", note:"xxxx"},
              {key:"name3", myType: String, reference:"xxx", note:"xxxx"},
          ]
      },
      {rows:[
              {key:"name4", myType: String, reference:"xxx", note:"xxxx"},
              {key:"name5", myType: String, reference:"xxx", note:"xxxx"},
              {key:"name6", myType: String, reference:"xxx", note:"xxxx"},
          ]
      },
      {rows:[
              {key:"name7", myType: String, reference:"xxx", note:"xxxx"},
              {key:"name8", myType: String, reference:"xxx", note:"xxxx"},
              {key:"name9", myType: String, reference:"xxx", note:"xxxx"},
          ]
      }

  ];

render(
  <MainColumns  templates={templates}/>,
  document.getElementById('root')
);