作者:元彦
链接: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分别在什么场景下使用,为什么要这么定义?的更多相关文章

  1. .NET Core 中的 Swagger 应用与微服务场景下的Swagger Api 集成显示

    Swagger 与 OpenAPI 的历史来源: Swagger 项目于 2015 年捐赠给 OpenAPI Initiative,此后被称为 OpenAPI.这两个名称可以互换使用.但是," ...

  2. 在react中实现CSS模块化

    react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了.下面我将简 ...

  3. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  4. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  5. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  6. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  7. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  8. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  9. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

随机推荐

  1. 异常处理与调试4 - 零基础入门学习Delphi53

    调试(Debug) 让编程改变世界 Change the world by program 调试(Debug) 在应用程序开发中检测.处理程序中的错误是一个非常重要的环节.在Delphi的集成开发环境 ...

  2. HDU 题目分类收集

    并查集题型简单并查集1213 How Many Tables 1232 畅通工程 (杭电简单的并查集不是很多) 简单最小生成树1233 还是畅通工程 1863 畅通工程 1874 畅通工程再续 187 ...

  3. 十、装饰(Decorator)模式 --结构模式(Structural Pattern)

    装饰(Decorator)模式又名包装(Wrapper)模式[GOF95].装饰模式以对客户端透明的方 式扩展对象的功能,是继承关系的一个替代方案. 装饰模式类图: 类图说明: 抽象构件(Compon ...

  4. Silverlight 结合ArcGis 在地图画面上显示名称+ 点选图层事件委派

    原文 http://www.dotblogs.com.tw/justforgood/archive/2012/05/10/72083.aspx 如下图,我希望我的滑鼠经过此标记的点时显示名称 其实简单 ...

  5. xargs mv命令使用方法:ls *.mp3 |xargs -i mv {} /tmp

    ls  *.mp3 |xargs -i  mv {} /tmp 或者 find . -name "*.mp3" -exec mv {} /tmp \;

  6. Graph.js

    Graph.js Graph.js A JavaScript library for rendering a graph of nodes

  7. Pattern | CLiPS

    Pattern | CLiPS Pattern Pattern is a web mining module for the Python programming language. It has t ...

  8. Java程序员面试题集(71-85)(转)

    转:http://blog.csdn.net/jackfrued/article/details/17566627 Java程序员面试题集(71-85) 摘要:这一部分主要包括了UML(统一建模语言) ...

  9. CSS布局方案之圣杯布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  10. ISO9126 质量模型

    功能性 适合性:当软件在指定条件下使用,其满足明确和隐含要求功能的能力. 准确性:软件提供给用户功能的精确度是否符合目标. 互操作性:软件与其它系统进行交互的能力. 安全性:软件保护信息和数据的安全能 ...