React虛擬DOM中常用術語有哪些

這篇“React虛擬DOM中常用術語有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“React虛擬DOM中常用術語有哪些”文章吧。

在React的所有術語中，有五種核心類型是需要我們記住的。這五種類型分別是

ReactElement / ReactElement Factory

ReactNode

ReactComponent / ReactComponent Class

下面我們分別來看這五種類型

React Element

在React中主要的虛擬DOM的類型就是ReactElement。ReactElement有四種屬性，分別是：type，props，key和ref。它沒有封裝的內部方法，并且原型上面什么都沒有。

該類型我們可以通過React.createElement來創建。

var root = React.createElement('div');

為了可以渲染成一個新的DOM樹，我們可以創建ReactElement類型的元素，并且將這些元素傳遞給ReactDOM.render方法進行渲染。當然這些ReactElement也可以帶有正規的DOM元素（其中包括HTML元素和SVG元素等等）。

通常情況下我們不要把ReactElement和真實的DOM元素相混淆。一個ReactElement是一個輕型的無狀態的不可變的元素，它是一個虛擬的DOM元素。其中渲染方法如下代碼

ReactDOM.render(root,document.getElementById(‘content’));

如果我們想在ReactElement上面加屬性的話，我們可以將屬性對象作為createElement方法的第二個參數，然后其孩子節點可以作為第三個參數。

var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
ReactDOM.render(root, document.getElementById('example'));

同樣，這些在《React.createElement方法使用詳解》這篇文章中均有介紹。

如果我們要使用React的JSX語法的話，這些ReactElement元素就可以像這樣創建。

var root = <ul className="my-list">
             <li>Text Content</li>
           </ul>;
ReactDOM.render(root, document.getElementById('example'));

二者創建出來的元素可以是認為等價的。

Factories

ReactElement-factory 是一個簡單的生成帶有特定類型屬性的ReactElement的工廠方法。React帶有一個內置的幫助手冊，以便于你很方便的創建這個工廠方法。如下所示

function createFactory(type) {
  return React.createElement.bind(null, type);
}

createFactory方法為我們提供了一個很方便的創建ReactElement的方法，我們可以不再總是使用React.createElement(&lsquo;div&rsquo;)來創建了。

var div = React.createFactory('div');
var root = div({ className: 'my-div' });
ReactDOM.render(root, document.getElementById('example'));

除此之外，React還內置了標準HTML標簽的工廠方法，例子如下

var root = React.DOM.ul({ className: 'my-list' },
             React.DOM.li(null, 'Text Content')
           );

React Nodes

一個React節點可以是下面的任何一種情況

&middot; ReactElement
&middot; string (aka ReactText)
&middot; number (aka ReactText)
&middot; Array of ReactNodes (aka ReactFragment)

React Components

當然，我們在使用React的時候可以僅僅使用ReactElement，但是，如果你想充分的利用React的優勢的話，那么你就必須考慮使用ReactComponents去封裝狀態化的組件。

一個ReactComponent類僅僅只是一個Javascript類

var MyComponent = React.createClass({
  render: function() {
    ...
  }
});

當這個構造方法被調用的時候，至少要使用render返回一個對象，也就是說在createClass的第一個參數中（我們看到是一個對象）必須有render。返回的這個對象就是指定的ReactComponent。關于React.createClass的使用我們可以參考《React入門 createClass使用說明》

var component = new MyComponent(props); // 千萬不要這樣寫

除了測試，最好不要這樣調用。把這個交給React來做，它會為你去實現的。

你可以將ReactComponent傳遞給createElement，這樣就可以得到一個ReactElement了。

var element = React.createElement(MyComponent);

或者也可以使用JSX語法

var element = <MyComponent />;

當把element傳遞給ReactDOM.render的時候，React將會調用構造方法去創建一個ReactComponent，示例如下

var component = ReactDOM.render(element, document.getElementById('example'));

如果你多次調用ReactDOM.render，并且傳遞給它的是相同類型的ReactElement還有相同的DOM元素容器。那么它們將會返回相同的實例對象。并且這個實例是有狀態的。

var componentA = ReactDOM.render(<MyComponent />, document.getElementById('example'));
var componentB = ReactDOM.render(<MyComponent />, document.getElementById('example'));
componentA === componentB; // true

這就是為什么你不要自己去構造實例化對象。反之，ReactElement在它被構造出來之前是一個虛擬的ReactComponent組件。原先的ReactElement和新的ReactElement會進行對比，看是否需要創建新的ReactComponent組件。或者原先存在的是否需要重新使用。

以上就是關于“React虛擬DOM中常用術語有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。