国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

玩轉 React（三）- JavaScript代碼里寫HTML一樣可以很優(yōu)雅

android_c / 2145人閱讀

摘要：但是隨著程序邏輯越來越復雜，業(yè)務邏輯代碼跟代碼混到一起就變得越來越難以維護，所以就有了開發(fā)模式。其實只是給加了點糖上面這種在中寫類似代碼的語法被稱為。你可以理解為擴展版的。尤其是對一些相對還比較流行的框架或技術，更是如此。

這是《玩轉 React》系列的第三篇，看到本篇的標題，了解過 React 的同學可能已經(jīng)大致猜到我要講什么了，本篇中要講的內(nèi)容對于剛接觸 React 的同學來說，可能有些難以接受，但希望你能堅持學下去，這是 Facebook 的前端大神們?yōu)榍岸碎_發(fā)做出的革命性創(chuàng)新。

React 第一印象

廢話不多說，先看一段代碼：

class HelloMessage extends React.Component {
  render() {
    return 
Hello {this.props.name}
;
  }
}

ReactDOM.render(, mountNode);

這是從 React 官網(wǎng)首頁粘貼過來的一段示例代碼，簡單解釋一下，這段代碼實現(xiàn)了一個名為 HelloMessage 的組件，它接收一個 name 屬性，可以在頁面上展示出 Hello xxx。ReactDOM.render 是用來將某個組件渲染到頁面的某個 DOM 節(jié)點上。

在之后的文章中，我們會詳細講解如何創(chuàng)建 React 組件以及如何開發(fā)一個完整的 React 項目。現(xiàn)在，我更想跟大家探討的是，你看了上述這段代碼，算是對 React 有了第一印象，內(nèi)心是怎樣的感受？

我相信，很多人第一次看到這樣的代碼時的感受都是：“我擦，這是什么玩意兒，HTML怎么都寫到JavaScript代碼里去了，展示與業(yè)務邏輯分離，這都不懂？”，說實話，這就是我當時真實的內(nèi)心感受。很幸運我堅持了下去，并一直用到現(xiàn)在，現(xiàn)在我對 React 的感受是：“我擦，好爽，好牛逼”。

剛開始有這種想法很好理解，好多人像我一樣被“展示要與業(yè)務邏輯分離”這句話洗腦太久了，其實，這句話真正發(fā)揮價值的時候，是在 MVC 開發(fā)模式出現(xiàn)之前，那時候 web 程序邏輯很簡單，可能頁面開始處是連接數(shù)據(jù)庫，查詢數(shù)據(jù)，接在下面就是 HTML 代碼來展示查詢結果了。如果你了解一點 PHP，在 PHP 文件的開始處有個 結尾處可能有個 ?>，這就是那個年代用來分隔 PHP 代碼和 HTML 代碼的。但是隨著 web 程序邏輯越來越復雜，業(yè)務邏輯代碼跟 HTML 代碼混到一起就變得越來越難以維護，所以就有了 MVC 開發(fā)模式。

并不是說現(xiàn)在“展示要與業(yè)務邏輯分離”這句話已經(jīng)不適用于現(xiàn)在的 web開發(fā)，我想說的是，我們看問題，要回歸問題的本質，我們要不要接受 React 的這種寫法，判斷依據(jù)應該是基于 React 的這種寫法有沒有讓我們的前端代碼變得更清晰、易維護性更強，而不是 JavaScript 中是不是寫了類似于 HTML 語法的東西，千萬不要為了分離而分離。

其實只是給JavaScript加了點糖 - JSX

上面這種在 JavaScript 中寫類似 HMTL 代碼的語法被稱為 JSX。你可以理解為擴展版的 JavaScript。顯然，這種語法在瀏覽器環(huán)境中是不能執(zhí)行的，所以在代碼加載到頁面中之前，我們需要通過工具將它轉譯成標準的 JavaScript 語法，就像我們現(xiàn)在為什么可以用 ES6 的語法一樣，盡管目前瀏覽器對它支持得還不好。例如下面這兩段代碼，實際上是等價的。

JSX 語法：

const element = (
  

    Hello, world!
  

);

由上面代碼轉譯而來的標準 JavaScript 語法：

const element = React.createElement(
  "h1",
  {className: "greeting"},
  "Hello, world!"
);

是不是感覺 JSX 語法更直觀，寫起來更簡潔？所以說 JSX 實際上是 React.createElement(component, props, ...children) 的語法糖。

如果你熟悉 HTML，那么 JSX 對于你來說是沒有任何壓力的，因為 HTML 中的所有標簽，在 JSX 中都是支持的，基本上沒有學習成本，只有如下幾點略微的不同：

class 屬性變?yōu)?className

tabindex 屬性變?yōu)?tabIndex

for 屬性變?yōu)?htmlFor

textarea 的值通過需要通過 value 屬性來指定

style 屬性的值接收一個對象，css 的屬性變?yōu)轳劮鍖懛ǎ纾篵ackgroundColor。

在上一篇中，我們有提到組件，實際上，我們可以把在 JSX 中寫的 HTML 標簽看作是 React 內(nèi)部已經(jīng)實現(xiàn)了的基礎組件。在下一篇中我將詳細為大家介紹如何利用這些基礎組件來創(chuàng)造一個新的組件，也就是上一篇提到的 React 所提供的創(chuàng)建一個新的 HTML 標簽的能力。

寫在最后

這篇文章的主要目的是希望大家對 JSX 有個基本的印象，我了解到有很多同學就是因為看了一眼 JSX 的語法就放棄繼續(xù)看下去了。真的很遺憾……

這里我還想跟大家分享一個個人經(jīng)驗，簡單說就是保持謙虛，就像喬布斯說的那樣：“Stay hungry，Stay foolish.”。

當你接觸到一個新的框架、新的技術時，當它與你已有的經(jīng)驗產(chǎn)生沖突的時候，覺得它設計得垃圾的時候，千萬不要著急吐槽。尤其是對一些相對還比較流行的框架或技術，更是如此。你要相信，那些框架的設計者的技術能力和工程經(jīng)驗，遠在你之上，你覺得不爽的地方，你覺得他們就真的沒有考慮到嗎？認真去思考框架設計者在設計這套框架時候的心路歷程，認真去學習別人在這個框架上的最佳實踐，結果往往都會出乎你的意料。

類似的，當你發(fā)現(xiàn)框架確實在某方面的能力有所欠缺的時候，不要著急去造輪子，先去社區(qū)搜索下，你遇到的問題，可能別人早已經(jīng)討論了很久，并有了相當不錯的解決方案，就算沒有，這個過程也能給你很多啟發(fā)。

切身體會，屢試不爽，望君受用，謝謝大家。

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51333.html

相關文章

  • 玩轉 React（三）- JavaScript代碼里寫HTML一樣可以很優(yōu)雅

    摘要：但是隨著程序邏輯越來越復雜，業(yè)務邏輯代碼跟代碼混到一起就變得越來越難以維護，所以就有了開發(fā)模式。其實只是給加了點糖上面這種在中寫類似代碼的語法被稱為。你可以理解為擴展版的。尤其是對一些相對還比較流行的框架或技術，更是如此。 這是《玩轉 React》系列的第三篇，看到本篇的標題，了解過 React 的同學可能已經(jīng)大致猜到我要講什么了，本篇中要講的內(nèi)容對于剛接觸 React 的同學來說，可...

    elarity 評論0 收藏0

  • 玩轉 React（一）- 前言

    摘要：本人計劃編寫一個針對中初級前端開發(fā)者學習的系列教程玩轉。使用的原因是新的語言規(guī)范開發(fā)效率更高代碼更優(yōu)雅，尤其是基于開發(fā)的項目。其次也是目前特別流行的一個前端框架，截止目前，上有將近萬，國內(nèi)一二線互聯(lián)網(wǎng)公司都有深度依賴開發(fā)的項目。 本人計劃編寫一個針對中初級前端開發(fā)者學習 React 的系列教程 - 《玩轉 React》。 文章更新頻率：每周 1 ~ 2 篇。 目錄 玩轉 React（...

    waltr 評論0 收藏0

  • 2017-09-29 前端日報

    摘要：前端日報精選被譽為神器的我是怎樣讓網(wǎng)站用上的性能優(yōu)化一當遇上異步隊列實現(xiàn)及拓展技術大會震撼登陸，明星團隊講師傾城而出中文秋招前端工程師百度阿里網(wǎng)易騰訊全面經(jīng)之自定義頭像功能實現(xiàn)掘金中支持簡書發(fā)布了字符串轉數(shù)字陷阱示例眾成翻譯性 2017-09-29 前端日報 精選 被譽為神器的requestAnimationFrame我是怎樣讓網(wǎng)站用上HTML5 ManifestReact 的性能優(yōu)化...

    coordinate35 評論0 收藏0

  • 玩轉 React（四）- 創(chuàng)造一個新的 HTML 標簽

    摘要：屬性是一個組件的外部輸入。只會在開發(fā)模式下進行屬性類型檢查，當代碼進行生產(chǎn)發(fā)布后，為了減少額外的性能開銷，類型檢查將會被略過。某個類的實例枚舉，屬性值必須為其中的某一個值。屬性為一個數(shù)組，且數(shù)組中的元素必須符合指定類型。 在第二篇文章 《新型前端開發(fā)方式》 中有說到 React 有很爽的一點就是給我們一種創(chuàng)造 HTML 標簽的能力，那么今天這篇文章就詳細講解下 React 是如何提供這...

    soasme 評論0 收藏0

  • 玩轉 React（四）- 創(chuàng)造一個新的 HTML 標簽

    摘要：屬性是一個組件的外部輸入。只會在開發(fā)模式下進行屬性類型檢查，當代碼進行生產(chǎn)發(fā)布后，為了減少額外的性能開銷，類型檢查將會被略過。某個類的實例枚舉，屬性值必須為其中的某一個值。屬性為一個數(shù)組，且數(shù)組中的元素必須符合指定類型。 在第二篇文章 《新型前端開發(fā)方式》 中有說到 React 有很爽的一點就是給我們一種創(chuàng)造 HTML 標簽的能力，那么今天這篇文章就詳細講解下 React 是如何提供這...

    dendoink 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<