React學(xué)習(xí)之初入React世界

cjie 發(fā)布于2019-08-23 18:38 / 2309人閱讀

摘要：語法將語法直接加入到代碼中，再通過翻譯器裝換到純后由瀏覽器執(zhí)行。事實上，并不需要花精力學(xué)習(xí)。可以說，基本語法基本被囊括了，但也有少許不同。明確的數(shù)據(jù)流動。這條原則讓組件之間的關(guān)系變得簡單且可預(yù)測。使用獲取和顯示回調(diào)。

JSX語法

JSX將HTML語法直接加入到JavaScript代碼中，再通過翻譯器裝換到純JavaScript后由瀏覽器執(zhí)行。在實際開發(fā)中，JSX在產(chǎn)品打包階段都已經(jīng)編譯成純JavaScript，不會帶來任何副作用，反而會讓代碼更加直觀并易于維護(hù)。
事實上，JSX并不需要花精力學(xué)習(xí)。只要熟悉HTML標(biāo)簽，大多數(shù)功能就都可以直接使用了。
JSX語法完美地利用了JavaScript自帶的語法和特性，并使用大家熟悉的HTML語法來創(chuàng)建虛擬元素。可以說，JSX基本語法基本被XML囊括了，但也有少許不同。

React組件

基本的封裝性。
簡單的生命周期呈現(xiàn)。
明確的數(shù)據(jù)流動。

React組件的構(gòu)建方法

React.createClass
ES6 classes
無狀態(tài)函數(shù)

React數(shù)據(jù)流

在React中，數(shù)據(jù)是自頂向下單向流動的，即從父組件到子組件。這條原則讓組件之間的關(guān)系變得簡單且可預(yù)測。state與props是React組件中最重要的概念。如果頂層組件初始化props，那么React會向下遍歷整顆組件樹，重新嘗試渲染所有相關(guān)的子組件。而state只關(guān)心每個組件自己內(nèi)部的狀態(tài)，這些狀態(tài)只能在組件內(nèi)改變。把組件看成一個函數(shù)，那么它接受了props作為參數(shù)，內(nèi)部由state作為函數(shù)的內(nèi)部參數(shù)，返回一個Virtual DOM的實現(xiàn)。

React生命周期


組件的掛載與卸載：componentWillMount方法會在render方法之前執(zhí)行，而componentDidMount方法會在render方法之后執(zhí)行，分別代表了渲染前后的時刻。還有componentWillUnmount代表組件卸載前的狀態(tài)，在這個方法中，我們常常會執(zhí)行一些清理方法，如事件回收或是清除定時器。
更新過程是指父組件向下傳遞props或組件自身執(zhí)行setState方法時發(fā)生的一系列更新動作。shouldComponentUpdate是一個特別的方法，它接受需要更新的props和state，讓開發(fā)者增加必要的條件判斷，讓其在需要時更新，不需要時不更新。因此，當(dāng)方法返回false的時候，組件不再向下執(zhí)行生命周期方法。componentWillUpdate和componentDidUpdate這兩個生命周期方法很容易理解，對應(yīng)的初始化方法也很容易知道，他們代表在更新過程中渲染前后的時刻。

getDerivedStateFromProps(props, state)
在 render() 之前觸發(fā)，不管是什么原因觸發(fā) render() 方法的,此方法應(yīng)返回一個對象，用于更新 State, 或返回 null 不更新。
getSnapshotBeforeUpdate(prevProps, prevState)
在 Dom 改變之前獲得一些最新的信息,此方法的一切返回值都將被傳遞給 componentDidUpdate 方法中的 snapshot 參數(shù)。
componentDidCatch(err, info)

catch js 錯誤，log 這些 errors，顯示一個回調(diào)的 UI。
獲取錯誤的時機(jī)：during rendering，生命周期函數(shù)和子組件的 constructor 函數(shù)。
使用 setState() 獲取 unhandled JS errors 和 顯示回調(diào) UI。

ReactDOM

findDOMNode:React提供的獲取DOM元素的方法有兩種，其中一種就是ReactDOM提供的findDOMNode，當(dāng)組件被渲染到DOM中，findDOMNode返回該React組件實例相應(yīng)的DOM節(jié)點。

為什么說只有在頂層組件我們才不得不使用ReactDOM呢？這是因為要把React渲染的Virtual DOM渲染到瀏覽器的DOM當(dāng)中，就要使用render方法了，該方法把元素掛載到container中，并且返回element的實例。

refs

在組件內(nèi)，JSX是不會返回一個組件的實例的，它只是一個ReactElement，只是告訴React被掛載的組件應(yīng)該長什么樣。refs就是為此而生的，它是React組件中非常特殊的prop，可以附加到任何一個組件上。從字面意思來看，refs即reference，組件被調(diào)用時會新建一個該組件的實例，而refs就會指向這個實例，它可以是一個回調(diào)函數(shù)，這個回調(diào)函數(shù)會在組件被掛載后立即執(zhí)行。