React入門-ReactDOM.render()介紹

React中的核心概念

• 1 虛擬DOM（Virtual DOM）
• 2 Diff算法（虛擬DOM的加速器，提高React性能的法寶）

虛擬DOM（Vitural DOM）

React將DOM抽象爲虛擬DOM，虛擬DOM其實就是用一個對象來描述DOM，經過對比先後兩個對象的差別，最終只把變化的部分從新渲染，提升渲染的效率

爲何用虛擬dom，當dom反生更改時須要遍歷 而原生dom可遍歷屬性多大231個 且大部分與渲染無關 更新頁面代價太大

• 如何實現一個 Virtual DOM 算法
• 理解 Virtual DOM

VituralDOM的處理方式

• 1 用 JavaScript 對象結構表示 DOM 樹的結構，而後用這個樹構建一個真正的 DOM 樹，插到文檔當中
• 2 當狀態變動的時候，從新構造一棵新的對象樹。而後用新的樹和舊的樹進行比較，記錄兩棵樹差別
• 3 把2所記錄的差別應用到步驟1所構建的真正的DOM樹上，視圖就更新了

Diff算法

• Reconciliation diff
• diff算法 - 中文文檔
• 難以想象的 react diff
• React diff 算法

當你使用React的時候，在某個時間點 render() 函數建立了一棵React元素樹，
在下一個state或者props更新的時候，render() 函數將建立一棵新的React元素樹，
React將對比這兩棵樹的不一樣之處，計算出如何高效的更新UI（只更新變化的地方）

1、ReactDOM.render()

React最基本方法,

    用於將模版轉換成HTML語言,渲染DOM,並插入指定的DOM節點中    

    該方法有3個參數 :

    - 模版的渲染內容(HTML形式)    

    - 須要插入的DOM節點    

    -  渲染後的回調(通常用不到)

// 1. 導入 react import React from 'react' import ReactDOM from 'react-dom' // 2. 建立 虛擬DOM // 參數1：元素名稱 參數2：元素屬性對象(null表示無) 參數3：當前元素的子元素string||createElement() 的返回值 const divVD = React.createElement('div', { title: 'hello react' }, 'Hello React！！！') // 3. 渲染 // 參數1：虛擬dom對象 參數2：dom對象表示渲染到哪一個元素內 參數3：回調函數 ReactDOM.render(divVD, document.getElementById('app'))

連接：https://www.zhihu.com/question/27602269/answer/40168594
來源：知乎

react中createFactory, createClass, createElement分別在什麼場景下使用，爲何要這麼定義？

三者用途稍有不一樣，按依賴關係調整下順序：
1. createClass，如其名就是建立React組件對應的類，描述你將要建立組件的各類行爲，其中只有當組件被渲染時須要輸出的內容的render接口是必須實現的，其餘都是可選：

var Hello = React.createClass({ render: function() { return <div>Hello Taobao, Hello UED</div>; } }); 

2. createElement，建立React組件實例，支持type，config，children三個參數：

ReactElement.createElement = function(type, config, children) { ... } 

如咱們在jsx中描述的 < Hello /> ，編譯後就是 React.createElement(Hello)

3. createFactory，經過工廠方法建立React組件實例，在js裏要實現工廠方法只需建立一個帶type參數的createElement的綁定函數：

ReactElement.createFactory = function(type) { var factory = ReactElement.createElement.bind(null, type); return factory; }; 

建立模式目的是隔離與簡化建立組件的過程，模式的東西天然是可用可不用，若是須要批量建立某個組件時，能夠經過工廠方法來實現：

var h = React.createFactory(Hello);
h({x:1})
h({x:2})
h({x:3})

當前位置：  主頁 >  學無止境 >  WEB前端 > 文章

React入門 createClass使用說明

發佈時間： 2016-04-08 做者： 跡憶 瀏覽次數： 4693

在使用React.createClass以前，咱們先來看官方給出的解釋

ReactClass createClass(object specification)

建立一個給出說明的組件類（這個給出的說明也就是其參數 object specification）。這個組件實現一個render方法，而且render方法返回一個單一的節點。這個返回的節點可能包含任意深度的子節點結構。該方法與標準的原型類不一樣的地方就是不用使用new去實例化對象。這些組件被很好的封裝起來，能夠很好的爲你建立後臺實例。

固然，單看這些定義我是不知道該如何去使用createClass方法的（我覺的我翻譯的不夠標準）。那下面咱們直接經過一個實例來解釋如何使用React.createClass()。

在本篇文章，咱們只是實現render方法，而且在介紹應該注意的問題。對於object specification的詳細介紹，那就涉及到了組件的詳細說明和生命週期的知識，在本篇咱們不作介紹。

例一

var Root = React.createClass({
    render:function(){
        return (
          <h1>跡憶博客</h1>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

這是一個簡單的例子。雖然說簡單，可是有兩個須要注意的地方。

第一點就是生命的Root首字母必須大寫，也就是說咱們若是將Root 寫成root，那麼<root />就會被直接解析成html標籤（<root></root>）。下面咱們來看以下的代碼（下面的代碼是錯誤的）

var root = React.createClass({
    render:function(){
        return (
          <h1>跡憶博客</h1>
        );
    },
});
ReactDOM.render(
        <root />,
        document.getElementById('content')
);

其解析的結果以下

<root data-reactid=".0"></root>

顯然這不是咱們想要的結果。

第二點是，在一個createClass建立的組件中只能有一個根節點。這個根節點能夠有任意層的子節點。下面咱們看以下的代碼

var Root = React.createClass({
    render:function(){
        return (
          <h1>跡憶博客</h1>
          <a>www.onmpw.com</a>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

這段代碼也是存在錯誤的，在解析過程當中會報以下的錯誤

SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (22:18) 20 | return ( 21 | <h1>跡憶博客</h1> > 22 | <a>www.onmpw.com</a> | ^ 23 | ); 24 | }, 25 | }); ...("+loc.line+":"+loc.column+")";var err=new SyntaxError(message);err.pos=pos;err....

所以若是咱們想要實現上述咱們想要的結果，能夠在h1和a的外面再加一層節點。以下

例二

var Root = React.createClass({
    render:function(){
        return (
          <div>
            <h1>跡憶博客</h1>
            <a>www.onmpw.com</a>
          </div>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

這樣就能保證一個組件中只有一個根節點，又能實現咱們想要的效果。

其實對於render來講，該方法會返回一個React組件樹，用來接受該組件樹的變量名稱必須首字母大寫。而且該組件樹只能有一個根節點，這也是符合實際狀況的。最終這棵組件樹會被ReactDOM.render渲染成HTML標籤。

對於例二中的<div>標籤，它並非一個真正的DOM節點，而是一個虛擬的DOM節點。你能夠這樣認爲，組件樹中的這些節點就是一些標記或者數據，只是React知道該如何處理這些標記或者數據。

其實React.createClass的知識點不少，這裏我只是簡單介紹在使用過程當中應該注意的問題。