webpack react，react編碼規范

2023-10-15 阅读 23 评论 0

摘要：一、了解 js 文件和 jsx 文件的差別嗎？（以及 ts 與 tsx） ?定義： ????????JS：即JavaScript，一種直譯式腳本語言；JSX:即JavaScript XML——一種在React組建內部構建標簽的類XML語法。 ?區別： ????????1、瀏覽器只能識

一、了解 js 文件和 jsx 文件的差別嗎？（以及 ts 與 tsx）

?定義：

????????JS：即JavaScript，一種直譯式腳本語言；JSX:即JavaScript XML——一種在React組建內部構建標簽的類XML語法。

?區別：

????????1、瀏覽器只能識別普通的js，普通的css，并不能識別scss，或者jsx（scss是css的拓展，jsx可以看做是js的拓展），所以webpack的作用是把scss轉換為css，把jsx轉換為瀏覽器可以識別的js，然后瀏覽器才能正常使用；

? ? ? ? 2、JSX是JS的語法糖，編譯時JSX會通過Babel編譯成JS。React源碼中使用React.createElement()方法來創建JSX，該方法依次接收DOM節點（比如div、span）、屬性集合（比如className、style）和children（子節點）三個參數，并返回一個JS對象，也就是虛擬DOM。

? ? ? ?3、React 官方推薦使用 jsx，React 認為渲染邏輯本質上與其他 UI 邏輯內在耦合，比如，在 UI 中需要綁定處理事件、在某些時刻狀態發生變化時需要通知到 UI 展示對應的數據；數據驅動頁面，數據盡量與UI分離，結構才更清晰。
?

二、編碼原則

webpack react，? ? ? ?1. jsx 中可以寫 js 代碼。但盡量簡潔（不要有太多邏輯）可寫變量或表達式，請放在大括號{ }中。

例如一下js語句：

????????a ? b : c? ? ?

????????a && b

? ? ? ? Array.map()

編碼規范是什么。????????console.log( )

????????????????注意：

? ? ? ? ? ? ? ? ? ? ? ? a. 不要寫: if 判斷語句等；

????????????????? ? ? ? b. 在標簽內用大括號 { } 括住的是變量！? 單雙引號 ’ ‘? 、 " " 引住的是字符常量！? ? ? ? ? ? ? ? ? ?可用模板字符串 ` ${ } `包裹字符和變量?

? ? ? ? ? ? ? ? ? ? ? ? c. 若要寫回調函數可寫成內斂形式，但不推薦