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

发布时间：2020-12-15 08:28:42 所属栏目：百科来源：网络整理

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

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

React引用
元素操作API
- 2.1 创建元素：React.createElement()
- 2.2 元素克隆：React.cloneElement()
- 2.3React.DOM命名空间
- 2.4 有效元素判断：isValidElement()
组件操作API
- 3.1 创建组件类：createClass()
- 3.2 创建元素工厂函数：createFactory()

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,sans-serif; font-size:14px; line-height:20px"> 该方法会从已有的ReactElement中复制，并返回一个新的element，一个React元素（ReactElement） 
  示例，已有如下元素： 
React.createElement('div'); 
cloneElement()复制这个元素，并最终生前面示例中的HTML。复制方法如下，详见cloneElement.html： 
var div = React.createElement('div');

ReactDOM.render(
  React.cloneElement(div,document.getElementById('example')
);
 
 
  
 2.3React.DOM命名空间 
React.DOM命名空间中是创建各种HTML元素的工厂方法，所有的方法都是对React.createElement()方法的封装，通过这个命名空间也以快捷的创建各个HTML元素。 
ReactElement DOM.HTML_TAG(
  [object props],sans-serif; font-size:14px; line-height:20px"> 创建一个名HTML_TAG的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',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',React.createElement('hr')
    ));
  }
});
var App = React.createFactory(AppClass); 
 创建后就不再需要使用JSX或cerateElement()方法： 
ReactDOM.render(
  App(null,document.getElementById('example')
); 
 
 React提供的API来创建组件。本文将介绍使用React创建元素，及一些React中重要的API。 
  
  
  
  React引用 
  元素操作API 
    
    React.createElement() 
    React.cloneElement() 
    React.DOM命名空间 
    isValidElement() 
   
  
  组件操作API 
    
    createClass() 
    createFactory() 
   
  
  
  
  
 React引用 
 CMD）两种规范引用。 
 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> 
 require来引用React： 
 // 引用React
var React = require('react');

// 使用React
React.render(……);
 
  
  
  2. 元素操作API 
 ReactElement）。React提供了创建元素、复制元素等方法。 
 React.createElement() 
 ReactElement对象，其参数如下： 
  
  ReactClass） 
  props，可选参数，表示对象的属性 
  children，第三个参数及其后的参数都会被认为是元素的子元素 
  返回值：ReactElement对象 
  
  示例，创建一个如下结构的组件： 
 <div className="myClass">
  <h2>itbilu.com</h2><hr/>
</div>
 
 createElement()方法操作如下： 
 createElement.html 
  
  
 React.cloneElement() 
 ReactElement） 
   示例，已有如下元素： 
 React.createElement('div'); 
 cloneElement.html： 
  
  
 React.DOM命名空间 
 React.createElement()方法的封装，通过这个命名空间也以快捷的创建各个HTML元素。 
 ReactElement，其参数如下： 
 type。以下两种方式执行结果相同： 
 React.createElement('div');
React.DOM.div(); 
  
  
 isValidElement() 
 ReactElement。 
 boolean isValidElement(* object) 
  示例如下： 
 var div = React.createElement('div');
React.isValidElement(div);  // true
React.isValidElement(document.getElementById('example')); // fase 
  
  
  3. 组件操作API 
 ReactElement的封装，在React中组件被认为是最小的功能分离点。合理的利用组件，可以解耦业务复杂度，更可以高效的完成UI的编写。 
  
  
 createClass() 
 ReactClass createClass(object specification) 
 render()方法，并且返回一个单个子级，而其内部可能会有很深的子级结构。 
 createClass.html）： 
  
  
 JSX语法引用组件外，还可以使用以下两种方法： 
  
  使用ReactElement 
  使用ReactElement 
  
  
  
 createFactory() 
 factoryFunction createFactory(
  string/ReactClass type
) 
 ReactElements的工厂函数： 
 ReactClass 
  
 createFactory.html）： 
 cerateElement()方法： 
 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

`React.DOM`命名空间

isValidElement()

3. 组件操作API

createClass()

createFactory()

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

1.`React`引用

2. 元素操作API

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

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

2.3`React.DOM`命名空间

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

3. 组件操作API

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

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

React引用

2. 元素操作API

React.createElement()

React.cloneElement()

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

1.React引用

2. 元素操作API

2.1 创建元素：React.createElement()

2.2 元素克隆：React.cloneElement()

2.3React.DOM命名空间

2.4 有效元素判断：isValidElement()

3. 组件操作API

3.1 创建组件类：createClass()

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

React引用

2. 元素操作API

React.createElement()

React.cloneElement()

React.DOM命名空间

isValidElement()

3. 组件操作API

createClass()

createFactory()

1.`React`引用

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

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

2.3`React.DOM`命名空间

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

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

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

`React.DOM`命名空间