React 相关方法(API)介绍-元素与组件操作

 2016年01月24日    2522     声明


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


  1. React引用
  2. 元素操作API
  3. 组件操作API


1. React引用

React是React库的入口,React中所有的方法都是通过该对象调用,React支持AMDCommonJSCMD)两种规范引用。

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_TAGReactElement,其参数如下:

  • 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语法引用组件外,还可以使用以下两种方法:

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

创建后就不再需要使用JSXcerateElement()方法:

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