javascript - 在 React 中使用一个模块构建一个小型网站 VS 在 Html/css/js 中

Question

我是 React 新手。如果我在 React 框架的 App.js 中加载所有内容(全部作为一个组件)。我猜我并没有真正以正确的方式使用 React。但是，与以普通 HTML/CSS/JS 格式构建它相比，整个网站方法的这一组件是否有任何优点/缺点？作为一个网站，这实际上会更慢吗？

    import React, { Component } from 'react';


import WebFont from 'webfontloader'; 
import urban_tribal_stfregular from './fonts/urban_tribal_stfregular.ttf';  
import urban_brush_zoneregular from './fonts/urban_brush_zoneregular.ttf';  
import urbanpaintsregular from './fonts/urbanpaintsregular.ttf';  
import urbantrailsregular from './fonts/urbantrailsregular.ttf';  
import urbanposterregular from './fonts/urbanposterregular.ttf';  
import urban_rubberregular from './fonts/urban_rubberregular.ttf';   

import logo from './img/logo.png';
import leaf from './img/leaf.png';
import hq from './img/hq.png';

import eyeSprinkle from './img/eye-sprinkle.png';
import docturDotHead from './img/doctur-dot-head.png';
import johnnyVenus from './img/johnny-venus.png';
import pyramid from './img/pyramid.png';
import goldElevator from './img/gold-elevator.png';
import demon from './img/demon.png';
import sword from './img/sword.png';
import stage1 from './img/stage-1.png';
import stage1Fire1 from './img/stage-1-fire-1.png';
import stage1Fire2 from './img/stage-1-fire-2.png';
import stage2Fire1 from './img/stage-2-fire-1.png'; 
import cloud1 from './img/cloud-1.png';
import cloud2 from './img/cloud-2.png';
import stage2 from './img/stage-2.png';
import footerShim from './img/840.png';
import footer from './img/footer.png';
import './App.css';



const styles = {
  urban_tribal_stfregular: { 
    fontFamily: 'urban_tribal_stfregular'
  },
  urban_brush_zoneregular: { 
    fontFamily: 'urban_brush_zoneregular'
  },
  urbanpaintsregular: { 
    fontFamily: 'urbanpaintsregular'
  },
  urbantrailsregular: { 
    fontFamily: 'urbantrailsregular'
  },
  urbanposterregular: { 
    fontFamily: 'urbanposterregular'
  }
};
// CONFIG OBJECT TO PASS TO HOC


class App extends Component {
  render() {
    let projectTitle = 'Earthgang'


    return (
      <div className="App">
        <div className="background-enhance">
          <header className="App-header">  
            <div style={{flexDirection:"row"}}> 




              {/* new wrap for dat perspective ting */} 
              <div className="wrap">
                <div className="bg">
                {/* perspective level 1 (back)*/}  



                  <div style={{ position: "absolute", width: "100%" }}>
                    <div className="plate">
                      <br />
                    </div>
                    <img src={hq} className="hq" alt="HQ" />

                    <div id="imageEye" className="spriteEye"></div>
                    <img src={leaf} className="leaf" alt="weed" />
                    <img src={leaf} className="leaf leaf_right" alt="grass" />
                  </div>

                    <div className="bg">
                    {/* perspective level 2*/}




                    <div id="imageHeadJohny" className="spriteHeadJohny"></div>

                    <div id="imageHeadDot" className="spriteHeadDot"></div>
                        <div className="bg"> 
                        {/* perspective level 3*/}



                      <img alt="" id="myButtn"  className="logoTop" src={logo} />
                      <div className="pyramid-box">
                        <img src={pyramid} className="pyramid" alt="pyramid" />
                        <img src={goldElevator} className="gold-elevator" alt="pain profit" />
                        <img src={eyeSprinkle} className="eye-sprinkle" alt="eye" />
                        <img src={demon} className="demon" alt="demon" />
                        <div className="stages stage-1-box">
                          <img src={stage1}className="stage-1" alt="Stage 1" />
                          <img src={stage1Fire1} className="stage-1-fire-1" alt="Stage 1 Fire 1" />
                          <img src={stage1Fire2} className="stage-1-fire-2" alt="Stage 1 Fire 2" />
                        </div>
                        <div className="stages stage-2-box">
                          <img src={stage2} className="stage-2" alt="Stage 2" />
                          <img src={stage2Fire1} className="stage-2-fire-1" alt="Stage 2 Fire 1" />
                        </div>
                      </div>

                          <div id="imageApe" className="spriteApe"></div>
                          <div id="imageHyena" className="spriteHyena"></div>
                          </div>

                        </div> 

                    </div>

                  </div>

              {/* End of new wrap for dat perspective ting */} 

            </div>
          </header>
          <div id="footer1">
          </div>
          <div id="footer2">
            <p>Footer (or other) content here</p>
          </div>

          <div style={{flexDirection:"row"}}> 
            <div>



            </div>
          </div> 
        </div>
      </div>
    );
  }
}






export default App;

Answer 1

嗯，这完全只是我自己的观点，可能是错误的。

如果您使用这种单一组件网站方法构建，那么不需要真正使用React。您只是根据此链接加载额外的 57 kb 或其他内容 React file size因为您没有加载额外的库。

但显然维护这并不是一件容易的事，你最好使用 React 功能来让你的生活更轻松并使应用程序可扩展