初識(shí) React 與 JSX
[TOC]
加載引入
- 基于瀏覽器 <script> 的模式
- 基于自動(dòng)化的集成環(huán)境模式
基于瀏覽器 <script> 的模式
React.js 框架本身包含兩個(gè)部分
- react.js：提供 React.js 核心功能代碼蚣录，如：虛擬 dom，組件
- react-dom.js：提供了與瀏覽器交互的 DOM 功能洼裤，如：dom 渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./js/react.production.min.js"></script>
<script src="./js/react-dom.production.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
<u>js/app.js</u>
ReactDOM.render(
'<div>開課吧</div>',
document.getElementById('app')
);
ReactDOM.render
ReactDOM.render(element, container[, callback])
element：要渲染的內(nèi)容
container：要渲染的內(nèi)容存放容器
callback：渲染后的回調(diào)函數(shù)
XSS
為了有效的防止 XSS 注入攻擊，React DOM 會(huì)在渲染的時(shí)候把內(nèi)容（字符串）進(jìn)行轉(zhuǎn)義扔嵌，所以字符串形式的標(biāo)簽是不會(huì)作為 HTML 標(biāo)簽進(jìn)行處理的
編程范式
就是編程的一種模式住练，比較流行的一些編程范式
- 命令式編程
- 聲明式編程
- 函數(shù)式編程
- ......
命令式編程
告訴計(jì)算機(jī)怎么做（<u>How交洗？</u>） - 過程
在前面的原生 <u>WebComponent</u> 中梧躺，我們 <u>UI</u> 的構(gòu)建是使用了命令式的編程方式來完成的
let shadow = this.attachShadow({mode: 'open'});
let style = document.createElement('style');
style.textContent = `span {color:red}`;
let span = document.createElement('span');
span.innerHTML = '我是自定義元素的內(nèi)容';
span.classList.add('cred');
shadow.appendChild(style);
shadow.appendChild(span);
聲明式編程
告訴計(jì)算機(jī)我們要什么（<u>What劣挫？</u>） - 結(jié)果
SELECT * FROM `USER` WHERE `gender`='男' ORDER BY `age` DESC;
上面的 <u>SQL</u> 就是一個(gè)典型的聲明式編程册养，告訴數(shù)據(jù)庫，我要什么結(jié)果压固，至于怎么查詢出來結(jié)果球拦，排序如何實(shí)現(xiàn)的過程 <u>SQL</u> 并不關(guān)心，由內(nèi)部（底層）實(shí)現(xiàn)
['k',1,2,'k',true,'b'].filter(v => Number.isFinite(v)).map(v=>v*10).reduce((c, v)=>c + v, 0);
React.js 中的聲明式 UI
<span className="cred">我是自定義元素的內(nèi)容</span>
使用 <u>JSX</u>
JSX 是一個(gè)基于 JavaScript + XML 的一個(gè)擴(kuò)展語法
- 它可以作為
值使用 - 它并不是
字符串 - 它也不是
HTML - 它可以配合
JavaScript 表達(dá)式一起使用
<u>js/app.js</u>
ReactDOM.render(
<div>開課吧</div>,
document.getElementById('app')
);
引入 <u>JSX</u> 解析庫
babel-standalone.js：在瀏覽器中處理 JSX
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" src="js/app.js"></script>
注意：如果包含或引入的代碼中包含
JSX帐我，需要設(shè)置script標(biāo)簽的type屬性為：text/babel
<u>DOM</u> 對(duì)象與 <u>Virtual DOM</u>
DOM 對(duì)象
瀏覽器會(huì)把頁面中的元素映射為 JavaScript 中的對(duì)象坎炼，在 JavaScript 中通過對(duì)這些對(duì)象的訪問來獲取頁面中對(duì)應(yīng)元素及其內(nèi)容。同時(shí)拦键，對(duì)這些對(duì)象進(jìn)行某些操作点弯，又會(huì)反饋到頁面中對(duì)應(yīng)的元素上面。
但是矿咕，原生 JavaScript DOM 對(duì)象內(nèi)容和結(jié)構(gòu)太復(fù)雜抢肛，有很多的特性是我們平時(shí)很少用到的，而且我們對(duì)對(duì)象的操作會(huì)立即反饋到頁面（渲染）碳柱，影響性能
虛擬 DOM
virtual DOM捡絮，參考原生 DOM 對(duì)象構(gòu)建的一個(gè)對(duì)象，它的結(jié)構(gòu)足夠簡(jiǎn)單莲镣，同時(shí)優(yōu)化渲染邏輯福稳，減少變化帶來的渲染性能影響
const App = (
<div>
<h1>開課吧</h1>
<p>web前端高級(jí)工程師</p>
</div>
);
生成的 virtual DOM 結(jié)構(gòu)如下：
[圖片上傳失敗...(image-cc2126-1613962459253)]
<u>JSX</u> 語法規(guī)則
結(jié)構(gòu)
每一個(gè)獨(dú)立 JSX 結(jié)構(gòu)的頂層有且只能有一個(gè)頂級(jí)父元素
// 錯(cuò)誤
const App = (
<div>
<h1>開課吧</h1>
<p>web前端高級(jí)工程師</p>
</div>
<div>第二個(gè)</div>
);
// 正確
const App = (
<div>
<div>
<h1>開課吧</h1>
<p>web前端高級(jí)工程師</p>
</div>
<div>第二個(gè)</div>
</div>
);
在 <u>JSX</u> 中嵌入表達(dá)式
在 JXS 中可以使用 <u>{表達(dá)式}</u> 嵌入JavaScript表達(dá)式
表達(dá)式：產(chǎn)生值的一組代碼的集合
- 變量
- 算術(shù)運(yùn)算
- 函數(shù)調(diào)用
- ……
let name = '開課吧';
let title = 'web前端高級(jí)工程師';
const App = (
<div>
<h1>{name}</h1>
<p>{title}</p>
</div>
);
<span style="color:red">注意：分清楚 <u>表達(dá)式</u> 與 <u>語句</u> 的區(qū)別，<u>if</u>瑞侮、<u>for</u>的圆、<u>while</u> 這些都是語句，<u>JSX</u> 不支持語句</span>
<h1>{if (true) {...}</h1> // 錯(cuò)誤
<u>JSX</u> 語法示例
在 JSX 中半火，表達(dá)式輸出的內(nèi)容類型與使用位置也有一些區(qū)別
<u>JSX</u> 中的注釋
<div>
{/*注釋*/}
{/*
多行注釋
*/}
</div>
輸出數(shù)據(jù)類型
- <u>字符串</u>越妈、<u>數(shù)字</u>：原樣輸出
- <u>數(shù)組</u>：轉(zhuǎn)成字符串，數(shù)組.join('')
- 使用 <u>空字符串</u> 而不是默認(rèn)的 <u>逗號(hào)</u> 連接
- <u>其它對(duì)象</u>不能直接輸出
- <u>布爾值</u>钮糖、<u>空</u>梅掠、<u>未定義</u> 會(huì)被忽略
在屬性上使用 <u>表達(dá)式</u>
<u>JSX</u> 中的表達(dá)式也可以使用在屬性上酌住，但是使用的時(shí)候需要注意
- 當(dāng)在屬性中使用 <u>{}</u> 的時(shí)候，不要使用引號(hào)包含
let id = 'kaikeba';
// 錯(cuò)誤
const App = (
<div id="{id}"></div>
);
// 正確
const App = (
<div id={id}></div>
);
- <u>JSX</u> 更偏向 <u>JavaScript</u>阎抒， 所以對(duì)于一些特殊的屬性酪我，使用的是 <u>JavaScript</u> 中的屬性名風(fēng)格
// 錯(cuò)誤
const App = (
<div class="box1"></div>
);
// 正確
const App = (
<div className="box1"></div>
);
- 為了更加方法的操作元素的 <u>style</u>，針對(duì) <u>style</u> 這個(gè)屬性有特殊的處理
const App = (
<div style={{width: '100px', height: '100px', color:'red'}}></div>
);
這里的兩個(gè) <u>{{}}</u> 且叁，外部的大括號(hào)表示的是前面說的表達(dá)式語法中的大括號(hào)都哭，里面的大括號(hào)是表示對(duì)象的大括號(hào)
let skin = {width: '100px', height: '100px', color:'red'};
const App = (
<div style={skin}></div>
);
列表渲染
如果需要渲染一組數(shù)據(jù)，我們可以通過遍歷（數(shù)組遍歷逞带、對(duì)象變量……）等操作欺矫，返回一組 <u>JSX</u>
數(shù)據(jù)
let zMouse = {
name: '子鼠',
gender: '男',
skills: ['JavaScript', 'Node.js'],
interests: ['音樂', '足球', '編程']
};
數(shù)組
function getSkills() {
return (
<ul>
{zMouse.skills.map(skill => <li>{skill}</li>)}
</ul>
);
}
const App = (
<div>{getSkills()}</div>
);
// 或者
const App = (
<div>
<ul>
{zMouse.skills.map(skill => <li>{skill}</li>)}
</ul>
</div>
);
對(duì)象
function getKeys() {
let arr = [];
for (let k in zMouse) {
arr.push(<li>{k}</li>);
}
return arr;
}
const App = (
<div>
<ul>
{getKeys()}
</ul>
</div>
);
// 或者
const App = (
<div>
<ul>
{Object.keys(zMouse).map(key => <li>{key}</li>)}
</ul>
</div>
);
key
默認(rèn)情況下，React 從性能上考慮掰担，會(huì)盡可能的復(fù)用結(jié)構(gòu)汇陆，針對(duì) <u>同組可變列表</u> 結(jié)構(gòu)怒炸，為了避免出現(xiàn)某些方面的問題带饱，通常會(huì)給每一個(gè)列表添加一個(gè) <u>唯一的 key</u>
<ul> {[{id:1,name:'zMouse',id:2,name:'MT'}].map(user => <li key={user.id}>{user.name}</li>)} </ul><span style="color:red">注意：key 的值不推薦使用數(shù)組的下標(biāo)，具體原因阅羹，章節(jié)最后詳細(xì)解釋</span>
條件渲染
function moreInterests() {
if (zMouse.interests.length > 2) {
return <a href="#">更多</a>
}
}
const App = (
<div>
愛好：{zMouse.interests.map(interest=>{
return <span style={{marginRight:"10px"}}>{interest}</span>
})}
{moreInterests()}
</div>
);
三元運(yùn)算符
const App = (
<div>
愛好：{zMouse.interests.map(interest=>{
return <span style={{marginRight:"10px"}}>{interest}</span>
})}
{zMouse.interests.length > 2 ? <a href="#">更多</a> : null}
</div>
);
與或運(yùn)算符
const App = (
<div>
愛好：{zMouse.interests.map(interest=>{
return <span style={{marginRight:"10px"}}>{interest}</span>
})}
{zMouse.interests.length > 2 && <a href="#">更多</a>}
{zMouse.interests.length < 4 || <a href="#">更多</a>}
</div>
);
