React 工廠方法 createFactory使用詳解

最近在學習React過程中，接觸到其中的createFactory方法，發現其官網上的說明很簡單。單看官網的解釋要想使用createFactory還真是有些困難，而且網上對這個方法的使用說的都不是很詳細。在下不才，試着将使用createFactory的方法分享給大家，希望對大家有所幫助。

下面我們先看官網解釋

React.createFactory

factoryFunction createFactory(
  string/ReactClass type
)           

上面函數傳回一個用于生成給定類型的ReactElement的函數，類似于 React.createElement。對于type參數可以是html标簽名字（例如：“div”，“li”等），也可以是ReactClass對象。

以上就是官網上面的createFactory的說明，但是對于這個方法的使用，官網上面并沒有具體的例子。對于這個方法的概念的說明，我覺得還是官網上的比較權威。我在這裡隻對createFactory的使用進行說明。

type參數為html标簽名字

首先我們來看官網上的一個例子

例一

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById(content));           

這個例子通過createElement方法建立了兩個li标簽，然後通過createElement方法建立了ul标簽，并将li标簽添加為ul的子節點。關于createElement的使用各位可以參考官網的解釋

下面我們通過createFactory來修改這個例子

例二

var factory = React.createFactory("li");
var child1 = factory(null,'First Text Content');
var child2 = factory(null,'Second Text Content');
var root  = React.createElement('ul',{className:'my-list'},child1,child2);
ReactDOM.render(
        root,
        document.getElementById('content')
);           

當然，ul也可以通過建立一個工程方法來生成ul标簽，但是在我們這個例子中隻有一次ul的建立，是以我們可以通過createElement來建立ul元素。當然我們可以再生成一個ul的工廠方法用于生成ul元素，代碼如下

例三

var factory = React.createFactory("li");
var child1 = factory(null,'First Text Content');
var child2 = factory(null,'Second Text Content');
var ulfactory = React.createFactory('ul');
var root  = ulfactory({className:'my-list'},child1,child2);
ReactDOM.render(
        root,
        document.getElementById('content')
);           

除此之外，React還為HTML标簽提供了内置的工廠方法 React.DOM.HtmlTag。同樣我們使用内置的工廠方法修改上面的例子

例四

var factory = React.createFactory("li");
var child1 = factory(null,'First Text Content');
var child2 = factory(null,'Second Text Content');
var root = React.DOM.ul({className:'my-list'},child1,child2);
ReactDOM.render(
        root,
        document.getElementById('content')
);           

同樣的對于li元素我們也可以使用内置的工廠方法，代碼如下

例五

var root = React.DOM.ul(
        {className:'my-list'},
        React.DOM.li(null,'First Text Content2'),
        React.DOM.li(null,'Second Text Content2')
);
ReactDOM.render(
        root,
        document.getElementById('content')
);           

這樣的代碼看起來是不是更簡單。

以上所有就是指定參數類型為html标簽名字的工廠方法的使用。下面我們看使用指定參數類型為ReactClass的使用方法。

type參數為ReactClass

同樣我們通過指定參數為ReactClass對例一進行改寫。代碼如下

例六

var cli = React.createClass({
    render: function(){
        return (
            <li>
                {this.props.text}
            </li>
        );
    }
});
var factory = React.createFactory(cli);
var child1 = factory({text:'First Text Content'});
var child2 = factory({text:'Second Text Content'});
var root = React.DOM.ul({className:'my-list'},child1,child2);
ReactDOM.render(
        root,
        document.getElementById('content')
);           

在上面的例子中，通過使用ReactClass的方式建立li的工廠方法，在生成li元素的時候不能再使用下面的情況

var child1 = factory(null,'First Text Content');
var child2 = factory(null,'Second Text Content');           

因為如果使用這樣的方式，雖然可以建立成功li元素，但是li中的文本并沒有被生成。是以我們需要借助props來生成其文本。

同樣對于ul元素，我們也可以使用ReactClass的方式先生成工廠方法，然後再使用工廠方法建立ul元素。使用方法是相同的，在這裡我就不再舉例子了。大家可以自己試一試。

通過上面的所有的例子，單就createFactory來說其組合方式就有很多。是以說React的使用方式非常的靈活，我們可以選擇适應自己的方式來寫我們的代碼。