資訊專(zhuān)欄INFORMATION COLUMN
摘要：語(yǔ)法將語(yǔ)法直接加入到代碼中，再通過(guò)翻譯器裝換到純后由瀏覽器執(zhí)行。事實(shí)上，并不需要花精力學(xué)習(xí)?？梢哉f(shuō)，基本語(yǔ)法基本被囊括了，但也有少許不同。明確的數(shù)據(jù)流動(dòng)。這條原則讓組件之間的關(guān)系變得簡(jiǎn)單且可預(yù)測(cè)。使用獲取和顯示回調(diào)。
JSX語(yǔ)法
JSX將HTML語(yǔ)法直接加入到JavaScript代碼中，再通過(guò)翻譯器裝換到純JavaScript后由瀏覽器執(zhí)行。在實(shí)際開(kāi)發(fā)中，JSX在產(chǎn)品打包階段都已經(jīng)編譯成純JavaScript，不會(huì)帶來(lái)任何副作用，反而會(huì)讓代碼更加直觀并易于維護(hù)。
事實(shí)上，JSX并不需要花精力學(xué)習(xí)。只要熟悉HTML標(biāo)簽，大多數(shù)功能就都可以直接使用了。
JSX語(yǔ)法完美地利用了JavaScript自帶的語(yǔ)法和特性，并使用大家熟悉的HTML語(yǔ)法來(lái)創(chuàng)建虛擬元素。可以說(shuō)，JSX基本語(yǔ)法基本被XML囊括了，但也有少許不同。
React組件
基本的封裝性。
簡(jiǎn)單的生命周期呈現(xiàn)。
明確的數(shù)據(jù)流動(dòng)。
React組件的構(gòu)建方法
React.createClass
ES6 classes
無(wú)狀態(tài)函數(shù)
React數(shù)據(jù)流
在React中，數(shù)據(jù)是自頂向下單向流動(dòng)的，即從父組件到子組件。這條原則讓組件之間的關(guān)系變得簡(jiǎn)單且可預(yù)測(cè)。state與props是React組件中最重要的概念。如果頂層組件初始化props，那么React會(huì)向下遍歷整顆組件樹(shù)，重新嘗試渲染所有相關(guān)的子組件。而state只關(guān)心每個(gè)組件自己內(nèi)部的狀態(tài)，這些狀態(tài)只能在組件內(nèi)改變。把組件看成一個(gè)函數(shù)，那么它接受了props作為參數(shù)，內(nèi)部由state作為函數(shù)的內(nèi)部參數(shù)，返回一個(gè)Virtual DOM的實(shí)現(xiàn)。
React生命周期
組件的掛載與卸載：componentWillMount方法會(huì)在render方法之前執(zhí)行，而componentDidMount方法會(huì)在render方法之后執(zhí)行，分別代表了渲染前后的時(shí)刻。還有componentWillUnmount代表組件卸載前的狀態(tài)，在這個(gè)方法中，我們常常會(huì)執(zhí)行一些清理方法，如事件回收或是清除定時(shí)器。
更新過(guò)程是指父組件向下傳遞props或組件自身執(zhí)行setState方法時(shí)發(fā)生的一系列更新動(dòng)作。shouldComponentUpdate是一個(gè)特別的方法，它接受需要更新的props和state，讓開(kāi)發(fā)者增加必要的條件判斷，讓其在需要時(shí)更新，不需要時(shí)不更新。因此，當(dāng)方法返回false的時(shí)候，組件不再向下執(zhí)行生命周期方法。componentWillUpdate和componentDidUpdate這兩個(gè)生命周期方法很容易理解，對(duì)應(yīng)的初始化方法也很容易知道，他們代表在更新過(guò)程中渲染前后的時(shí)刻。
getDerivedStateFromProps(props, state)
在 render() 之前觸發(fā)，不管是什么原因觸發(fā) render() 方法的,此方法應(yīng)返回一個(gè)對(duì)象，用于更新 State, 或返回 null 不更新。
getSnapshotBeforeUpdate(prevProps, prevState)
在 Dom 改變之前獲得一些最新的信息,此方法的一切返回值都將被傳遞給 componentDidUpdate 方法中的 snapshot 參數(shù)。
componentDidCatch(err, info)
catch js 錯(cuò)誤，log 這些 errors，顯示一個(gè)回調(diào)的 UI。
獲取錯(cuò)誤的時(shí)機(jī)：during rendering，生命周期函數(shù)和子組件的 constructor 函數(shù)。
使用 setState() 獲取 unhandled JS errors 和 顯示回調(diào) UI。
ReactDOM
findDOMNode:React提供的獲取DOM元素的方法有兩種，其中一種就是ReactDOM提供的findDOMNode，當(dāng)組件被渲染到DOM中，findDOMNode返回該React組件實(shí)例相應(yīng)的DOM節(jié)點(diǎn)。
為什么說(shuō)只有在頂層組件我們才不得不使用ReactDOM呢？這是因?yàn)橐裄eact渲染的Virtual DOM渲染到瀏覽器的DOM當(dāng)中，就要使用render方法了，該方法把元素掛載到container中，并且返回element的實(shí)例。
refs
在組件內(nèi)，JSX是不會(huì)返回一個(gè)組件的實(shí)例的，它只是一個(gè)ReactElement，只是告訴React被掛載的組件應(yīng)該長(zhǎng)什么樣。refs就是為此而生的，它是React組件中非常特殊的prop，可以附加到任何一個(gè)組件上。從字面意思來(lái)看，refs即reference，組件被調(diào)用時(shí)會(huì)新建一個(gè)該組件的實(shí)例，而refs就會(huì)指向這個(gè)實(shí)例，它可以是一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在組件被掛載后立即執(zhí)行。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105572.html
摘要：學(xué)習(xí)之道簡(jiǎn)體中文版通往實(shí)戰(zhàn)大師之旅掌握最簡(jiǎn)單，且最實(shí)用的教程。前言學(xué)習(xí)之道這本書(shū)使用路線圖中的精華部分用于傳授，并將其融入一個(gè)獨(dú)具吸引力的真實(shí)世界的具體代碼實(shí)現(xiàn)。完美展現(xiàn)了的優(yōu)雅。膜拜的學(xué)習(xí)之道是必讀的一本書(shū)。 《React 學(xué)習(xí)之道》The Road to learn React (簡(jiǎn)體中文版) 通往 React 實(shí)戰(zhàn)大師之旅：掌握 React 最簡(jiǎn)單，且最實(shí)用的教程。 showIm...
摘要：是用戶建立客戶端應(yīng)用的前端架構(gòu)，它通過(guò)利用一個(gè)單向的數(shù)據(jù)流補(bǔ)充了的組合視圖組件，這更是一種模式而非正式框架，你能夠無(wú)需許多新代碼情況下立即開(kāi)始使用。結(jié)構(gòu)和數(shù)據(jù)流一個(gè)單向數(shù)據(jù)流是模式的核心。 Flux是Facebook用戶建立客戶端Web應(yīng)用的前端架構(gòu)，它通過(guò)利用一個(gè)單向的數(shù)據(jù)流補(bǔ)充了React的組合視圖組件，這更是一種模式而非正式框架，你能夠無(wú)需許多新代碼情況下立即開(kāi)始使用Flux。 ...
摘要：前言以深入學(xué)習(xí)技術(shù)棧為線索，記錄下學(xué)習(xí)的重要知識(shí)內(nèi)容。要傳入時(shí)，必須使用屬性表達(dá)式。如果要使用自定義屬性，要使用前綴這與標(biāo)準(zhǔn)是一致的。 前言 以《深入學(xué)習(xí)react技術(shù)?！窞榫€索，記錄下學(xué)習(xí)React的重要知識(shí)內(nèi)容。本系列文章沒(méi)有涵蓋全部的react知識(shí)內(nèi)容，只是記錄下了學(xué)習(xí)之路上的重要知識(shí)點(diǎn)，一方面是自己的總結(jié)，同時(shí)拿出來(lái)和在學(xué)習(xí)react的人們一塊分享，共同進(jìn)步。 正文 一：rea...
摘要：用于規(guī)范的類(lèi)型與必需的狀態(tài)。表示由組件更改的數(shù)據(jù)，通常是通過(guò)與用戶的交互來(lái)更改的。為了實(shí)現(xiàn)的修改，需要注冊(cè)事件處理程序到相應(yīng)的元素上。當(dāng)事件發(fā)生時(shí)，將更新后的值是從中檢索，并通知組件。通常情況下，該函數(shù)初始化狀態(tài)使用，，或其他數(shù)據(jù)存儲(chǔ)。 前言 上一篇文章中，我們講到了JSX的一些用法和注意事項(xiàng)，這次我們來(lái)講react中最基礎(chǔ)也是特別重要的內(nèi)容：組件。這篇文章包含組件的以下內(nèi)容：狀態(tài)、屬...
摘要：根據(jù)的類(lèi)型不同，分別實(shí)例化類(lèi)。并且處理特殊屬性，比如事件綁定。之后根據(jù)差異對(duì)象操作元素位置變動(dòng)，刪除，添加等。各個(gè)組件獨(dú)立管理層層嵌套，互不影響，內(nèi)部實(shí)現(xiàn)的渲染功能。根據(jù)基本元素的值，判斷是否遞歸更新子節(jié)點(diǎn)，還是刪除舊節(jié)點(diǎn)，添加新節(jié)點(diǎn)。 首先理解ReactElement和ReactClass的概念。想要更好的利用react的虛擬DOM，diff算法的優(yōu)勢(shì)，我們需要正確的優(yōu)化、組織rea...
閱讀 3114·2023-04-26 00:40
閱讀 2473·2021-09-27 13:47
閱讀 4441·2021-09-07 10:22
閱讀 3012·2021-09-06 15:02
閱讀 3365·2021-09-04 16:45
閱讀 2556·2021-08-11 10:23
閱讀 3654·2021-07-26 23:38
閱讀 2937·2019-08-30 15:54
