ReactJS 服务端渲染和 componentDidMount 方法 [英] ReactJS server side rendering and componentDidMount method

问题描述

我是 React 的新手，所以请不要严格判断.我正在服务器上呈现我的 React 应用程序，并希望在前端执行代码.应用程序以样式正确呈现，没有警告或错误，但状态为空，因为我使用的 API 应该在前端执行，现在还可以.

据我所知，服务器呈现组件，并且由于服务器在服务器上呈现并安装了组件，因此它没有调用 componentDidMount() 方法我的 API 调用和其他员工应该这样做

这是我的组件

从'react'导入React；从'react-dom'导入{render}；从'./spComparison.jsx'导入SpComparison；从'./comparison.jsx'导入比较；从'./analystRatings.jsx'导入AnalystRatings；导出默认类 Insights 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {图表:[]}让_this = this;}componentDidMount() {console.log("我想在前端登录，但不能")}使成为 () {让图表 = this.state.charts.map(function(i){if (i.type == '比较'){return <Comparison key={ i.id } config={ i.config }/>}else if (i.type == 'sp-comparison'){return <SpComparison key={ i.id } config={ i.config }/>}如果(i.type == '分析师评级'){return <AnalystRatings key={ i.id } config={ i.config }/>}});返回 (<div id="insights" className="container"><div className="row"><div className="col-md-3 hidden-md-down" style={{边距顶部:10}}>
<li className="finstead-tabs-header">类别<li><a href='' className="finstead-active-tab">性能</a><li><a href=''>金融</a><li><a href=''>估值</a><li><a href=''>分享</a><li><a href=''>展望</a>

<div className="col-xs-12 col-md-9">{图表}

)}}

我想我做得不对，所以请帮助我.

注意

在最高级别的组件中，我没有调用 ReactDOM.render 可能会导致这种行为吗?

教程，我用过的例子

解决方案

我在阅读 教程 更仔细.

问题是我的疏忽，所有内容都在上面的教程中进行了描述.

基本上在捆绑文件中，您应该调用 ReactDOM.render 再次执行应用程序，但这不会影响性能，因为 React 使用 VirtualDOM 并且与现有的 DOM 不同.

所以没有 ReactDOM.render js 将不会被执行.

所以我创建了单独的文件 app-script.js，这是我的 bundle 入口点，它使用 ReactDOM.render 调用我的最高组件.

I am new to React, so please don't judge strictly. I am rendering my React app on server and want execute code on frontend side. Application renders properly with styles and without warnings or errors, though with empty state since I am using API which should execute on front side and it is OK for now.

as I understand server renders component and since server rendered and mounted component on server and it is not calling componentDidMount() method which should do my API calls and other staff

this is my component

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

I guess I am doing it not right way, so please help me.

NOTE

In highest level component I haven't called ReactDOM.render may it cause this behaviour?

tutorial that I used for example

解决方案

I have found solution after reading tutorial more carefully.

Problem was my inattention and everything is described in tutorial above.

basically in bundled file you should call ReactDOM.render to execute application again, but it won't affect on performance since React uses VirtualDOM and diffing with already existing DOM.

so without ReactDOM.render js won't be executed.

so I created separate file app-script.js which is my entry point for bundle and it calls my highest component with ReactDOM.render.

这篇关于ReactJS 服务端渲染和 componentDidMount 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！