一. 函數式編程
React 把用戶界面籠統成一個個組件,如按鈕組件 Button、對話框組件 Dialog、日期組件 Calendar。
開闢者經由歷程組合這些組件,終究獲得功用雄厚、可交互的頁面。經由歷程引入 JSX 語法,復用組件變得異常輕易,
同時也能保證組件構造清楚。有了組件這層籠統,React 把代碼和實在襯着目的斷絕開來,除了能夠在瀏覽器
端襯着到 DOM 來開闢網頁外,還能用於開闢原生挪動運用。
二 假造DOM
DOM操縱的效力是很低的,而且不是平常的慢,而且這也是激發機能題目的常見題目之一。為何會慢呢?
由於對 DOM的修正成影響網頁的用戶界面,重繪頁面是一項高貴的操縱。太多的DOM操縱會致使一系列的重
繪操縱,為了確保實行效果的準確性,一切的修正操縱是按遞次同步實行的。我們稱這個歷程叫做迴流
(reflow),同時這也是最高貴的瀏覽器操縱之一。迴流操縱重要會發生在幾種情況下:
- 當對DOM節點實行新增或許刪除操縱時。
- 動態設置一個款式時(比方element.style.width=”10px”)。
- 當獵取一個必需經由盤算的尺寸值時,比方接見offsetWidth、clientHeight或許其他須要經由盤算的CSS值(在兼容DOM的瀏覽器中,能夠經由歷程getComputedStyle函數獵取;在IE中,能夠經由歷程currentStyle屬性獵取)。 解決題目的癥結,就是限定經由歷程DOM操縱所激發迴流的次數。大部份瀏覽器都不會在JavaScript的實行歷程當中更新DOM。響應的,這些瀏覽器將對對DOM的操縱放進一個行列,並在JavaScript劇本實行終了今後按遞次一次實行終了。也就是說,在JavaScript實行的歷程當中,用戶不能和瀏覽器舉行互動,直到一個迴流操縱被實行。(失控劇本對話框會觸發迴流操縱,由於他實行了一个中斷JavaScript實行的操縱,此時會對用戶界面舉行更新)
實在頁面對應一個 DOM 樹。在傳統頁面的開闢形式中,每次須要更新頁面時,都要手動操縱DOM舉行更新。DOM 操縱異常高貴。我們都曉得在前端開闢中,機能斲喪最大的就是 DOM 操縱,而且這部份代碼會讓團體項目的代碼變得難以保護。React 把實在 DOM 樹轉換成 JavaScript 對象樹,每次數據更新后,從新盤算 Virtual DOM,並和上一次天生的 Virtual DOM 做對照,對發生變化的部份做批量更新。React 也供應了直觀的 houldComponentUpdate 生命周期回調,來削減數據變化后不必要的 Virtual DOM 對照歷程,以保證機能。我們說 Virtual DOM 提升了 React 的機能,但這並非 React 的唯一亮點。另外,Virtual DOM的襯着體式格局也比傳統 DOM 操縱好一些,但並不顯著,由於對照 DOM 節點也是須要盤算資本的。它最大的優點實在還在於輕易和其他平台集成,比方 react-native 是基於 Virtual DOM 襯着出原生控件,由於 React 組件能夠映照為對應的原生控件。在輸出的時刻,是輸出 Web DOM,照樣 Android 控件,照樣 iOS 控件,就由平台自身決議了。因而,react-native 有一個標語——LearnOnce,Write Anywhere。