7

Ich bin neu zu reagieren, also bitte nicht streng zu urteilen. Ich rende meine React-App auf dem Server und möchte Code auf der Frontend-Seite ausführen. Anwendung wird ordnungsgemäß mit Stilen und ohne Warnungen oder Fehler gerendert, obwohl mit leeren Zustand, da ich API verwende, die auf der Vorderseite ausgeführt werden sollte und es für jetzt OK ist.ReactJS Server Seite Rendering und ComponentDidMount Methode

wie ich sie verstehe Server macht Komponente und da Server gerendert und montiert Komponente auf dem Server, und es ruft nicht componentDidMount() Methode die meine API-Aufrufe tun sollten und andere Mitarbeiter

das ist meine Komponente

import React from 'react'; 
import {render} from 'react-dom'; 
import SpComparison from './spComparison.jsx'; 
import Comparison from './comparison.jsx'; 
import AnalystRatings from './analystRatings.jsx'; 


export default class Insights extends React.Component { 
constructor(props){ 
    super(props); 
    this.state = { 
     charts: [] 
    } 

    let _this = this; 
} 

componentDidMount() { 
    console.log("I want to do log on front end side, but can't") 
} 

render() { 
    let charts = this.state.charts.map(function(i){ 
     if (i.type == 'comparison'){ 
      return <Comparison key={ i.id } config={ i.config } /> 
     } 
     else if (i.type == 'sp-comparison'){ 
      return <SpComparison key={ i.id } config={ i.config } /> 
     } 
     if (i.type == 'analyst-ratings'){ 
      return <AnalystRatings key={ i.id } config={ i.config } /> 
     } 
    }); 

    return (
     <div id="insights" className="container"> 
      <div className="row"> 
       <div className="col-md-3 hidden-md-down" style={{ 
        marginTop: 10 
       }}> 
        <ul className='finstead-tabs'> 
         <li className="finstead-tabs-header"> 
          Categories 
         </li> 
         <li> 
          <a href='' className="finstead-active-tab">Performance</a> 
         </li> 
         <li> 
          <a href=''>Financial</a> 
         </li> 
         <li> 
          <a href=''>Valuation</a> 
         </li> 
         <li> 
          <a href=''>Shares</a> 
         </li> 
         <li> 
          <a href=''>Outlook</a> 
         </li> 
        </ul> 
       </div> 
       <div className="col-xs-12 col-md-9"> 
        { charts } 
       </div> 
      </div> 
     </div> 
    ) 
} 
} 

Ich denke ich mache es nicht richtig, also bitte hilf mir.

HINWEIS

In höchstem Niveau Komponente I nicht ReactDOM.render kann es dieses Verhalten verursacht genannt haben?

tutorial, die ich zum Beispiel verwendet

Antwort

2

ich sorgfältig mehr Lösung nach der Lektüre tutorial gefunden haben.

Problem war meine Unaufmerksamkeit und alles ist im obigen Tutorial beschrieben.

Grundsätzlich in gebündelter Datei sollten Sie ReactDOM.render aufrufen, um die Anwendung erneut auszuführen, aber dies wirkt sich nicht auf die Leistung aus, da React VirtualDOM verwendet und Diffaming mit bereits vorhandenem DOM durchführt.

so ohne ReactDOM.render js wird nicht ausgeführt werden.

so habe ich separate Datei app-script.js erstellt, die mein Einstiegspunkt für Bundle ist und es ruft meine höchste Komponente mit ReactDOM.render.

+0

In Ihrem Fall wird das Aufrufen von ReactDOM.render eine große Sache sein, da Ihr serverseitig gerenderter HTML-Code auf keinem Zustand basiert. All das zusätzliche HTML, das auf dem Status basiert, den Sie clientseitig erstellen, muss in DOM diffundiert werden, und das kostet zusätzliche Zeit. Ich verstehe nicht, warum Sie serverseitige Rendering hier tun, sind Ihre Geschwindigkeitsgewinne marginal. –

+0

Wie ich bereits erwähnt habe, lerne ich immer noch, und verstehe perfekt, dass das serverseitige Rendering ohne Daten nutzlos ist, also hat alles seine Zeit, lernt jetzt Redux und hoffentlich wird der Zustand für das serverseitige Rendering geschaffen, Danke! –

Verwandte Themen