react中createFactory, createClass, createElement分别在什么场景下使用，为什么要这么定义？

Posted 2020-08-22 暗影侠客

作者：元彦
链接：https://www.zhihu.com/question/27602269/answer/40168594
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

三者用途稍有不同，按依赖关系调整下顺序：
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})