網頁大哉問-使用REACT寫網頁，元素就會是所謂亂碼！？？？

前端 react javascript 網頁框架

Oo_花之舞__oO 2023-10-14 15:57:50 ‧ 1771 瀏覽

分享至

前情提要

哈囉各位好久不見很久沒碰程式最近回鍋囉！

以前我問過　為什麼低卡的div會一直改變className
有高手回答說:
用React的nextjs 框架開發
原理是因為Virtual DOM
(已解決)HTML-別人的網頁一直持續變化className?
有興趣可以去複習XD

主要問題

最近逛網頁又發現一個react開發的網站裡面className真的怪醜

想問一下，如果用react開發網站
是否div的class就都會是長這個德性？

討論議題

還滿好奇為什麼看起來是這樣子不可閱讀的編碼class
還有其他前端框架也會生出這種東西嗎
我印象自己玩vue弄出來的長得跟原生JS html沒什麼區別呀

怎麼就有這種奇怪b7 ea 這種奇怪class 是隨機產生的沒意義嗎？？

對前端框架比較無知請各位前輩們再來分享一下感恩！

rian1995 iT邦新手 5 級 ‧ 2023-10-18 11:28:38 檢舉

我猜測是為了壓縮文件尺寸，將全className 依亂碼表重新編成更短的代碼
像是bootstrap的屬性名字都超長，丟進翻譯器基本上都可以猜出意思。
我個人覺得是架構如何輸出css文件

Oo_花之舞__oO iT邦新手 1 級 ‧ 2023-10-18 13:28:58 檢舉

@rian1995 有道理欸沒有想到是壓縮感覺很正確的推理

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

前端野人

iT邦新手 3 級 ‧ 2023-10-15 00:17:10

因為人家不是直接用 css 寫得
可能是用css-in-js吧這種是用js寫CSS

阿這麼久沒上線怎麼又遇到你問這些怪問題

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

janlin002 iT邦好手 1 級 ‧ 2023-10-15 01:13:43 檢舉

就我所知 css-in-js 的 class 會變成亂碼是因為避免 class 樣式覆蓋，所以生成的 class 也會是唯一值，但上面的圖片來看貌似都一樣？

Oo_花之舞__oO iT邦新手 1 級 ‧ 2023-10-15 04:23:18 檢舉

不要說是怪問題啦前輩ＸＤ！
我只是很有好奇心，對這個前端領域很好奇！
依照各位給予我的指點，我進步很多、很多朋友也都爬到我的文章或發問，都說很有幫助▼・ᴥ・▼

話說leetcode的系列還會更新嗎？我日後也想玩刷題！

css-in-js我還真的第一次聽說，又學到了ＸＤＤＤ

Oo_花之舞__oO iT邦新手 1 級 ‧ 2023-10-15 04:25:10 檢舉

@janlin002 根據那個網站的開發者他只有說用react開發

前端野人 iT邦新手 3 級 ‧ 2023-10-15 10:02:57 檢舉

也可能底層是自己用postcss 改寫的

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙