render

在使用React.createClass创建一个组件类的时候,必须要提供一个render方法,其它的生命周期相关方法是可选的。

当组件的render方法被调用的时候,它会检查this.propsthis.state,然后返回一个单独的子元素。所谓一个单独的子元素,即最外层只能是一个元素,无论它内部有多少层嵌套,例如下面的例子就是错误的:

var Component = React.createClass({
	render: function(){
		return (
			<div>a div</div>
			<div>another div</div>
		);
	}
});

如果该组件不需要渲染,render方法可以返回nullfalse,此时,React会为该组件创建一个<noscript>标签,并且此时React.findDOMNode(this)得到的也是null

render方法应当是纯净的,也就是说,它仅仅关注于如何渲染组件,而不能够改变组件的状态,也不能够与浏览器有任何的交互。事实上,react的主要任务就是,在其它数据(this.propsthis.state等)给定的情况下,应当如何进行渲染,而至于数据的获取、交互等等功能则由组件的其它方法来完成。

组件相关的方法

  • render()
  • getInitialState() 获取this.state的初始值,该方法只在组件加载到文档中之前执行一次
  • getDefaultProps() 在组件类被创建的时候会被调用一次,该方法会在任何该类的实例生成之前调用,且其中的对象会被所有实例共享
  • propTypes 用来验证传入的属性值的类型
  • mixins 用于在多种组件之间共享一些行为
  • statics 用于定义静态方法,例如:
var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true
  • displayName JSX会自动设置该字段

组件生命周期相关的方法

  • componentWillMount()
  • componentDidMount()
  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • componentDidUpdate()
  • componentWillUnmount()

参考