我使用反應和 jsx。我的問題是 jsx 如何是有效的 js 語法？我認為這可能是正確的唯一方法是 react 編譯所有檔案并將 jsx(s) 轉換為有效的 js。就像 C 前處理器對宏所做的那樣。這是真的嗎？如果是真的，我們是否將 react 視為 js 庫？我認為這是一個更高層次的圖書館。
如果否，由誰完成？
uj5u.com熱心網友回復：
JSX只是函式呼叫上的語法糖React.createElement，它由Babel.
作為開發人員，您可能不喜歡 React 元素的創建方式，因此 React 團隊提供了JSX語法和它非常簡單，您可以與 HTML 相關聯。
沒有人阻止您使用React.createElement. 但這會使您的代碼過度膨脹。
舉個例子，你決定使用 Raw React，然后你會得到如下結果。
const list =
React.createElement('div', {},
React.createElement('h1', {}, 'My favorite ice cream flavors'),
React.createElement('ul', {},
[
React.createElement('li', { className: 'brown' }, 'Chocolate'),
React.createElement('li', { className: 'white' }, 'Vanilla'),
React.createElement('li', { className: 'yellow' }, 'Banana')
]
)
);
上面的代碼將按預期作業，但它有一些限制：
- 不可讀
- 不可維護
使用 JSX 語法后，您將不會遇到這些問題，如下所示使用 JSX。
<div>
<h1>My favorite ice cream flavors</h1>
<ul>
<li className="brown">Chocolate</li>
<li className="white">Vanilla</li>
<li className="yellow">Banana</li>
</ul>
</div>
你可以在上面看到 babeljs.io
如果您的組件是
import "./styles.css";
export default function App() {
return (
<div>
<h1>Hello word</h1>
<h2>I'm learning React</h2>
</div>
);
}
那么它將被轉譯為
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = App;
require("./styles.css");
function App() {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Hello word"), /*#__PURE__*/React.createElement("h2", null, "I'm learning React"));
}
uj5u.com熱心網友回復：
JSX 是not一個有效的JavaScript.
JSX 與 JavaScript 很相似。編譯器Babel將 JSX 代碼轉換為有意義的 JavaScript 代碼。使用 JSX 編譯器，您可以將 JSX 運算式轉換為對React.createElement 的呼叫
JSX：
<p style={{color:'#000', background:'blue'}}>This is JSX</p>
編譯后的 JavaScript：
"use strict";
/*#__PURE__*/
React.createElement("p", {
style: {
color: '#000',
background: 'blue'
}
}, "This is JSX");
您可以在此處查看運行時編譯
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/370409.html
標籤：javascript 反应 jsx
上一篇：如何給邊框添加影片
下一篇：將PHP變數直接包含到js檔案中