luy/benchmarks/app.jsx

所谓类```React```框架就是**和React用法一模一样**的框架。其实当初制造这个框架的目的是为了能更好的学习React内部结构，了解其原理而制作的玩具。但是随着框架的渐渐成长，代码越来越多，我还是决定将其发展下去. 

class DBMon extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      databases: []
    };
  }

  loadSamples() {
    this.setState({
      databases: ENV.generateData().toArray()
    });
    Monitoring.renderRate.ping();
    setTimeout(this.loadSamples.bind(this), ENV.timeout);
  }

  componentDidMount() {
    this.loadSamples();
  }

  render() {
    return (<div id="container" >
      <table className="table table-striped latest-data" >
        <tbody > {
          this.state.databases.map(function (database) {
            return (<tr key={database.dbname} >
              <td className="dbname" > {database.dbname} </td>
              <td className="query-count" >
                <span className={database.lastSample.countClassName} >
                  {database.lastSample.queries.length}
                </span>
              </td>
              {database.lastSample.topFiveQueries.map(function (query, index) {
                return (<td className={"Query " + query.elapsedClassName} >
                  {query.formatElapsed
                  } <div className="popover left" >
                    <div className="popover-content" > {
                      query.query
                    } </div>
                    <div className="arrow" />
                  </div>
                </td>);
              })
              }
            </tr>
            );
          })
        } </tbody>
      </table>
    </div>
    );
  }
};

ReactDOM.render(<DBMon />, document.getElementById('dbmon'));