render() — react Function Reference

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

Function javascript BabelCompiler Optimization calls 1 called by 2

Entity Profile

BabelCompiler→ Optimization→ render() — react Function Reference

Dependency Diagram

graph TD
  25140fd7_e5bf_665b_f3ed_dfc133920392["render()"]
  bca90355_29ba_0440_c24c_e2b0f47a542d["Result"]
  25140fd7_e5bf_665b_f3ed_dfc133920392 -->|defined in| bca90355_29ba_0440_c24c_e2b0f47a542d
  de1a7d40_fb4e_d77c_893a_dfa22cf58ef3["render()"]
  de1a7d40_fb4e_d77c_893a_dfa22cf58ef3 -->|calls| 25140fd7_e5bf_665b_f3ed_dfc133920392
  8241cc1c_6a89_d873_cf16_ea64af5940d6["getRenderedAttributeValue()"]
  8241cc1c_6a89_d873_cf16_ea64af5940d6 -->|calls| 25140fd7_e5bf_665b_f3ed_dfc133920392
  de1a7d40_fb4e_d77c_893a_dfa22cf58ef3["render()"]
  25140fd7_e5bf_665b_f3ed_dfc133920392 -->|calls| de1a7d40_fb4e_d77c_893a_dfa22cf58ef3
  style 25140fd7_e5bf_665b_f3ed_dfc133920392 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/attribute-behavior/src/App.js lines 609–669

  render() {
    const {reactStable, reactNext, hasSameBehavior} = this.props;
    const style = {
      position: 'absolute',
      width: '100%',
      height: '100%',
    };

    let highlight = null;
    let popover = null;
    if (this.state.showInfo) {
      highlight = (
        <div
          css={{
            position: 'absolute',
            height: '100%',
            width: '100%',
            border: '2px solid blue',
          }}
        />
      );

      popover = (
        <div
          css={{
            backgroundColor: 'white',
            border: '1px solid black',
            position: 'absolute',
            top: '100%',
            zIndex: 999,
          }}>
          <ResultPopover {...this.props} />
        </div>
      );
    }

    if (!hasSameBehavior) {
      style.border = '4px solid purple';
    }
    return (
      <div
        css={style}
        onMouseEnter={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}>
        <div css={{position: 'absolute', width: '50%', height: '100%'}}>
          <RendererResult {...reactStable} />
        </div>
        <div
          css={{
            position: 'absolute',
            width: '50%',
            left: '50%',
            height: '100%',
          }}>
          <RendererResult {...reactNext} />
        </div>
        {highlight}
        {popover}
      </div>
    );
  }