React - jsx使用及注意要點

eact 使用 JSX 來替代常規(guī)的 JavaScript。

1、使用jsx的注意規(guī)則

React元素的屬性名使用駝峰命名法
特殊屬性名：class -> calssName, for -> htmlFor, tabindex -> tabIndex
沒有子節(jié)點的React元素可以使用 /> 結(jié)束。
推薦：使用小括號包裹JSX, 從而避免JS中的自動插入分號陷阱。

// 使用小括號包裹JSX
const div=(
    <div> Hello JSX</div>
)

2、使用JavaScript表達式

注意規(guī)則：

單大括號中可以使用任意的JavaScript表達式
JSX自身也是JS表達式
JS中的對象是一個例外，一般只會出現(xiàn)在style屬性中
不能在{}中出現(xiàn)語句的，比如：if/for等

const hName=<h1> 我是JSX </h1>
const sayHi=()=> 'Hi~,箭頭函數(shù)'
const div=(
    <div>
        <div>嵌套表達式，{hName}</div>
        <p>{1}</p>
        <p>{1 + 2}</p>
        <p>{1 > 2 ? "大于":"小于或等于"}</p>
        <p>{sayHi()}</p>
    </div>
)

3、jsx可以條件渲染、列表渲染

if/else，三元運算符，邏輯與運算符（&&）
map()方法渲染一組數(shù)據(jù)

const citys={
    {id: 1, name: 'beijing'},
    {id: 2, name: 'tianjin'},
    {id: 3, name: 'shanghai'}   
}
# 注意：渲染列表是應該添加key屬性，key屬性的值保證唯一
# 原則：map()遍歷誰，就給誰添加key屬性,盡量避免使用索引號作為key
const list=(
    <ul>
        {citys.map(item=> <li key={item.id}>{item.name}</li>)}
    </ul>
)

4、jsx 的樣式處理

4.1、行內(nèi)樣式 ---style

const list=(
    <h1 style={{ color: 'red', backgroundColor: 'skybule'}}>
        jsx的樣式處理
    </h1>
)

ReactDOM.render(list, document.getElementById('root'))

4.2、類名 ---className（推薦）

    <h1 className="title">
        jsx的樣式處理
    </h1>

5、jsx的轉(zhuǎn)換過程

JSX是createElment()方法的語法糖
JSX語法會被@babel/preset-react插件編譯為createElement()方法
React元素是一個普通的JS對象，用來描述你希望看到的內(nèi)容。

JSX轉(zhuǎn)化過程示意圖

#前端##詩詞歌賦##每日一詩#

——————————————————————————

海上生明月，天涯共此時。
情人怨遙夜，竟夕起相思。
滅燭憐光滿，披衣覺露滋。
不堪盈手贈，還寢夢佳期。

- 望月懷遠 【唐】張九齡

文：https://www.jianshu.com/p/2b6fb4bcb829
作者：石小泉

JSX是啥

JSX 是 Facebook 團隊提出的一個語法方案，可以在 JavaScript 的代碼中直接使用 HTML標簽來編寫 JavaScript 對象。

JSX使用的是 XML-like 語法，這種語法方案需要通過 JSXTransformer 將JSX代碼編譯轉(zhuǎn)換成真實可用的 JavaScript 代碼。

為了學習React才學習的JSX，下面都是結(jié)合React講解

為啥用她，哪兒好

React 不一定非要使用JSX，使用原生的JavaScript也是可以的，只是語法會變得很復雜，因為它能定義簡潔且我們熟知的包含屬性的樹狀結(jié)構(gòu)語法。

對于非專職開發(fā)者（比如設計師）同樣比較熟悉。

XML 有固定的標簽開啟和閉合。這能讓復雜的樹更易于閱讀，優(yōu)于方法調(diào)用和對象字面量的形式。

它沒有修改 JavaScript 語義。

HTML標簽與 React組件對比

React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。

要渲染 HTML 標簽，只需在 JSX 里使用小寫字母開頭的標簽名。

var myDivElement=<div className="foo" />;
React.render(myDivElement, document.body);

要渲染 React 組件，只需創(chuàng)建一個大寫字母開頭的本地變量。

var MyComponent=React.createClass({/*...*/});
var myElement=<MyComponent someProperty={true} />;
React.render(myElement, document.body);

React 的 JSX 里約定分別使用首字母大、小寫來區(qū)分本地組件的類和 HTML 標簽。

Tips:

由于 JSX 就是 JavaScript，一些標識符像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className 和 htmlFor 來做對應的屬性。

轉(zhuǎn)換

JSX 把類 XML 的語法轉(zhuǎn)成純粹 JavaScript，XML 元素、屬性和子節(jié)點被轉(zhuǎn)換成 React.createElement 的參數(shù)。

var Nav;
// 輸入 (JSX):
var app=<Nav color="blue" />;
// 輸出 (JS):
var app=React.createElement(Nav, {color:"blue"});

Tips：

要想使用 <Nav />，Nav 變量一定要在作用區(qū)間內(nèi)。

JSX 也支持使用 XML 語法定義子結(jié)點：

var Nav, Profile;
// 輸入 (JSX):
var app=<Nav color="blue"><Profile>click</Profile></Nav>;
// 輸出 (JS):
var app=React.createElement(
 Nav,
 {color:"blue"},
 React.createElement(Profile, null, "click")
);

使用 JSX 編譯器來試用 JSX 并理解它是如何轉(zhuǎn)換到原生 JavaScript，還有 HTML 到 JSX 轉(zhuǎn)換器來把現(xiàn)有 HTML 轉(zhuǎn)成 JSX。

Tips:

JSX 表達式總是會當作 ReactElement 執(zhí)行。具體的實際細節(jié)可能不同。一種優(yōu)化的模式是把 ReactElement 當作一個行內(nèi)的對象字面量形式來繞過 React.createElement 里的校驗代碼。

JavaScript 表達式

屬性表達式

要使用 JavaScript 表達式作為屬性值，只需把這個表達式用一對大括號 ({}) 包起來，不要用引號 ("")。

// 輸入 (JSX):
var person=<Person name={window.isLoggedIn ? window.name : ''} />;
// 輸出 (JS):
var person=React.createElement(
 Person,
 {name: window.isLoggedIn ? window.name : ''}
);

子節(jié)點表達式

同樣地，JavaScript 表達式可用于描述子結(jié)點：

// 輸入 (JSX):
var content=<Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 輸出 (JS):
var content=React.createElement(
 Container,
 null,
 window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

注釋

JSX 里添加注釋很容易；它們只是 JS 表達式而已。你只需要在一個標簽的子節(jié)點內(nèi)(非最外層)小心地用 {} 包圍要注釋的部分。

var content=(
 <Nav>
 {/* 一般注釋, 用 {} 包圍 */}
 <Person
 /* 多
 行
 注釋 */
 name={window.isLoggedIn ? window.name : ''} // 行尾注釋
 />
 </Nav>
);

Tips:

JSX 類似于 HTML，但不完全一樣。參考 JSX 陷阱了解主要不同。

JSX延伸（屬性）

修改 Props 是不好的

如果你不知道要設置哪些 Props，那么現(xiàn)在最好不要設置它：

var component=<Component />;
 component.props.foo=x; // 不好
 component.props.bar=y; // 同樣不好

這樣是反模式，因為 React 不能幫你檢查屬性類型（propTypes）。這樣即使你的屬性類型有錯誤也不能得到清晰的錯誤提示。

Props 應該被當作禁止修改的。修改 props 對象可能會導致預料之外的結(jié)果，所以最好不要去修改 props 對象。

延展屬性（Spread Attributes）

現(xiàn)在你可以使用 JSX 的新特性 - 延展屬性：

var props={};
 props.foo=x;
 props.bar=y;
 var component=<Component {...props} />;

傳入對象的屬性會被復制到組件內(nèi)。

它能被多次使用，也可以和其它屬性一起用。注意順序很重要，后面的會覆蓋掉前面的。

var props={ foo: 'default' };
 var component=<Component {...props} foo={'override'} />;
 console.log(component.props.foo); // 'override'

這個奇怪的 ... 標記是什么？

這個==...==操作符（也被叫做延展操作符－ spread operator）已經(jīng)被 ES6 數(shù)組支持。相關(guān)的還有 ES7 規(guī)范草案中的 Object 剩余和延展屬性（Rest and Spread Properties）。我們利用了這些還在制定中標準中已經(jīng)被支持的特性來使 JSX 擁有更優(yōu)雅的語法。

JSX 的陷阱

JSX 與 HTML 非常相似，但是有些關(guān)鍵區(qū)別要注意。

Tips:

關(guān)于 DOM 的區(qū)別，如行內(nèi)樣式屬性 style

HTML 實體

HTML 實體可以插入到 JSX 的文本中。

<div>First · Second</div>

如果想在 JSX 表達式中顯示 HTML 實體，可以會遇到二次轉(zhuǎn)義的問題，因為 React 默認會轉(zhuǎn)義所有字符串，為了防止各種 XSS 攻擊。

// 錯誤: 會顯示 “First · Second”
<div>{'First · Second'}</div>

有多種繞過的方法。最簡單的是直接用 Unicode 字符。這時要確保文件是 UTF-8 編碼且網(wǎng)頁也指定為 UTF-8 編碼。

<div>{'First · Second'}</div>

安全的做法是先找到實體的 Unicode 編號，然后在 JavaScript 字符串里使用。

<div>{'First \u00b7 Second'}</div>
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

可以在數(shù)組里混合使用字符串和 JSX 元素。

<div>{['First ', <span>·</span>, ' Second']}</div>

萬不得已，可以直接使用原始 HTML。

<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />

自定義 HTML 屬性

如果往原生 HTML 元素里傳入 HTML 規(guī)范里不存在的屬性，React 不會顯示它們。如果需要使用自定義屬性，要加 data- 前綴。

<div data-custom-attribute="foo" />

以 aria- 開頭的 [網(wǎng)絡無障礙] 屬性可以正常使用。

SX（JavaScript XML）是一種在 React 中用于描述用戶界面的 JavaScript 語法擴展。在 JavaScript 代碼中編寫類似 HTML 的結(jié)構(gòu)，以聲明式地定義組件的外觀和行為。

JSX 的語法看起來類似于 XML 或 HTML，但實際上是 JavaScript 的一種語法擴展。可以使用標簽、屬性和表達式來描述組件。

以下是 JSX 的一些特點和用法：

1：組件聲明：
使用 JSX，聲明自定義組件和內(nèi)置組件，以創(chuàng)建像 HTML 標簽一樣的自定義標簽。

function MyComponent() {
  return <div>Hello, World!</div>;
}

2：表達式插值：
JSX 在大括號 {} 中插入 JavaScript 表達式，動態(tài)地生成內(nèi)容。

function Greeting(props) {
  return <div>Hello, {props.name}!</div>;
}

3：屬性傳遞：
在 HTML 中一樣，為 JSX 元素添加屬性，并通過屬性傳遞數(shù)據(jù)給組件。

function Button(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

4：條件渲染：
在組件中使用條件語句，根據(jù)條件決定是否渲染特定的元素。

function MyComponent(props) {
  return (
    <div>
      {props.isVisible && <p>This is visible</p>}
      {!props.isLoggedIn && <p>Please log in</p>}
    </div>
  );
}

將 JavaScript 和 HTML 結(jié)合在一起，使得編寫 React 組件更加方便和可讀性更高。

在線咨詢

上一篇：WordPress Body Class 101：主
下一篇：HTML入門基礎(chǔ)知識

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

React - jsx使用及注意要點

JSX是啥

JSX延伸（屬性）

JSX 的陷阱

您的項目需求