javascript - 使用 Html/css/js 中的一个模块 VS 在 React 中构建一个小型站点
问题描述
我是 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;
解决方案
好吧,这完全是我个人的看法,可能是错误的。
如果您正在使用这种单组件网站方法进行构建,那么实际上不需要使用 react。您只是根据此链接React 文件大小加载额外的 57 kb 或其他内容,因为您没有加载额外的库。
但显然维护这不是一件容易的事,你最好使用反应功能让你的生活更轻松,并使应用程序可扩展
推荐阅读
- java - 字符串引导:UriComponentsBuilder '#' 替换为 `%23'
- python-3.x - 如何提高 Doc2vec 余弦相似度的重现性
- java - java.lang.UnsupportedOperationException 通过引用链:java.util.HashMap
- node.js - Sinon 存根作为 node express 中间件被跳过
- expand - Snakemake - 多对一使用扩展异常
- powershell - 在 Dollar Universe 中使用 PoSh KeePass
- javascript - 在多系列图表的 FusionCharts“plotToolText”中仅打印一次标签
- java - 获取 Windows 中定义的环境变量(不是特定于进程的)
- php - PHP 无法将空值设置为 Dynamics CRM 2013 上的查找字段
- python - 如何通过 PyQt5 提交数据和搜索