JIYIK CN >

Recently, when I was learning React, I came across the createFactory method. I found that the instructions on its official website were very simple. It is really difficult to use createFactory just by looking at the explanation on the official website, and the use of this method on the Internet is not very detailed. I will try to share the method of using createFactory with you, hoping it will be helpful to you.

Let’s first look at the official website explanation

React.createFactory

factoryFunction createFactory(
  string/ReactClass type
)

The above function returns a function for generating a ReactElement of a given type, similar to React.createElement. The type parameter can be an html tag name (for example: "div", "li", etc.) or a ReactClass object.

The above is the description of createFactory on the official website, but there is no specific example of how to use this method on the official website. I think the official website is more authoritative for the concept of this method. I will only explain the use of createFactory here.

The type parameter is the HTML tag name

First, let’s look at an example from the official website

Example 1

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));

This example creates two li tags through the createElement method, then creates a ul tag through the createElement method, and adds the li tag as a child node of ul. For the use of createElement, you can refer to the explanation on the official website.

Next we modify this example using createFactory

Example 2

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')
);

Of course, ul can also generate ul tags by creating a project method, but in our example, there is only one ul creation, so we can create the ul element through createElement. Of course, we can generate another ul factory method to generate the ul element. The code is as follows

Example 3

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')
);

In addition, React also provides a built-in factory method for HTML tags, React.DOM.HtmlTag. We also use the built-in factory method to modify the above example

Example 4

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')
);

Similarly, we can also use the built-in factory method for the li element. The code is as follows

Example 5

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')
);

This code looks simpler.

All of the above is the use of the factory method with the specified parameter type as the HTML tag name. Next, let's see how to use the method with the specified parameter type as ReactClass.

The type parameter is ReactClass

Similarly, we rewrite Example 1 by specifying the parameter as ReactClass. The code is as follows

Example 6

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')
);

In the above example, by using ReactClass to create the li factory method, the following situations can no longer be used when generating li elements

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

Because if this method is used, although the li element can be created successfully, the text in the li is not generated. So we need to use props to generate its text.

Similarly, for the ul element, we can also use ReactClass to generate a factory method first, and then use the factory method to create the ul element. The usage method is the same, so I will not give examples here. You can try it yourself.

Through all the examples above, there are many ways to combine createFactory. So the use of React is very flexible, and we can choose to write our code in a way that suits us.