React Component通过React.reateClass()方法创建,可以向createClass传入一个对象,作为specification来描述React Component的创建和更新。

其中,render方法是specification必须要提供的,其他的属性和方法可以为空。

Specification

下面介绍一下specification的详细配置。

mixins

Array。可以传入一个数组,每个数组元素是一个Specification对象,会mixin入component的specification中。在mixin的时候,React会先混入mixins中的spec,然后再混入specification中的其他方法和属性。

react/lib/ReactClassReactClass.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var MIXINS_KEY = 'mixins';

var RESERVED_SPEC_KEYS = {
mixins: function (Constructor, mixins) {
if (mixins) {
for (var i = 0; i < mixins.length; i++) {
mixSpecIntoComponent(Constructor, mixins[i]);
}
}
}
};

function mixSpecIntoComponent(Constructor, spec) {
if (spec.hasOwnProperty(MIXINS_KEY)) {
RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
}

for (var name in spec) {
// 读取spec.mixins外的属性
}
}

statics

object。存储React Component构造函数的静态方法和属性。属性和方法将赋值给构造函数,而不是构造函数的prototype。

propTypes

object。定义props中各prop的数据类型。

contextTypes

object。定义context中各个值的类型。

childContextTypes

object。定义组件将传给子组件的context的各个值的类型。

getDefaultProps

function,返回object。组件被挂载时会调用。返回的object的属性会被赋值给this.props,作为prop的默认值。

getDefaultProps方法在getInitialState方法前调用。因此方法中不能使用this.state或者this.setState()

getInitialState

function,返回object。在组件挂载前调用,获取初始的this.state。只调用一次。

1
2
3
4
5
6
getInitialState: function() {
return {
isOn: false,
fooBaz: new BazFoo()
}
}

getChildContext

function,返回object。计算子组件需要的context。

render

function,返回ReactComponent。定义组件需要渲染的DOM结构,返回React Component。

1
2
3
4
render: function() {
var name = this.props.name;
return <div>Hello, {name}!</div>;
}

render函数是经常会被调用的函数,props或者state的修改经常会引起它的调用。所以render函数最好是无副作用的,不应该在其中调用setState,或者异步调用等。

componentWillMount

function。只调用一次。component首次构造时调用,在component挂载前调用。异步调用,监听,数据创建等工作可以在这里进行。

componentDidMount

function。组件挂载后会调用componentDidMount(),但这时候的DOM节点不一定渲染到了document中。

componentWillReceiveProps

function。当组件收到新props时,该方法会被调用。

1
2
3
4
5
componentWillReceiveProps: function(nextProps, nextContext) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}

shouldComponentUpdate

function, 返回boolean。当this.propsthis.statethis.context发生更新时,决定component是否发生更新。当return false时,组件不会发生更新。

1
2
3
4
5
shouldComponentUpdate: function(nextProps, nextState, nextContext) {
return !equal(nextProps, this.props) ||
!equal(nextState, this.state) ||
!equal(nextContext, this.context);
}

componentWillUpdate

当组件即将要发生更新时,React会调用该方法。一般是在this.propsthis.statethis.context更新为nextPropsnextStatenextContext

1
2
3
4
5
6
7
8
/**
*
* @param {object} nextProps
* @param {?object} nextState
* @param {?object} nextContext
* @param {ReactReconcileTransaction} transaction
*/
componentWillUpdate: function () {}

该方法不能调用this.setState()

componentDidUpdate

当component的DOM描述更新后,会调用该方法。可以在该方法中处理更新后的DOM。

1
2
3
4
5
6
7
8
/**
*
* @param {object} prevProps
* @param {?object} prevState
* @param {?object} prevContext
* @param {DOMElement} rootNode DOM element representing the component.
*/
componentDidUpdate: function () {}

componentWillUnmount

当component将要从父component中移除并销毁的时候,会调用该方法。可以在该方法中释放一些资源。

updateComponent

更新组件当前已挂载的DOM描述。

默认情况下 是在该方法中实现React的渲染和调和。调用者可以在该方法中复写。

Lifecycle

初始化

初始化中依次会执行

  • constructor
  • componentWillMount
  • render
  • componentDidMount

更新

更新时会一次执行

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillupdate
  • render
  • componentDidUpdate

销毁

销毁时会执行

  • componentWillUnmount

参考文章

React: State and Lifecycle
一、组件的详细说明和生命周期ComponentSpecs and Lifecycle