React學習筆記—虛擬DOM

Tonny 發布于2019-08-22 10:56 / 1026人閱讀

摘要：虛擬之所以快，是因為它不直接操作。此外，實現了一套完整的事件合成機制，能夠保持事件冒泡的一致性，跨瀏覽器執行。大部分情況下，我們都是在構建的組件，也就是操作虛擬。例如就表示組件被插入之前。組件更新后執行組件被移除前執行獲取真實的強制更新

React對底層的代碼作了封裝，在大多數情況下，我們不需要直接去操作DOM。但是有時候我們還是需要使用到底層的代碼的，比如輸入框獲取焦點，這個時候可以通過第三方的類庫或者React提供的API實現。

虛擬DOM

React之所以快，是因為它不直接操作DOM。React將DOM結構存儲在內存中，然后同render()的返回內容進行比較，計算出需要改動的地方，最后才反映到DOM中。
此外，React實現了一套完整的事件合成機制，能夠保持事件冒泡的一致性，跨瀏覽器執行。甚至可以在IE8中使用HTML5的事件。
大部分情況下，我們都是在構建React的組件，也就是操作虛擬DOM。但是有時候我們需要訪問底層的API，可能或通過使用第三方的插件來實現我們的功能，如jQuery。React也提供了接口讓我們操作底層API。

Refs和findDOMNode()

為了同瀏覽器交互，我們有時候需要獲取到真實的DOM節點。我們可以通過調用React的React.findDOMNode(component)獲取到組件中真實的DOM。

  React.findDOMNode()只在mounted組件中調用，mounted組件就是已經渲染在瀏覽器DOM結構中的組件。如果你在組件的render()方法中調用React.findDOMNode()就會拋出異常。

看官方的示例：

var MyComponent = React.createClass({
  handleClick: function() {
    // Explicitly focus the text input using the raw DOM API.
    React.findDOMNode(this.refs.myTextInput).focus();
  },
  render: function() {
    // The ref attribute adds a reference to the component to
    // this.refs when the component is mounted.
    return (
      
        
        
      
    );
  }
});

React.render(
  ,
  document.getElementById("example")
);

組件的生命周期

組件的生命周期主要由三個部分組成：

Mounting：組件正在被插入DOM中

Updating：如果DOM需要更新，組件正在被重新渲染

Unmounting：組件從DOM中移除

React提供了方法，讓我們在組件狀態更新的時候調用，will標識狀態開始之前，did表示狀態完成后。例如componentWillMount就表示組件被插入DOM之前。

Mounting

getInitialState()：初始化state

componentWillMount()：組件被出入DOM前執行

componentDidMount()：組件被插入DOM后執行

Updating

componentWillReceiveProps(object nextProps):組件獲取到新的屬性時執行，這個方法應該將this.props同nextProps進行比較，然后通過this.setState()切換狀態

shouldComponentUpdate(object nextProps, object nextState):組件發生改變時執行，應該將this.props和nextProps、this.stats和nextState進行比較，返回true或false決定組件是否更新

componentWillUpdate(object nextProps, object nextState)：組件更新前執行，不能在此處調用this.setState()。

componentDidUpdate(object prevProps, object prevState)：組件更新后執行

Unmounting

componentWillUnmount()：組件被移除前執行

Mounted Methods

findDOMNode()：獲取真實的DOM

forceUpdate()：強制更新

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91495.html

React學習筆記

摘要：單向數據流數據一旦更新，會渲染整個。的渲染方式用戶輸入從獲取數據將數據傳給頂層組件將每個組件渲染出來由于是單向數據流，所以不會有雙向數據綁定數據模型的臟檢查確切的操作。你覺得你用的react框架有什么特點呢？ 1)使用jsx語法，可以在js中寫html。2)單向數據流：數據一旦更新，會渲染整個app。react的渲染方式：用戶輸入從API獲取數據將數據傳給頂層組件 React將...

taoszu 2019-08-23 15:59 評論0 收藏0
React學習筆記—數據展示

摘要：我們使用最基本的事就是用來展現數據。使得展現數據變得簡單，并且當數據改變時，能自動保持的更新。使用了內部的虛擬，當數據發生改變，先在虛擬中計算變化，最后將變動的部分反應到真實的中?？梢园阉醋饔兄蜖顟B并且可以返回結構的函數。我們使用UI最基本的事就是用來展現數據。React使得展現數據變得簡單，并且當數據改變時，React能自動保持UI的更新。開始創建一個簡單的Demo： ...

Magicer 2019-08-21 10:28 評論0 收藏0
《深入react技術?！?em>學習筆記（二）初入React世界

摘要：用于規范的類型與必需的狀態。表示由組件更改的數據，通常是通過與用戶的交互來更改的。為了實現的修改，需要注冊事件處理程序到相應的元素上。當事件發生時，將更新后的值是從中檢索，并通知組件。通常情況下，該函數初始化狀態使用，，或其他數據存儲。前言上一篇文章中，我們講到了JSX的一些用法和注意事項，這次我們來講react中最基礎也是特別重要的內容：組件。這篇文章包含組件的以下內容：狀態、屬...

MRZYD 2019-08-20 14:47 評論0 收藏0
學習MVVM及框架的雙向綁定筆記

摘要：的數據劫持版本內部使用了來實現數據與視圖的雙向綁定，體現在對數據的讀寫處理過程中。這樣就形成了數據的雙向綁定。 MVVM由以下三個內容組成 View：視圖模板 Model：數據模型 ViewModel：作為橋梁負責溝通View和Model，自動渲染模板在JQuery時期，如果需要刷新UI時，需要先取到對應的DOM再更新UI，這樣數據和業務的邏輯就和頁面有強耦合。在MVVM中，U...

VioletJack 2019-08-23 15:04 評論0 收藏0
react入門筆記

摘要：是程序的入口文件自動化測試定義組件擴大點擊區域虛擬的生成數據模板數據模板生成虛擬虛擬就是一個對象，用它來描述真實損耗了性能用虛擬的結構生成真實的來顯示發生變化數據模板生成新的虛擬極大提升了性能數據更新比較原始虛擬和新的虛擬的區別找到區別極大 Index.js是程序的入口文件 PWA progressive web application(registerServiceWorker) A...

Hanks10100 2019-08-26 12:23 評論0 收藏0