render() — react Function Reference

Architecture documentation for the render() function in index.js from the react codebase.

Function javascript BabelCompiler Optimization calls 3

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  180ba2a5_ca78_9a74_efcc_7a8883de46ec["render()"]
  65a63c30_9cf8_cbd3_f517_fdb60be9c536["App"]
  180ba2a5_ca78_9a74_efcc_7a8883de46ec -->|defined in| 65a63c30_9cf8_cbd3_f517_fdb60be9c536
  99f27261_403d_91e3_bb74_8dd116964871["getStreamData()"]
  180ba2a5_ca78_9a74_efcc_7a8883de46ec -->|calls| 99f27261_403d_91e3_bb74_8dd116964871
  0fcf5527_a274_5125_2165_bce0f6beb16e["renderOption()"]
  180ba2a5_ca78_9a74_efcc_7a8883de46ec -->|calls| 0fcf5527_a274_5125_2165_bce0f6beb16e
  a9610b16_5cb9_beda_e5fc_ca410358d178["render()"]
  180ba2a5_ca78_9a74_efcc_7a8883de46ec -->|calls| a9610b16_5cb9_beda_e5fc_ca410358d178
  style 180ba2a5_ca78_9a74_efcc_7a8883de46ec fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/concurrent/time-slicing/src/index.js lines 115–141

  render() {
    const {showClock} = this.state;
    const data = this.getStreamData(this.state.value);
    return (
      <div className="container">
        <div className="rendering">
          {this.renderOption('sync', 'Synchronous')}
          {this.renderOption('debounced', 'Debounced')}
          {this.renderOption('async', 'Concurrent')}
        </div>
        <input
          className={'input ' + this.state.strategy}
          placeholder="longer input → more components and DOM nodes"
          defaultValue={this.state.input}
          onChange={this.handleChange}
        />
        <div className="demo" onClick={this.handleChartClick}>
          {this.state.showDemo && (
            <Charts data={data} onClick={this.handleChartClick} />
          )}
          <div style={{display: showClock ? 'block' : 'none'}}>
            <Clock />
          </div>
        </div>
      </div>
    );
  }