react中createFactory, createClass, createElement分别在什么场景下使用,为什么要这么定义?
作者:元彦
链接:https://www.zhihu.com/question/27602269/answer/40168594
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
链接:https://www.zhihu.com/question/27602269/answer/40168594
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
三者用途稍有不同,按依赖关系调整下顺序:
1. createClass,如其名就是创建React组件对应的类,描述你将要创建组件的各种行为,其中只有当组件被渲染时需要输出的内容的render接口是必须实现的,其他都是可选:
2. createElement,创建React组件实例,支持type,config,children三个参数:
如我们在jsx中描述的 < Hello /> ,编译后就是 React.createElement(Hello)
3. createFactory,通过工厂方法创建React组件实例,在js里要实现工厂方法只需创建一个带type参数的createElement的绑定函数:
创建模式目的是隔离与简化创建组件的过程,模式的东西自然是可用可不用,如果需要批量创建某个组件时,可以通过工厂方法来实现:
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) {
...
}
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})