首页 > 代码库 > react中createFactory, createClass, createElement分别在什么场景下使用,为什么要这么定义?

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

作者:元彦
链接: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})

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