React 相关方法（API）介绍－元素与组件操作

2023-11-18

JSX可以减少定义组件的复杂性，但对于React来说JSX并不是必须的，JSX标签最终会被转换为原生的JavaScript。除使用JSX语法外，还可以使用React提供的API来创建组件。本文将介绍使用React创建元素，及一些React中重要的API。

1. `React`引用

React是React库的入口，React中所有的方法都是通过该对象调用，React支持AMD和CommonJS（CMD）两种规范引用。

AMD规范的预编译包，React是全局的，可以像下现这样引用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!--引用React-->
    <script src="build/react.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
     // 使用用React
     React.render(……);
    </script>
  </body>
</html>

CommonJS模块系统（如：Node.js）中，使用require来引用React：

// 引用React
var React = require('react');

// 使用React
React.render(……);

2. 元素操作API

使用非JSX语法创建组件，首先要创建React元素（ReactElement）。React提供了创建元素、复制元素等方法。

2.1 创建元素：`React.createElement()`

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

该方法创建并返回一个ReactElement对象，其参数如下：

type，可以是一个HTML标签或是一个React组件（ReactClass）
props，可选参数，表示对象的属性
children，第三个参数及其后的参数都会被认为是元素的子元素
返回值：ReactElement对象

示例，创建一个如下结构的组件：

<div className="myClass">
  <h2>itbilu.com</h2><hr/>
</div>

使用createElement()方法操作如下：

ReactDOM.render(
  React.createElement('div', {className:'myClass'},  
    React.createElement('h2', null, 'itbilu.com'),
    React.createElement('hr')
  ),
  document.getElementById('example')
);

// itbilu.com

完整代码：createElement.html

2.2 元素克隆：`React.cloneElement()`

ReactElement cloneElement(
  ReactElement element,
  [object props],
  [children ...]
)

该方法会从已有的ReactElement中复制，并返回一个新的ReactElement对象，其参数如下：

element，一个React元素（ReactElement）
props，可选参数，表示对象的属性
children，第三个参数及其后的参数都会被认为是元素的子元素
返回值：ReactElement对象

示例，已有如下元素：

React.createElement('div');

使用cloneElement()复制这个元素，并最终生前面示例中的HTML。复制方法如下，详见cloneElement.html：

var div = React.createElement('div');

ReactDOM.render(
  React.cloneElement(div, {className:'myClass'},  
    React.createElement('h2', null, 'itbilu.com'),
    React.createElement('hr')
  ),
  document.getElementById('example')
);

2.3 `React.DOM`命名空间

React.DOM命名空间中是创建各种HTML元素的工厂方法，所有的方法都是对React.createElement()方法的封装，通过这个命名空间也以快捷的创建各个HTML元素。

ReactElement DOM.HTML_TAG(
  [object props],
  [children ...]
)

创建一个名HTML_TAG的ReactElement，其参数如下：

props，可选参数，表示对象的属性
children，第三个参数及其后的参数都会被认为是元素的子元素
返回值：ReactElement对象

React.DOM.*只是createElement()方法的快捷方式，它帮我们自动添加了createElement()方法的第一个参数type。以下两种方式执行结果相同：

React.createElement('div');
React.DOM.div();

2.4 有效元素判断：`isValidElement()`

React提供了isValidElement()方法，用于判断传入对象是否是有效的ReactElement。

boolean isValidElement(* object)

示例如下：

var div = React.createElement('div');
React.isValidElement(div);  // true
React.isValidElement(document.getElementById('example')); // fase

3. 组件操作API

组件（Component）是对一个或一系列ReactElement的封装，在React中组件被认为是最小的功能分离点。合理的利用组件，可以解耦业务复杂度，更可以高效的完成UI的编写。

3.1 创建组件类：`createClass()`

ReactClass createClass(object specification)

创建并返回一个组件类（ReactClass）。组件内部必须实现render()方法，并且返回一个单个子级，而其内部可能会有很深的子级结构。

示例，将前面示例中的HTML结构定义成一个组件（createClass.html）：

var App = React.createClass({displayName: 'App',
  render: function () {
    return (React.createElement('div', {className:'myClass'},  
      React.createElement('h2', null, this.props.children),
      React.createElement('hr')
    ));
  }
});

创建组件类后，要将其渲染到页面除可以使用JSX语法引用组件外，还可以使用以下两种方法：

使用createElement()方法创建ReactElement
使用createFactory()方法创建一个工厂函数，该函数会返回一个ReactElement

3.2 创建元素工厂函数：`createFactory()`

factoryFunction createFactory(
  string/ReactClass type
)

创建一个返回ReactElements的工厂函数：

type，HTML标签（如：div、body等）或ReactClass

如，对前面的组件类创建一个工厂函数（createFactory.html）：

var AppClass = React.createClass({displayName: 'App',
  render: function () {
    return (React.createElement('div', {className:'myClass'},  
      React.createElement('h2', null, this.props.children),
      React.createElement('hr')
    ));
  }
});
var App = React.createFactory(AppClass);

创建后就不再需要使用JSX或cerateElement()方法：

ReactDOM.render(
  App(null, 'itbilu.com'),
  document.getElementById('example')
);