程序博客网 > 成熟电子病历系统源码

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

来源：互联网 发布：成熟电子病历系统源码 编辑：程序博客网 时间：2024/06/02 03:34


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


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：

// 引用Reactvar React = require('react');// 使用ReactReact.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);  // trueReact.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语法引用组件外，还可以使用以下两种方法：

  1. 使用createElement()方法创建ReactElement
  2. 使用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。


  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()


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：

// 引用Reactvar React = require('react');// 使用ReactReact.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);  // trueReact.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语法引用组件外，还可以使用以下两种方法：

  1. 使用createElement()方法创建ReactElement
  2. 使用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'));
1 0
成熟电子病历系统源码 成熟电子病历系统源码
原创粉丝点击
热门IT博客
淘宝微信返现是真的吗淘宝微信返现是真的吗
全知视角举例全知视角举例
美柚如何恢复数据
如何秒杀淘宝优惠券
诸暨市行知小学
短域名生成腾讯
centos 7 64位安装盘
淘宝不能晒单
数据宝官方网站
检测电脑硬件的软件
mac air 双系统
阿里云怎么解析
淘宝生发液骗局
知乎发帖被删
linux下搭建jenkins
linux 压缩成tar.gz
mac清理垃圾桶快捷键
阿里云服务器数据恢复
nginx ssl配置详解
51单片机引脚功能图文
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 瑜珈冥想 打坐冥想 冥想是什么 瑜伽 冥想 简单冥想术 穆旦 冥想 如何做冥想 冥想英文 高级冥想 光球冥想 轻松冥想 冥想是什么意思 冥想什么意思 冥想为什么不能在晚上 冥想5分钟等于熟睡一小时 冥想赵凯被判14年 瑜伽冥想引导词 2019年90068冥想开庭 苦思冥想近义词 90068冥想水怪截图 瑜伽语音冥想 冥想老婆兔小兔照片 2019年90068冥想坐牢 瑜伽冥想引导词静心篇 瑜伽冥想5分钟引导词 冥想入门训练 瑜伽冥想的好处 怎样冥想训练方法 瑜伽冥想引导词3分钟 蕙兰瑜伽冥想 冥想入门的七种方法 瑜伽冥想语音 如何打坐冥想 儿童冥想训练 瑜伽呼吸冥想 蕙兰冥想瑜伽 瑜伽语音冥想引导词 深度瑜伽冥想催眠 冥想瑜伽教程 冥想五分钟等于熟睡一小时 冥想有什么好处

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里