《深入react技術棧》學習筆記（一）初入React世界

verano 發布于2019-08-20 14:47 / 1670人閱讀

摘要：前言以深入學習技術棧為線索，記錄下學習的重要知識內容。要傳入時，必須使用屬性表達式。如果要使用自定義屬性，要使用前綴這與標準是一致的。

前言

以《深入學習react技術棧》為線索，記錄下學習React的重要知識內容。本系列文章沒有涵蓋全部的react知識內容，只是記錄下了學習之路上的重要知識點，一方面是自己的總結，同時拿出來和在學習react的人們一塊分享，共同進步。

正文 一：react簡介

網上能搜出來一大片，想要了解的自行谷歌，我們還是直奔學習的主題。

二：JSX語法

JSX基本語法總結：

1.XML基本語法

標簽可任意嵌套

const List =()=>(

    
        <ul>
            <li></li>
            <li></li>
        </ul>
    

);

注意事項總結：
（1）定義標簽時，只允許被一個標簽包裹
（2）標簽一定要閉合

2.元素類型

兩種不同的元素：DOM元素和組件元素
注意事項（在JSX的對應原則）總結：
（1）HTML標簽首字母為小寫，組件元素首字母為大寫
（2）JSX在一個在一個組件的子元素位置使用注釋要用{}包裹起來

const App =()=>(

{/*節點注釋*/}


);

(3)DOCTYPE是沒有閉合的，我們無法渲染它。常見的做法是：構造一個保存HTML的變量，將DOCTYPE與整個HTML標簽渲染后的結果串聯起來

3.元素屬性
注意事項：
（1）在JSX中從DOM屬性到JSX中的屬性，有兩個例外的轉換:
class屬性改為className
for屬性改為htmlFor
（2）組件的屬性是完全自定義的屬性，也可以理解為實現組件所需要的參數

const Header = ()=>(
{childern}>
);
//調用：
Hello,world

(3)Boolean屬性：省略的默認的JSX設為 true。要傳入false時，必須使用屬性表達式。這常用于表單元素

等價為
//如果想設置成false,必須:

(4)展開屬性:如果你不知道要設置哪些 props,那么現在最好不要設置它。因為React不能幫你你檢查屬性類型(propTypes)。這樣即使組建的屬性類型有錯誤，也不能得到清晰地錯誤提示。

（5）自定義HTML屬性：在JSX中傳入自定義屬性，React是不會渲染的。如果要使用HTML自定義屬性，要使用data-前綴（這與HTML標準是一致的）。

然而在自定義標簽中，任意的屬性都是支持的:

4.javaScript屬性表達式
注意事項：
（1）屬性值要用表達式，使用{}替換即可

const person = ;

（2）子組件也可以用作表達式

const person =  : };

5.HTML轉義
注意事項：
（1）HTML會將所有要顯示到DOmain的字符串轉義，防止XSS
（2）React提供了dangerouslySetInnerHTML屬性避免React轉義字符

下一篇內容我們講React組件，歡迎關注。

GPU云服務器云服務器 react 學習筆記一 _React React 源碼

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

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

《深入react技術棧》學習筆記（二）初入React世界

摘要：用于規范的類型與必需的狀態。表示由組件更改的數據，通常是通過與用戶的交互來更改的。為了實現的修改，需要注冊事件處理程序到相應的元素上。當事件發生時，將更新后的值是從中檢索，并通知組件。通常情況下，該函數初始化狀態使用，，或其他數據存儲。前言上一篇文章中，我們講到了JSX的一些用法和注意事項，這次我們來講react中最基礎也是特別重要的內容：組件。這篇文章包含組件的以下內容：狀態、屬...

MRZYD 2019-08-20 14:47 評論0 收藏0
《深入react技術棧》學習筆記（三）漫談React

摘要：前言接下來讓我們進入新的章節漫談。正文一事件系統的事件系統事件系統符合標準，不存在任何兼容性問題，并且與原生的瀏覽器事件一樣有同樣的接口。所有的事件都自動綁定到最外層。組織事件冒泡的行為只適用于合成系統中，且沒辦法阻止原生事件冒泡。前言接下來讓我們進入新的章節：漫談React。本篇文章主要講React事件系統和表單操作。正文一：事件系統 1.react的事件系統react事件系...

isLishude 2019-08-21 11:38 評論0 收藏0
React學習之初入React世界

摘要：語法將語法直接加入到代碼中，再通過翻譯器裝換到純后由瀏覽器執行。事實上，并不需要花精力學習。可以說，基本語法基本被囊括了，但也有少許不同。明確的數據流動。這條原則讓組件之間的關系變得簡單且可預測。使用獲取和顯示回調。 JSX語法 JSX將HTML語法直接加入到JavaScript代碼中，再通過翻譯器裝換到純JavaScript后由瀏覽器執行。在實際開發中，JSX在產品打包階段都已經編...

cjie 2019-08-23 18:38 評論0 收藏0