赵走x博客 - 开发者的网上家园

2、组件的基础

资源编号:76050 书籍 React快速上手开发热度：83

现在你已经知道如何使用预定义的DOM 组件，是时候学习如何建立自己的组件了。

创建新组件的API 如下：

```
var MyComponent = React.createClass({
/* 组件详细说明 */
})
```
在上述例子中，“组件详细说明”是一个JavaScript 对象，该对象需要包含一个名为render() 的方法以及一系列可选的方法与属性。一个基本的例子大概如下所示：
```
var Component = React.createClass({
		render: function() {
				return React.DOM.span(null, "I'm so custom");
		}
	});
```
如你所见，唯一必须要做的事情就是实现render() 方法。该方法必须返回一个React 组件，不能只返回文本内容。这也是上述代码片段中使用span 组件的原因。

在应用中，使用自定义组件的方法和使用DOM 组件的方法类似：
```
ReactDOM.render(
		React.createElement(Component),
		document.getElementById("app")
);
```
该自定义组件的渲染结果如图2-1 所示。

![bs64](https://img.handsomemark.com/2019/11/07/0d89331a-0175-11ea-af20-0242ac140002.png)
图2-1：你的第一个自定义组件

React.createElement() 是创建组件“实例”的方法之一。如果你想创建多个实例，还有另一种途径，就是使用工厂方法:
```
var ComponentFactory = React.createFactory(Component);
ReactDOM.render(
		ComponentFactory(),
		document.getElementById("app")
);
```
请注意，我们之前介绍的React.DOM.* 方法实际上只是在React.createElement() 的基础上进行了一层封装。换句话说，以下代码同样可以渲染DOM 组件：
```
ReactDOM.render(
		React.createElement("span", null, "Hello"),
		document.getElementById("app")
);
```
如你所见，和自定义组件使用JavaScript 函数进行定义不同，DOM 元素是使用字符串定义的。