React Top-Level API

概述

Components

React组件让你将UI拆分成独立、可复用的片段，能独立地思考各个片段。可以通过继承React.Component和React.PureComponent两个类创建React组件。

  • React.Component
  • React.PureComponent

不使用ES6的class，则需要使用下面方法创建React组件：

  • createClass()

创建React元素

推荐使用JSX（React.createElement()语法糖），或者直接使用以下方法：

  • createElement()
  • createFactory()

参考Use React Without JSX

修改元素

  • cloneElement()
  • isValidElement()
  • React.Children

参考手册

React.Component

React.Component是使用ES6语法定义组件类时的基类。

1
2
3
4
5
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

查看React.Component API 参考手册，了解更多基类的属性和方法。

React.PureComponent

React.PureComponent类似React.Component，但实现了shouldComponentUpdate()，在该生命周期钩子中对props和state的浅比较，决定是否重新渲染组件。

如果你的React组件的render方法，在props和state相同时返回同样的结果，那么你可以使用React.PureComponent提升性能。

注释：
React.PureComponent的shouldComponentUpdate()中仅做浅比较。如果state或prop中包含复杂的数据结构（如属性值为数组、对象等），将可能带来错误的比较结果。仅在确定数据结构简单时继承React.PureComponent，或在已知深层数据变动时手动调用forceUpdate()更新组件。也可以考虑使用immutable objects来快速比较嵌套数据。

React.PureComponent的shouldComponentUpdate()将跳过整个子组件树的prop更新。请确保所有子组件是纯净的。

createClass()

1
React.createClass(specification)

如果你没有使用ES6，你可能需要使用React.createClass()来创建React组件class。

1
2
3
4
5
var Greeting = React.createClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

createElement()

1
2
3
4
5
React.createElement(
  type,
  [props],
  [...children]
)

创建并返回一个新的指定类型type的React元素。type参数可以是标签名字符串（如’div’或’span’），或者React组件的类型（class或function）。

使用JSX编写的代码，最终会转化成调用React.createElement()的代码，你不用显示地调用React.createElement()。

cloneElement()

1
2
3
4
5
React.cloneElement(
  element,
  [props],
  [...children]
)

克隆React并返回一个新的React元素，该元素的props为[props]参数与element的props浅合并的结果。新的[...children]将替换原children。原element上的key和ref属性将保留。

React.cloneElement()写法等同于：

1
<element.type {...element.props} {...props}>{children}</element.type>

它也会保留refs。这意味着，如果得到一个有ref的子元素，你不会不小心从你的祖先偷走它。在新元素上会附有同样的ref。

这个API用于替代废弃的React.addons.cloneWithProps()。

createFactory()

1
React.createFactory(type)

返回创建指定类型type的React元素的函数。类似React.createElement()，type可以是标签名字符串（如’div’或’span’），或者React组件的类型（class或function）。

这个方法比较老旧，建议使用JSX或者React.createElement()代替。

isValidElement()

1
React.isValidElement(object)

检验object是否是React元素。返回true或false。

React.children

见React.Children