React Up&Running第三章 a fancy table component

前言

本章是通过一步步构建一个完整的表格组件，来向读者演示了React的用法。

key

我们看看构建表格组件的代码:

getInitialState: function() {
  return {data: this.props.initialData};
},
render: function() {
  return (
    React.DOM.table(null,
      React.DOM.thead(null,
        React.DOM.tr(null,
          this.props.headers.map(function(title, idx) {
            return React.DOM.th({key: idx}, title);
          })
        )
      ),
    React.DOM.tbody(null,
      this.state.data.map(function (row, idx) {
        return (
          React.DOM.tr({key: idx},
            row.map(function (cell, idx) {
              return React.DOM.td({key: idx}, cell);
            })
          )
        );
      })
    )
  )
);
}

上面的代码中我们可以看到两个关键点，一个是td标签和th标签采用了key属性，一个是使用了map方法。

采用key的原因我以前说过，是为了提高virtualdom时diff算法的效率。
而map是用来遍历。

其他的细节这里就不说了，之前的入门教程和深入了解都介绍过如何构建一个组件，这里就没有必要再提了。