React（一）react概述、組件、事件

目錄

一、React概述

1.腳本方式創(chuàng)建react初始模板

2.react的封裝

二、組件

1.函數(shù)方式定義組件

2.函數(shù)組件傳參

3.類方式定義組件

4.類組件傳參

三、事件

一、React概述

React 是一個聲明式，高效且靈活的用于構(gòu)建用戶界面的 javaScript 庫。使用 React 可以將一些簡短、獨立的代碼片段組合成復(fù)雜的 UI 界面，這些代碼片段被稱作“組件”。

詳細(xì)教程可參見官網(wǎng)：

React 官方中文文檔 – 用于構(gòu)建用戶界面的 javaScript 庫https://react.docschina.org/

React框架的書寫方式分為兩種，一種是腳本方式（JavaScript標(biāo)簽引入，練習(xí)使用）；一種是react腳手架方式（常用）。

1.腳本方式創(chuàng)建react初始模板

為了能夠正常使用react框架進(jìn)行編程，我們創(chuàng)建好自己的項目之后，需要在頁面中引入兩個CDN鏈接：react庫?和?react-dom庫；

對于這兩個遠(yuǎn)程地址也可直接在官網(wǎng)下載到本地之后直接用引入項目中；如下：

除此之外還應(yīng)注意，React 認(rèn)為渲染邏輯本質(zhì)上與其他 UI 邏輯內(nèi)在耦合，比如，在 UI 中需要綁定處理事件、在某些時刻狀態(tài)發(fā)生變化時需要通知到 UI，以及需要在 UI 中展示準(zhǔn)備好的數(shù)據(jù)。所以在React中使用的是JSX語法，但是瀏覽器不識別JSX，我們就需要引入babel（Babel 中文網(wǎng) · Babel - 下一代 JavaScript 語法的編譯器）來解析翻譯，而且需要在script寫上對應(yīng)屬性，格式如下：

//引入Babel

引入所需要的鏈接之后，就需要創(chuàng)建掛載點（其實就是一個帶有id名的div）了，專門用于插入后續(xù)生成的內(nèi)容，如下：

這樣，一個完整的react初始模板就完成了，總結(jié)起來為三步：

（1）在頁面中引入 react 庫?和?react-dom 庫；

（2）引入 Babel；

（3）創(chuàng)建掛載點。

完整代碼如下：

2.react的封裝

封裝react共有三步：

（1）創(chuàng)建虛擬DOM對象；創(chuàng)建對象包含有3個參數(shù)，標(biāo)簽名、屬性(對象格式)、標(biāo)簽內(nèi)的內(nèi)容；

（2）獲取掛載點；

（3）渲染頁面。

格式如下：

此封裝過程也可用JSX語法來寫：

可以看出，JSX語法最大區(qū)別在于省去了創(chuàng)建虛擬DON對象的步驟，而是直接創(chuàng)建一個標(biāo)簽對象，在該標(biāo)簽對象中直接按照HTML格式書寫代碼即可，其余兩步則不變。

二、組件

組件，從概念上類似于 JavaScript 函數(shù)。它接受任意的入?yún)ⅲ?“props”），并返回用于描述頁面展示內(nèi)容的 React 元素。React 定義組件有兩種方式：

函數(shù)方式，rfc react function component；某些不能使用；

類方式，rcc react class component；功能更為強大；

1.函數(shù)方式定義組件

2.函數(shù)組件傳參

3.類方式定義組件

4.類組件傳參

三、事件

React 元素的事件處理和 DOM 元素的很相似，但是有一點語法上的不同：React 事件的命名采用小駝峰式（camelCase），而不是純小寫。使用 JSX 語法時你需要傳入一個函數(shù)作為事件處理函數(shù)，而不是一個字符串。

事件綁定使用的是JS原生寫法：

事件中this的指向：嚴(yán)格模式下指向window，非嚴(yán)格模式下為undefined；

解決方式：

（1）定義普通函數(shù)，調(diào)用時 bind 替換 this 并不觸發(fā)執(zhí)行；

{this.add.bind(this)}

（2）也使用箭頭函數(shù)來定義方法，這樣正常進(jìn)行調(diào)用;

//定義 add=()=>{} //調(diào)用 {this.add}

（3）定義普通函數(shù)，調(diào)用時先調(diào)用箭頭函數(shù)，再由箭頭函數(shù)調(diào)用普通函數(shù)。

{()=>this.add}

如下：使用bind函數(shù)替換this指向、使用箭頭函數(shù)觸發(fā)

babel React

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。