前言

  • 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開(kāi)發(fā)基礎(chǔ),沒(méi)有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí)

  • 本人接觸 React Native 時(shí)間并不是特別長(zhǎng),所以對(duì)其中的內(nèi)容和性質(zhì)了解可能會(huì)有所偏差,在學(xué)習(xí)中如果有錯(cuò)會(huì)及時(shí)修改內(nèi)容,也歡迎萬(wàn)能的朋友們批評(píng)指出,謝謝

  • 文章第一版出自簡(jiǎn)書,如果出現(xiàn)圖片或頁(yè)面顯示問(wèn)題,煩請(qǐng)轉(zhuǎn)至 簡(jiǎn)書 查看 也希望喜歡的朋友可以點(diǎn)贊,謝謝

JSX 和 組件 的概念


  • React的核心機(jī)制之一就是虛擬DOM(可以在內(nèi)存中創(chuàng)建的虛擬DOM元素)React利用虛擬DOM來(lái)減少對(duì)實(shí)際DOM的操作從而提升性能。傳統(tǒng)的創(chuàng)建方式如下:

        var newBox = document.createElement('div');
        newBox.className = 'box';
        $('main').appendChild(newBox);
  • 上面的代碼在可讀性方面比較不好,所以 React 開(kāi)發(fā)了 JSX,利用我們熟悉的 HTML 語(yǔ)法來(lái)創(chuàng)建虛擬 DOM,創(chuàng)建方式如下:

        <div className="box">
        </div>
  • 在實(shí)際開(kāi)發(fā)中,JSX在產(chǎn)品打包階段已經(jīng)編譯成純 JavaScript, JSX的語(yǔ)法不會(huì)帶來(lái)任何性能影響。所以,JSX可以看成是比較高級(jí)但依然直觀的語(yǔ)法糖

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運(yùn),軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動(dòng)軟件開(kāi)發(fā)培訓(xùn),網(wǎng)站設(shè)計(jì)培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式