React 相关方法（API）介绍－元素与组件操作
2016-09-09 17:05
821 查看
JSX可以减少定义组件的复杂性，但对于React来说
JSX并不是必须的，
JSX标签最终会被转换为原生的JavaScript。除使用
JSX语法外，还可以使用
React提供的API来创建组件。本文将介绍使用React创建元素，及一些React中重要的API。
React引用
元素操作API
2.1 创建元素：
React.createElement()
2.2 元素克隆：
React.cloneElement()
2.3
React.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, [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')
);JSX可以减少定义组件的复杂性，但对于React来说
JSX并不是必须的，
JSX标签最终会被转换为原生的JavaScript。除使用
JSX语法外，还可以使用
React提供的API来创建组件。本文将介绍使用React创建元素，及一些React中重要的API。
React引用
元素操作API
2.1 创建元素：
React.createElement()
2.2 元素克隆：
React.cloneElement()
2.3
React.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, [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')
);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- React 相关方法（API）介绍－ReactDom、ReactDOMServer、子节点
- HTML5 DOM元素类名相关操作API classList简介
- Selenium常见元素定位方法和操作的学习介绍
- react-router4.x 组件和api介绍
- Spread表格组件For JAVA功能介绍—表格相关操作
- nodejs URL模块操作URL相关方法介绍
- Selenium常见元素定位方法和操作的学习介绍-python爬虫
- react之相关组件API
- reactJS -- 9 组件的Refs(操作DOM的两种方法)
- MongoDB3.2中与DB数据库操作相关常用方法介绍
- react组件API的7个方法
- React 组件的API（组件实例）介绍
- [python爬虫] Selenium常见元素定位方法和操作的学习介绍
- JS(JQuery)操作Array的相关方法介绍
- jQuery操作元素内容的相关方法
- Selenium常见元素定位方法和操作的学习介绍
- [python爬虫] Selenium常见元素定位方法和操作的学习介绍
- nodejs URL模块操作URL相关方法介绍
- react-redux高阶组件connect方法使用介绍以及实现原理
- 获取iframe中的内容、查找获取指定元素（关于用c++调用WEBBROWSER控件，使用相关接口操作web页面元素的一些方法)