ReactJS服務器端渲染和componentDidMount方法

我是React的新手，所以請不要嚴格判斷。我在服務器上呈現我的React應用程序，並希望在前端執行代碼。應用程序使用樣式正確呈現，並且沒有警告或錯誤，儘管處於空狀態，因爲我正在使用應在正面執行的API，現在可以正常運行。ReactJS服務器端渲染和componentDidMount方法

我瞭解服務器渲染成分，因爲服務器渲染和安裝在服務器組件，它並沒有叫componentDidMount()方法應該做我的API調用和其他工作人員

這是我的組件

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> 
    ) 
} 
}

我想我是做得不對的，所以請幫助我。

注意

在最高級別的組件我沒有叫ReactDOM.render可能是導致此行爲？

tutorial，我使用例如

來源

2017-01-02 Aren Hovsepyan

我已經找到解決方案更仔細閱讀tutorial後。

問題是我注意力不集中，所有內容都在上面的教程中介紹。

基本上在捆綁文件中，您應該調用ReactDOM.render來再次執行應用程序，但它不會影響性能，因爲React使用VirtualDOM並與已有DOM進行區別。

所以沒有ReactDOM.render js不會被執行。

所以我創建了單獨的文件app-script.js，這是我的入口點，它調用了我的最高組件ReactDOM.render。

來源

2017-01-02 04:08:46

在你的情況下調用ReactDOM.render將是一件大事，因爲你的服務器端呈現的HTML是基於沒有狀態。所有基於您構建客戶端的狀態的額外HTML都需要被分配到DOM中，這將需要額外的時間。我不明白你爲什麼要在這裏做服務器端渲染，你的速度收益是微不足道的。 –

正如我所提到的，我仍然在學習，並且完全理解服務器端渲染在沒有數據的情況下是無用的，所以一切都有它的時間，現在學習Redux並希望爲服務器端渲染創建狀態，謝謝！ –

ReactJS服務器端渲染和componentDidMount方法

回答

相關問題