React?JSX深入淺出理解
更新時間：2022年12月30日 08:40:32 作者：碼農(nóng)小菲
React使用JSX來替代常規(guī)的JavaScript。JSX是一個看起來很像 XML的JavaScript語法擴展。我們不需要一定使用 JSX，但它有以下優(yōu)點：JSX執(zhí)行更快，因為它在編譯為JavaScript代碼后進行了優(yōu)化。它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯誤。使用JSX編寫模板更加簡單快速
概述
- jsx 本質(zhì)是React.createElement(component, props, …children)的語法糖
- component 指定 React 元素的類型
- React 必須在作用域內(nèi)
- 在 JSX 類型中可以使用點語法
- 不能將通用表達式作為 React 元素類型
- js表達式可以作為props傳遞給 jsx
- Props 默認值為 “True”
- 布爾類型、Null 以及 Undefined 不會被渲染
React.createElement(component, props, …children)語法糖
//如下 JSX 代碼：
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
//會編譯為：
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
//如果沒有子節(jié)點，你還可以使用自閉合的標簽形式，如：
<div className="sidebar" />
//會編譯為:
React.createElement(
'div',
{className: 'sidebar'}
)
指定 React 元素類型
JSX 標簽的第一部分指定了 React 元素的類型，大寫字母開頭的 JSX 標簽意味著它們是 React 組件
React 必須在作用域內(nèi)
由于 JSX 會編譯為 React.createElement 調(diào)用形式，所以 React 庫也必須包含在 JSX 代碼作用域內(nèi)
//在如下代碼中，雖然 React 和 CustomButton 并沒有被直接使用，但還是需要導入：
import React from 'react';
import CustomButton from './CustomButton';
function WarningButton() {
// return React.createElement(CustomButton, {color: 'red'}, null);
return <CustomButton color="red" />;
}
在 JSX 類型中使用點語法
- 以使用點語法來引用一個 React 組件
- 你在一個模塊中導出許多 React 組件時，這會非常方便哦
import React from 'react';
const MyComponents = {
DatePicker: function DatePicker(props){
return <div>Imagine a {props.color} datepicker here.</div>
}
}
function BlueDatePicker() {
return <MyComponents.DatePicker color="blue" />
}
用戶定義的組件必須以大寫字母開頭
以小寫字母開頭的元素代表一個 HTML 內(nèi)置組件
如 div 標簽 會編譯為 React.createElement(div)
大寫字母開頭的元素則對應(yīng)著在 JavaScript 引入或自定義的組件
如 Foo 標簽 會編譯為 React.createElement(Foo)
import React from 'react';
// 正確！組件需要以大寫字母開頭：
function Hello(props) {
// 正確！ 這種 <div> 的使用是合法的，因為 div 是一個有效的 HTML 標簽：
return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
// 正確！React 知道 <Hello /> 是一個組件，因為它是大寫字母開頭的：
return <Hello toWhat="World" />;
}
在運行時選擇類型
不能將通用表達式作為 React 元素類型,如果想通過通用表達式來動態(tài)決定元素類型，需要首先將它賦值給大寫字母開頭的變量。
import React from 'react';
import { PhotoStory, VideoStory } from './stories';
const components = {
photo: PhotoStory,
video: VideoStory
};
//錯誤寫法：
function Story(props) {
// 錯誤！JSX 類型不能是一個表達式。
return <components[props.storyType] story={props.story} />;
}
//正確寫法：
function Story(props) {
// 正確！JSX 類型可以是大寫字母開頭的變量。
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
}
JavaScript 表達式作為 Props
可以把包裹在 {} 中的 JavaScript 表達式作為一個 prop 傳遞給 JSX 元素
<MyComponent foo={1 + 2 + 3 + 4} />
if 語句以及 for 循環(huán)不是 JavaScript 表達式，所以不能在 JSX 中直接使用,但可以用在 JSX 以外的代碼中
function NumberDescriber(props) {
let description;
if (props.number % 2 == 0) {
description = <strong>even</strong>;
} else {
description = <i>odd</i>;
}
return <div>{props.number} is an {description} number</div>;
}
字符串字面量
可以將字符串字面量賦值給 prop
//等價
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />
將字符串字面量賦值給 prop 時，它的值是未轉(zhuǎn)義的
//等價
<MyComponent message="<3" />
<MyComponent message={'<3'} />
Props 默認值為 “True” 如果沒給 prop 賦值，它的默認值是 true
//等價
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
展開屬性
可以使用展開運算符 … 來在 JSX 中傳遞整個 props 對象
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
JSX子元素
字符串字面量
<MyComponent>Hello world!</MyComponent>
子元素允許由多個 JSX 元素組成
<MyContainer> <MyFirstComponent /> <MySecondComponent /> </MyContainer>
JavaScript 表達式作為子元素,使用 {} 包裹
//等價
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>
function Item(props) {
return <li>{props.message}</li>;
}
function TodoList() {
const todos = ['finish doc', 'submit pr', 'nag dan to review'];
return (
<ul>
{todos.map((message) => <Item key={message} message={message} />)}
</ul>
);
}
函數(shù)作為子元素
// 調(diào)用子元素回調(diào) numTimes 次，來重復生成組件
function Repeat(props) {
let items = [];
for (let i = 0; i < props.numTimes; i++) {
items.push(props.children(i));
}
return <div>{items}</div>;
}
function ListOfTenThings() {
return (
<Repeat numTimes={10}>
{(index) => <div key={index}>This is item {index} in the list</div>}
</Repeat>
);
}
//可以將任何東西作為子元素傳遞給自定義組件，只要確保在該組件渲染之前能夠被轉(zhuǎn)換成 React 理解的對象。這種用法并不常見，但可以用于擴展 JSX。布爾類型、Null 以及 Undefined 將會忽略，不會被渲染。如果你想渲染 false、true、null、undefined 等值，需要先將它們轉(zhuǎn)換為字符串：
<div>
My JavaScript variable is {String(myVariable)}.
</div>
到此這篇關(guān)于React JSX深入淺出理解的文章就介紹到這了,更多相關(guān)React JSX內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ReactNative-JS 調(diào)用原生方法實例代碼
這篇文章主要介紹了ReactNative-JS 調(diào)用原生方法實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
react以create-react-app為基礎(chǔ)創(chuàng)建項目
這篇文章主要介紹了react以create-react-app為基礎(chǔ)創(chuàng)建項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Context提供了一個無需為每層組件手動添加props，就能在組件樹間進行數(shù)據(jù)傳遞的方法。在一個典型的?React?應(yīng)用中，數(shù)據(jù)是通過props屬性自上而下（由父及子）進行傳遞的，但這種做法對于某些類型的屬性而言是極其繁瑣的2022-12-12
React Native 使用Fetch發(fā)送網(wǎng)絡(luò)請求的示例代碼
本篇文章主要介紹了React Native 使用Fetch發(fā)送網(wǎng)絡(luò)請求的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
React是用于構(gòu)建用戶界面的JavaScript庫，?[1]??起源于Facebook的內(nèi)部項目，該公司對市場上所有?JavaScript?MVC框架都不滿意，決定自行開發(fā)一套，用于架設(shè)Instagram的網(wǎng)站2022-07-07
關(guān)于react-router中的Prompt組件使用心得
這篇文章主要介紹了關(guān)于react-router中的Prompt組件學習心得,Prompt組件作用是,在用戶準備離開該頁面時,?彈出提示,?返回true或者false,?如果為true,?則離開頁面,?如果為false,?則停留在該頁面，本文結(jié)合示例代碼介紹的非常詳細，需要的朋友可以參考下2023-01-01
SOLID?是一套原則，它們主要是關(guān)心代碼質(zhì)量和可維護性的軟件專業(yè)人員的指導方針，本文給大家分享如何在React中應(yīng)用SOLID原則，感興趣的朋友一起看看吧2022-07-07
這篇文章主要介紹了React?在非組件環(huán)境切換路由的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
在fiber出現(xiàn)之前，react的架構(gòu)體系只有協(xié)調(diào)器reconciler和渲染器render。當前有新的update時，react會遞歸所有的vdom節(jié)點，如果dom節(jié)點過多，會導致其他事件影響滯后，造成卡頓。即之前的react版本無法中斷工作過程，一旦遞歸開始無法停留下來2023-02-02
這篇文章主要為大家介紹了React?組件樹遍歷技巧的掌握，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04