4.6 父子視窗傳參
阿新 • • 發佈:2021-09-15
React(用於構建使用者介面的JavaScript庫)
React
是一個將資料渲染為HTML檢視的開源JavaScript庫。
React 的特點:
- 採用元件化開發模式,使用宣告式程式設計,而不是命令式程式設計,提高了開發效率以及元件的複用率。
- 在
React Native
中可以使用React
進行移動端Android
和ios
應用的開發。 - 使用虛擬DOM+
diffing
演算法,儘量減少與真實DOM的互動。
與Vue相比的區別:
兩者都是做元件化的,整體的功能都類似,但是它們的設計思路是有很多的不同的,使用React和Vue主要是理解它們設計思路的不同。
起步:
<!-- 引入react核心庫 --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- 引入react-dom用於支援react操作dom --> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- 引入Babel,用於JSX轉換成js --> <!-- 在書寫JSX語法時,Babel的作用體現的格外重要,因為瀏覽器無法識別JSX的語法程式碼,所以需要通過Babel進行轉換成瀏覽器可識別的JS --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <!-- 在使用JSX方式建立虛擬DOM時,必須加上type="text/babel" --> <script type="text/babel"></script>
虛擬DOM
-
虛擬DOM的本質就是
Object
型別的一般物件。 -
虛擬DOM比較
輕
,真實DOM比較重
,虛擬DOM是React內部使用的DOM。 -
建立虛擬DOM用
React.createElement( 標籤名,標籤屬性,標籤的內容 )
方法- 引數:
- 標籤名。
- 標籤屬性。
- 標籤內容。
-
渲染虛擬DOM用
React.render( jsx模板,容器(掛載點),callback() )
方法- 引數:
- jsx模板。
- 容器(掛載點)。
- callback() 回撥函式:當內容放到頁面後觸發的回撥函式。
JSX(JavaScript + XML)
XML是早期時一種用於儲存和傳輸資料的檔案格式 如今被JSON
代替
<student>
<name>Tom</name>
<age>19</age>
</student>
"{
"name": "tom",
"age": "18"
}"
建立虛擬DOM的兩種方式
-
JSX
// const VDOM = <h1>hello react</h1> // 在h1標籤裡面巢狀span標籤 const VDOM = ( <h1 id="title"> <span class="dom">hello react</span> </h1> ) ReactDOM.render(VDOM, document.getElementById('app')) // -----------分割線---------------- // babel將JSX語法轉換成瀏覽器可識別的JS const VDOM = ( <h1 id="title"> <span class="dom">hello react</span> </h1> ) // 等價於 const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', { className : 'dom' }, 'hello world'))
-
JavaScript
採用JavaScript方式建立虛擬DOM時不需要用到Babel轉換,因為未使用到JSX語法。
// JavaScript的方式 // const VDOM = React.createElement('h1', {id : 'title'}, 'hello world') // 在h1標籤裡面巢狀span標籤 const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', { className : 'dom' }, 'hello world')) ReactDOM.render(VDOM, document.getElementById('app'))
JSX語法規則
- 定義虛擬DOM時不加雙引號。
- 樣式的類名指定不要用
class
,而是用className
。 - 內聯樣式,需要用花括號鍵值表達的形式去寫,在遇到雙單詞的屬性需要使用駝峰命名法。
- 標籤中混入
JS表示式
時,需要使用花括號。 - 只有一個根標籤。
- 標籤必須閉合
- 標籤首字母
- 若是小寫字母開頭,則將標籤轉為HTML的同名元素,若HTML中無同名元素,則報錯。
- 若是大寫字母開頭,則將標籤轉化為虛擬DOM元件,React就去渲染對應的元件,若元件未定義,則報錯。
.wrap {
background-color: orange;
}
#title {
color: #fff;
}
const myId = 'title'
const myClass = 'wrap'
const VDOM = ( // 定義虛擬DOM時不加雙引號。
// 樣式的類名指定不要用class,而是用className
<div className={myClass}> // 標籤中混入JS表示式時,需要使用花括號。
<h1 id={myId}>
// 內聯樣式,需要用花括號鍵值表達的形式去寫,在遇到雙單詞的屬性需要使用駝峰命名法。
<span style={{ color: 'red', fontSize: '39px'}}>hello react</span>
</h1>
<h1 id={myId}>
<span>hello react</span>
</h1>
</div>
// 只有一個根標籤。
)
ReactDOM.render(VDOM, document.getElementById('app'))
React面向元件程式設計
-
函式式元件
需要注意的地方是:
- 建立函式式元件時,render函式的第一個引數JSX模板 不再是變數名,而是加上函式式元件名,因為是react呼叫了該函式拿到返回的值,值得注意的是元件首字母需要大寫。
- 函式式元件內部的this的指向不再是window,而是undefined,這是因為函式式元件的JSX模板經過Babel的轉換,而Babel內部採用了嚴格模式進行編譯,嚴格模式下不允許函式內部的this指向window。
const arr = ['angular', 'react', 'vue'] const myClass = 'title' // 建立函式式元件 function VDOM() { console.log(this) return ( <div className={myClass}> <h1>大家好,我是函式式元件</h1> </div> ) } // 把元件渲染到頁面上 ReactDOM.render(<VDOM />, document.getElementById('app'))
-
類式元件