資訊專欄INFORMATION COLUMN
摘要：但是隨著程序邏輯越來(lái)越復(fù)雜，業(yè)務(wù)邏輯代碼跟代碼混到一起就變得越來(lái)越難以維護(hù)，所以就有了開(kāi)發(fā)模式。其實(shí)只是給加了點(diǎn)糖上面這種在中寫類似代碼的語(yǔ)法被稱為。你可以理解為擴(kuò)展版的。尤其是對(duì)一些相對(duì)還比較流行的框架或技術(shù)，更是如此。
這是《玩轉(zhuǎn) React》系列的第三篇，看到本篇的標(biāo)題，了解過(guò) React 的同學(xué)可能已經(jīng)大致猜到我要講什么了，本篇中要講的內(nèi)容對(duì)于剛接觸 React 的同學(xué)來(lái)說(shuō)，可能有些難以接受，但希望你能堅(jiān)持學(xué)下去，這是 Facebook 的前端大神們?yōu)榍岸碎_(kāi)發(fā)做出的革命性創(chuàng)新。
React 第一印象廢話不多說(shuō)，先看一段代碼：
class HelloMessage extends React.Component {
render() {
return Hello {this.props.name};
}
}
ReactDOM.render(
這是從 React 官網(wǎng)首頁(yè)粘貼過(guò)來(lái)的一段示例代碼，簡(jiǎn)單解釋一下，這段代碼實(shí)現(xiàn)了一個(gè)名為 HelloMessage 的組件，它接收一個(gè) name 屬性，可以在頁(yè)面上展示出 Hello xxx。ReactDOM.render 是用來(lái)將某個(gè)組件渲染到頁(yè)面的某個(gè) DOM 節(jié)點(diǎn)上。
在之后的文章中，我們會(huì)詳細(xì)講解如何創(chuàng)建 React 組件以及如何開(kāi)發(fā)一個(gè)完整的 React 項(xiàng)目?，F(xiàn)在，我更想跟大家探討的是，你看了上述這段代碼，算是對(duì) React 有了第一印象，內(nèi)心是怎樣的感受？
我相信，很多人第一次看到這樣的代碼時(shí)的感受都是：“我擦，這是什么玩意兒，HTML怎么都寫到JavaScript代碼里去了，展示與業(yè)務(wù)邏輯分離，這都不懂？”，說(shuō)實(shí)話，這就是我當(dāng)時(shí)真實(shí)的內(nèi)心感受。很幸運(yùn)我堅(jiān)持了下去，并一直用到現(xiàn)在，現(xiàn)在我對(duì) React 的感受是：“我擦，好爽，好牛逼”。
剛開(kāi)始有這種想法很好理解，好多人像我一樣被“展示要與業(yè)務(wù)邏輯分離”這句話洗腦太久了，其實(shí)，這句話真正發(fā)揮價(jià)值的時(shí)候，是在 MVC 開(kāi)發(fā)模式出現(xiàn)之前，那時(shí)候 web 程序邏輯很簡(jiǎn)單，可能頁(yè)面開(kāi)始處是連接數(shù)據(jù)庫(kù)，查詢數(shù)據(jù)，接在下面就是 HTML 代碼來(lái)展示查詢結(jié)果了。如果你了解一點(diǎn) PHP，在 PHP 文件的開(kāi)始處有個(gè) 結(jié)尾處可能有個(gè) ?>，這就是那個(gè)年代用來(lái)分隔 PHP 代碼和 HTML 代碼的。但是隨著 web 程序邏輯越來(lái)越復(fù)雜，業(yè)務(wù)邏輯代碼跟 HTML 代碼混到一起就變得越來(lái)越難以維護(hù)，所以就有了 MVC 開(kāi)發(fā)模式。
并不是說(shuō)現(xiàn)在“展示要與業(yè)務(wù)邏輯分離”這句話已經(jīng)不適用于現(xiàn)在的 web開(kāi)發(fā)，我想說(shuō)的是，我們看問(wèn)題，要回歸問(wèn)題的本質(zhì)，我們要不要接受 React 的這種寫法，判斷依據(jù)應(yīng)該是基于 React 的這種寫法有沒(méi)有讓我們的前端代碼變得更清晰、易維護(hù)性更強(qiáng)，而不是 JavaScript 中是不是寫了類似于 HTML 語(yǔ)法的東西，千萬(wàn)不要為了分離而分離。
其實(shí)只是給JavaScript加了點(diǎn)糖 - JSX上面這種在 JavaScript 中寫類似 HMTL 代碼的語(yǔ)法被稱為 JSX。你可以理解為擴(kuò)展版的 JavaScript。顯然，這種語(yǔ)法在瀏覽器環(huán)境中是不能執(zhí)行的，所以在代碼加載到頁(yè)面中之前，我們需要通過(guò)工具將它轉(zhuǎn)譯成標(biāo)準(zhǔn)的 JavaScript 語(yǔ)法，就像我們現(xiàn)在為什么可以用 ES6 的語(yǔ)法一樣，盡管目前瀏覽器對(duì)它支持得還不好。例如下面這兩段代碼，實(shí)際上是等價(jià)的。
JSX 語(yǔ)法：
const element = (Hello, world!
);
由上面代碼轉(zhuǎn)譯而來(lái)的標(biāo)準(zhǔn) JavaScript 語(yǔ)法：
const element = React.createElement(
"h1",
{className: "greeting"},
"Hello, world!"
);
是不是感覺(jué) JSX 語(yǔ)法更直觀，寫起來(lái)更簡(jiǎn)潔？所以說(shuō) JSX 實(shí)際上是 React.createElement(component, props, ...children) 的語(yǔ)法糖。
如果你熟悉 HTML，那么 JSX 對(duì)于你來(lái)說(shuō)是沒(méi)有任何壓力的，因?yàn)?HTML 中的所有標(biāo)簽，在 JSX 中都是支持的，基本上沒(méi)有學(xué)習(xí)成本，只有如下幾點(diǎn)略微的不同：
class 屬性變?yōu)?className
tabindex 屬性變?yōu)?tabIndex
for 屬性變?yōu)?htmlFor
textarea 的值通過(guò)需要通過(guò) value 屬性來(lái)指定
style 屬性的值接收一個(gè)對(duì)象，css 的屬性變?yōu)轳劮鍖懛?，如：backgroundColor。
在上一篇中，我們有提到組件，實(shí)際上，我們可以把在 JSX 中寫的 HTML 標(biāo)簽看作是 React 內(nèi)部已經(jīng)實(shí)現(xiàn)了的基礎(chǔ)組件。在下一篇中我將詳細(xì)為大家介紹如何利用這些基礎(chǔ)組件來(lái)創(chuàng)造一個(gè)新的組件，也就是上一篇提到的 React 所提供的創(chuàng)建一個(gè)新的 HTML 標(biāo)簽的能力。
寫在最后這篇文章的主要目的是希望大家對(duì) JSX 有個(gè)基本的印象，我了解到有很多同學(xué)就是因?yàn)榭戳艘谎?JSX 的語(yǔ)法就放棄繼續(xù)看下去了。真的很遺憾……
這里我還想跟大家分享一個(gè)個(gè)人經(jīng)驗(yàn)，簡(jiǎn)單說(shuō)就是保持謙虛，就像喬布斯說(shuō)的那樣：“Stay hungry，Stay foolish.”。
當(dāng)你接觸到一個(gè)新的框架、新的技術(shù)時(shí)，當(dāng)它與你已有的經(jīng)驗(yàn)產(chǎn)生沖突的時(shí)候，覺(jué)得它設(shè)計(jì)得垃圾的時(shí)候，千萬(wàn)不要著急吐槽。尤其是對(duì)一些相對(duì)還比較流行的框架或技術(shù)，更是如此。你要相信，那些框架的設(shè)計(jì)者的技術(shù)能力和工程經(jīng)驗(yàn)，遠(yuǎn)在你之上，你覺(jué)得不爽的地方，你覺(jué)得他們就真的沒(méi)有考慮到嗎？認(rèn)真去思考框架設(shè)計(jì)者在設(shè)計(jì)這套框架時(shí)候的心路歷程，認(rèn)真去學(xué)習(xí)別人在這個(gè)框架上的最佳實(shí)踐，結(jié)果往往都會(huì)出乎你的意料。
類似的，當(dāng)你發(fā)現(xiàn)框架確實(shí)在某方面的能力有所欠缺的時(shí)候，不要著急去造輪子，先去社區(qū)搜索下，你遇到的問(wèn)題，可能別人早已經(jīng)討論了很久，并有了相當(dāng)不錯(cuò)的解決方案，就算沒(méi)有，這個(gè)過(guò)程也能給你很多啟發(fā)。
切身體會(huì)，屢試不爽，望君受用，謝謝大家。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/51333.html
摘要：但是隨著程序邏輯越來(lái)越復(fù)雜，業(yè)務(wù)邏輯代碼跟代碼混到一起就變得越來(lái)越難以維護(hù)，所以就有了開(kāi)發(fā)模式。其實(shí)只是給加了點(diǎn)糖上面這種在中寫類似代碼的語(yǔ)法被稱為。你可以理解為擴(kuò)展版的。尤其是對(duì)一些相對(duì)還比較流行的框架或技術(shù)，更是如此。 這是《玩轉(zhuǎn) React》系列的第三篇，看到本篇的標(biāo)題，了解過(guò) React 的同學(xué)可能已經(jīng)大致猜到我要講什么了，本篇中要講的內(nèi)容對(duì)于剛接觸 React 的同學(xué)來(lái)說(shuō)，可...
摘要：本人計(jì)劃編寫一個(gè)針對(duì)中初級(jí)前端開(kāi)發(fā)者學(xué)習(xí)的系列教程玩轉(zhuǎn)。使用的原因是新的語(yǔ)言規(guī)范開(kāi)發(fā)效率更高代碼更優(yōu)雅，尤其是基于開(kāi)發(fā)的項(xiàng)目。其次也是目前特別流行的一個(gè)前端框架，截止目前，上有將近萬(wàn)，國(guó)內(nèi)一二線互聯(lián)網(wǎng)公司都有深度依賴開(kāi)發(fā)的項(xiàng)目。 本人計(jì)劃編寫一個(gè)針對(duì)中初級(jí)前端開(kāi)發(fā)者學(xué)習(xí) React 的系列教程 - 《玩轉(zhuǎn) React》。 文章更新頻率：每周 1 ~ 2 篇。 目錄 玩轉(zhuǎn) React（...
摘要：前端日?qǐng)?bào)精選被譽(yù)為神器的我是怎樣讓網(wǎng)站用上的性能優(yōu)化一當(dāng)遇上異步隊(duì)列實(shí)現(xiàn)及拓展技術(shù)大會(huì)震撼登陸，明星團(tuán)隊(duì)講師傾城而出中文秋招前端工程師百度阿里網(wǎng)易騰訊全面經(jīng)之自定義頭像功能實(shí)現(xiàn)掘金中支持簡(jiǎn)書發(fā)布了字符串轉(zhuǎn)數(shù)字陷阱示例眾成翻譯性 2017-09-29 前端日?qǐng)?bào) 精選 被譽(yù)為神器的requestAnimationFrame我是怎樣讓網(wǎng)站用上HTML5 ManifestReact 的性能優(yōu)化...
摘要：屬性是一個(gè)組件的外部輸入。只會(huì)在開(kāi)發(fā)模式下進(jìn)行屬性類型檢查，當(dāng)代碼進(jìn)行生產(chǎn)發(fā)布后，為了減少額外的性能開(kāi)銷，類型檢查將會(huì)被略過(guò)。某個(gè)類的實(shí)例枚舉，屬性值必須為其中的某一個(gè)值。屬性為一個(gè)數(shù)組，且數(shù)組中的元素必須符合指定類型。 在第二篇文章 《新型前端開(kāi)發(fā)方式》 中有說(shuō)到 React 有很爽的一點(diǎn)就是給我們一種創(chuàng)造 HTML 標(biāo)簽的能力，那么今天這篇文章就詳細(xì)講解下 React 是如何提供這...
摘要：屬性是一個(gè)組件的外部輸入。只會(huì)在開(kāi)發(fā)模式下進(jìn)行屬性類型檢查，當(dāng)代碼進(jìn)行生產(chǎn)發(fā)布后，為了減少額外的性能開(kāi)銷，類型檢查將會(huì)被略過(guò)。某個(gè)類的實(shí)例枚舉，屬性值必須為其中的某一個(gè)值。屬性為一個(gè)數(shù)組，且數(shù)組中的元素必須符合指定類型。 在第二篇文章 《新型前端開(kāi)發(fā)方式》 中有說(shuō)到 React 有很爽的一點(diǎn)就是給我們一種創(chuàng)造 HTML 標(biāo)簽的能力，那么今天這篇文章就詳細(xì)講解下 React 是如何提供這...
閱讀 2485·2021-11-23 10:04
閱讀 1570·2021-09-02 15:21
閱讀 948·2019-08-30 15:44
閱讀 1117·2019-08-30 10:48
閱讀 771·2019-08-29 17:21
閱讀 3632·2019-08-29 13:13
閱讀 2038·2019-08-23 17:17
閱讀 1842·2019-08-23 17:04
