非dom屬性？
dangerouslySetInnerHTML,ref,key
非dom標(biāo)準(zhǔn)屬性，也就是說dom標(biāo)準(zhǔn)裡面沒有規(guī)定的屬性，react引入了三個(gè)非dom屬性，如上。
dangerouslySetInnerHTML：字面意思，危險(xiǎn)的設(shè)定內(nèi)部html，這個(gè)屬性的作用就是在jsx中，直接插入html程式碼。我們?yōu)槭颤N要用這個(gè)屬性插入html程式碼呢？而不是在寫程式碼的時(shí)候直接寫入呢？因?yàn)橛械臅r(shí)候我們?cè)趯懗淌酱a的時(shí)候，無法確實(shí)要插入什麼程式碼，也就是說這部分html程式碼是動(dòng)態(tài)產(chǎn)生的?；蛘哒f不是由我們來寫的，為什麼這中行為是危險(xiǎn)的呢?有一個(gè)詞語叫做跨站攻擊，之所以會(huì)產(chǎn)生跨站攻擊，就是因?yàn)橛羞@樣的直接寫入代碼功能，我們舉個(gè)例子，如果頁(yè)面上要顯示一個(gè)內(nèi)容，這個(gè)內(nèi)容來自於使用者的輸入，假設(shè)使用者的輸入包含了程式碼，比如說js程式碼，html程式碼，如果我們不經(jīng)過偵測(cè)就直接使用，把這個(gè)dom插入到頁(yè)面中，那麼其他人訪問頁(yè)面的時(shí)候，就會(huì)執(zhí)行這個(gè)人寫入的代碼，由於我們無法判斷這個(gè)用戶的意圖，所以他有可能寫入很危險(xiǎn)的代碼，比如說添加一個(gè)連接，連接到一個(gè)木馬，那麼造訪這個(gè)頁(yè)面的用戶，就會(huì)在不知不覺中中病毒或下載木馬，這是非常危險(xiǎn)的，但是有些時(shí)候我們確實(shí)需要?jiǎng)討B(tài)的寫入程式碼，所以react還是提供了這個(gè)屬性，只是明確的在名字裡面告訴你這個(gè)屬性是很危險(xiǎn)的，盡量不要去使用。
ref:reference的縮寫，父組件引用子組件，我們?cè)诰帉懡M件的時(shí)候，經(jīng)常會(huì)用到嵌套的情況，父組件如果嵌套了子組件，父組件引用子組件的時(shí)候，就需要用ref,在實(shí)際的使用中ref其實(shí)是在父組件中維護(hù)了很多引用，每一個(gè)引用都引用到了一個(gè)對(duì)應(yīng)的子組件，這樣我們?cè)诟附M件中就可以通過這些引用來操作子組件。為什麼我們不能操作父元件的父元件呢？這個(gè)其實(shí)不是程式碼問題，而是設(shè)計(jì)問題，在react中我們使用元件的目的就是讓程式碼模組化，每個(gè)元件只需要考慮自己自身的功能，邏輯，不需要在乎誰在使用它，因此元件不需要引用他本身的父元件，父元件和元件之間的互動(dòng)透過屬性的傳遞來實(shí)現(xiàn)的，我們後面會(huì)說。但是這樣的傳遞是單向的，也就是說，屬性總是由上往下傳遞，下面的元件不會(huì)對(duì)上面的元件進(jìn)行控制，這是為了讓邏輯更加清晰，
key:提高渲染效能。 react特點(diǎn)之一就是效能好，這是因?yàn)樗コ耸謩?dòng)的dom操作，完全由自動(dòng)來實(shí)現(xiàn)，但是自動(dòng)實(shí)現(xiàn)就說明他有一套演算法，也就說在頁(yè)面發(fā)生變化的時(shí)候，react需要應(yīng)用這套演算法來判斷如何有效率的修改頁(yè)面，以反映出對(duì)應(yīng)的變化，這個(gè)演算法通常被稱為diff，也就是different的縮寫，表示計(jì)算兩個(gè)狀態(tài)之間的差異。
react diff演算法
?? react diff演算法的流程圖
? ?首先需要明確我們現(xiàn)在進(jìn)行比較的是兩個(gè)元件，react中所有的東西都是元件，所以我們只要明白了兩個(gè)元件之間是如何比較的，其他的結(jié)構(gòu)都可以分解成組件進(jìn)行比較。
最左邊是開始，開始以後第一個(gè)判斷就是節(jié)點(diǎn)是否相同，相同的意思是div和div是相同的，div和p就是不同的，或者說我們自訂的HelloMessage和HelloMessage是相同的，HellowMessage和HelloWorld就不是相同的元件，節(jié)點(diǎn)如果相同才會(huì)進(jìn)行後面的比較，如果節(jié)點(diǎn)不同，react會(huì)直接拋棄舊的節(jié)點(diǎn)，產(chǎn)生一個(gè)全新的節(jié)點(diǎn)，在這裡react是基於一個(gè)假設(shè)，如果兩個(gè)節(jié)點(diǎn)不同，那麼他們的內(nèi)容很大程度不同。如果節(jié)點(diǎn)不同我們就直接結(jié)束比較，產(chǎn)生全新的節(jié)點(diǎn)，如果節(jié)點(diǎn)相同，下一步需要判斷的是，這個(gè)幾點(diǎn)是自訂的節(jié)點(diǎn)還是dom的標(biāo)準(zhǔn)節(jié)點(diǎn)，也就是說，他是div還是HelloWorld，如果說不是自訂的節(jié)點(diǎn)，是標(biāo)準(zhǔn)的節(jié)點(diǎn)，那麼react下一步要做的就是比較兩個(gè)節(jié)點(diǎn)的屬性，比如說class，id等，如果屬性完全相同，就表示兩個(gè)節(jié)點(diǎn)是相同的，結(jié)束比較；如果屬性不同，就把不同的屬性記下來，並且應(yīng)用改動(dòng)，比如說多了一個(gè)新屬性，就加入一個(gè)新屬性，少了一個(gè)屬性就刪掉一個(gè)屬性，類似這樣的操作。也就是react並不會(huì)刪掉舊的節(jié)點(diǎn)，只會(huì)在他上面操作。若果是自訂的節(jié)點(diǎn)，react會(huì)重新渲染他，我們後面會(huì)學(xué)習(xí)屬性和狀態(tài)，一個(gè)元件有很多狀態(tài)，如果是同一個(gè)自訂元件，那麼新元件可能只是舊元件的一個(gè)狀態(tài)，所說reac會(huì)把新的狀態(tài)傳入到舊的元件中，然後比較元件的渲染結(jié)果，並進(jìn)行改動(dòng)，也就是說react仍然不會(huì)重新產(chǎn)生元件，而是在舊的元件上進(jìn)行改動(dòng)，這就是diff演算法的整個(gè)流程。那麼key到底有什麼用呢？ key作用主要體現(xiàn)在節(jié)點(diǎn)的比較，假設(shè)我們有一個(gè)類似列表的節(jié)點(diǎn)，也就是父節(jié)點(diǎn)裡面有多個(gè)子節(jié)點(diǎn)，那麼如果沒有key的時(shí)候，我們進(jìn)行改動(dòng)，react會(huì)比較傻的從左到右進(jìn)行比較，比如說在改動(dòng)之前只有節(jié)點(diǎn)1，在改動(dòng)之後我們插入一個(gè)節(jié)點(diǎn)2，變成了節(jié)點(diǎn)2，節(jié)點(diǎn)1，那麼react執(zhí)行的操作是，刪除節(jié)點(diǎn)1，添加節(jié)點(diǎn)2，添加節(jié)點(diǎn)1，也就是說，react無法判斷新狀態(tài)中的節(jié)點(diǎn)1是不是就狀態(tài)中的節(jié)點(diǎn)1，所以他只能把不同的全部刪掉，即使他們可能相同，這樣就導(dǎo)致性能上的問題，那麼引入key的目的就是給每個(gè)節(jié)點(diǎn)加上唯一的標(biāo)識(shí)，這樣的話react透過比較key，就可以知道到底哪些節(jié)點(diǎn)是原有節(jié)點(diǎn)，哪些節(jié)點(diǎn)是新加入的節(jié)點(diǎn)，針對(duì)我們剛才說的例子， 節(jié)點(diǎn)1變成了節(jié)點(diǎn)2節(jié)點(diǎn)1，這時(shí)候，react只需要做一個(gè)操作，就是插入節(jié)點(diǎn)2，因?yàn)楣?jié)點(diǎn)1的key是一樣的，說明他們兩個(gè)是同一個(gè)節(jié)點(diǎn)，沒有變化。
? ? 了解這個(gè)原理，對(duì)於我們寫react元件有什麼啟示呢？
? ? 第一點(diǎn)就是如果兩個(gè)組件非常類似，那就盡量把他們寫成一個(gè)組件，因?yàn)槲覀冊(cè)诹鞒讨锌吹剑瑑蓚€(gè)不相同的組件一定會(huì)被重新生成，即使他們的內(nèi)容非常的相似，。第二個(gè)啟示就是如果使用類似的列表來展示元素的話，那麼元素盡量加上key，這樣可以大大提高效率，避免不必要的效能損耗。
如何使用非dom屬性？
dangerously的實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
var style={
color:"red",
border:"1px solid #f09",
};
var rawHTML={
__html:"<h1>I am inner HTML</h1>"
};
var HelloWorld=React.createClass({
render: function(){
return <p>Hello,world</p>
}
});
React.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>,document.body);
</script>
</body>
</html>ref實(shí)例，要注意透過引用拿到的並不是這個(gè)dom節(jié)點(diǎn)本身，也就說我們並不能進(jìn)行dom之間的操作，比如說設(shè)定文本，這樣是不行的，我們拿到的只是一個(gè)虛擬的dom節(jié)點(diǎn)，也就是react展示給我們的dom節(jié)點(diǎn)，如果想要拿到真正的dom節(jié)點(diǎn)，還需要呼叫一個(gè)方法，後面我們會(huì)說，不過react並不會(huì)鼓勵(lì)我們這樣做，除非在特殊的情況下，我們需要操作dom節(jié)點(diǎn)，其他情況react會(huì)幫助我我們進(jìn)行操作，
這個(gè)例子不全，後面我們會(huì)繼續(xù)講解。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
var style={
color:"red",
border:"1px solid #f09",
};
var rawHTML={
__html:"<h1>I am inner HTML</h1>"
};
var HelloWorld=React.createClass({
render: function(){
this.refs.childp
return <p ref="childp">Hello,world</p>
}
});
React.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>,document.body);
</script>
</body>
</html>key實(shí)例：注意在每個(gè)組件的內(nèi)部，key的值必須是不同的，注意是組件內(nèi)部！兩個(gè)組件之間就沒有這個(gè)限制了。
記住兩點(diǎn)：1，內(nèi)容類似的元件盡量合併稱為同一個(gè)元件，2列表類型的元素，一定要加上唯一的key，做到這兩點(diǎn)，就能避免很多效能問題。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
<script type="text/jsx">
var style={
color:"red",
border:"1px solid #f09",
};
var rawHTML={
__html:"<h1>I am inner HTML</h1>"
};
var HelloWorld=React.createClass({
render: function(){
return
<ul>
<li key="1">1</li>
<li key="2">2</li>
<li key="3">3</li>
</ul>
}
});
React.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>,document.body);
</script>
</body>
</html>
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門話題
React Router使用指南：如何實(shí)現(xiàn)前端路由控制
Sep 29, 2023 pm 05:45 PM
ReactRouter使用指南：如何實(shí)現(xiàn)前端路由控制隨著單頁(yè)應(yīng)用的流行，前端路由成為了一個(gè)不可忽視的重要部分。 ReactRouter作為React生態(tài)系統(tǒng)中最受歡迎的路由庫(kù)，提供了豐富的功能和易用的API，使得前端路由的實(shí)作變得非常簡(jiǎn)單和靈活。本文將介紹ReactRouter的使用方法，並提供一些具體的程式碼範(fàn)例。安裝ReactRouter首先，我們需要
Java框架與前端React框架的整合
Jun 01, 2024 pm 03:16 PM
Java框架與React框架的整合：步驟：設(shè)定後端Java框架。建立專案結(jié)構(gòu)。配置建置工具。建立React應(yīng)用程式。編寫RESTAPI端點(diǎn)。配置通訊機(jī)制。實(shí)戰(zhàn)案例（SpringBoot+React）：Java程式碼：定義RESTfulAPI控制器。 React程式碼：取得並顯示API回傳的資料。
PHP、Vue和React：如何選擇最適合的前端框架？
Mar 15, 2024 pm 05:48 PM
PHP、Vue和React：如何選擇最適合的前端框架？隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，前端框架在Web開發(fā)中起著至關(guān)重要的作用。 PHP、Vue和React作為三種代表性的前端框架，每一種都具有其獨(dú)特的特徵和優(yōu)勢(shì)。在選擇使用哪種前端框架時(shí)，開發(fā)人員需要根據(jù)專案需求、團(tuán)隊(duì)技能和個(gè)人偏好做出明智的決策。本文將透過比較PHP、Vue和React這三種前端框架的特徵和使
vue.js vs.反應(yīng)：特定於項(xiàng)目的考慮因素
Apr 09, 2025 am 12:01 AM
Vue.js適合中小型項(xiàng)目和快速迭代，React適用於大型複雜應(yīng)用。 1)Vue.js易於上手，適用於團(tuán)隊(duì)經(jīng)驗(yàn)不足或項(xiàng)目規(guī)模較小的情況。 2)React的生態(tài)系統(tǒng)更豐富，適合有高性能需求和復(fù)雜功能需求的項(xiàng)目。
React與Vue：Netflix使用哪個(gè)框架？
Apr 14, 2025 am 12:19 AM
NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVuedIrectly.1）TeamSperience：selectBasedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects：reactforforforproproject，reactforforforcompleplexones.3）cocatizationneedneeds：reactoffipicatizationneedneedneedneedneedneeds：reactoffersizationneedneedneedneedneeds：reactoffersizatization needefersmoreflexibleise.4）
React在HTML中的作用：增強(qiáng)用戶體驗(yàn)
Apr 09, 2025 am 12:11 AM
React通過JSX與HTML結(jié)合，提升用戶體驗(yàn)。 1)JSX嵌入HTML，使開發(fā)更直觀。 2)虛擬DOM機(jī)制優(yōu)化性能，減少DOM操作。 3)組件化管理UI，提高可維護(hù)性。 4)狀態(tài)管理和事件處理增強(qiáng)交互性。
React的生態(tài)系統(tǒng)：庫(kù)，工具和最佳實(shí)踐
Apr 18, 2025 am 12:23 AM
React生態(tài)系統(tǒng)包括狀態(tài)管理庫(kù)（如Redux）、路由庫(kù)（如ReactRouter）、UI組件庫(kù)（如Material-UI）、測(cè)試工具（如Jest）和構(gòu)建工具（如Webpack）。這些工具協(xié)同工作，幫助開發(fā)者高效開發(fā)和維護(hù)應(yīng)用，提高代碼質(zhì)量和開發(fā)效率。
Netflix的前端：React（或VUE）的示例和應(yīng)用
Apr 16, 2025 am 12:08 AM
Netflix使用React作為其前端框架。 1)React的組件化開發(fā)模式和強(qiáng)大生態(tài)系統(tǒng)是Netflix選擇它的主要原因。 2)通過組件化，Netflix將復(fù)雜界面拆分成可管理的小塊，如視頻播放器、推薦列表和用戶評(píng)論。 3)React的虛擬DOM和組件生命週期優(yōu)化了渲染效率和用戶交互管理。
