当通过调用React.creatClass()
来生成一个组件类的时候,你需要提供一个规范对象作为参数传入,这个规范对象必须包含render
方法以及包含其他可选的生命周期方法。
render()
方法是必须的。
当调用这个方法的时候,它会检查this.props
和this.state
并且返回一个子元素( child element )。这个子元素可以是一个虚拟的原生DOM标签也可以是我们之前定义好的一个组件。当然也可以返回null
或者false
值表示不想做任何渲染。
在render方法的背后,React渲染了一个<noscript>
标签以及运行diff
算法。当返回null
或者false
值时,ReactDOM.findDOMNode(this)
将返回null
。reder()
方法需要纯净,即它不能修改组件的state
,它每次调用所返回的值都需相同,并且它不能读写DOM或者和浏览器有互动操作(例如使用setTimeout()
)。如果你需要和浏览器之间进行互动,那么将这些内容写入到componentDidMount()
或者其他生命周期方法中。
这个方法在组件被挂载前调用一次,它的返回值会被用来初始化this.state
。
这个方法在组件类创建的时候调用一次并将值缓存(意味着相同的组件重新挂载的时候这个方法不会被调用)。 如果组件的prop不是从父组件传进来,那么这些值将会用来初始化this.props
。
这个方法是在任何实例被创建前调用。另外,这个方法返回的任何复杂类型值都会在实例之间共享而不是拷贝。
propTypes
对象允许你验证传递给组件的props
的值是否符合要求,想要了解更多关于propTypes
的内容请看可复用的组件
mixins
数组允许你使用mixins
来在多个组件之间共享一些行为。想要了解更多信息,请参阅可复用的组件
statics
对象允许你定义一些静态方法,这些方法可以在组件类中被调用。例如
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
render: function() {
}
});
MyComponent.customMethod('bar'); // true
静态方法意味着你可以在任何组件实例被创建之前调用这些方法,当然这些方法也因此无法获取你组件的props
和state
。如果你想要在静态方法中使用props
或者state
,那么在调用这些方法的时候将props
或state
作为参数传递进去。
displayName
字符串会在debug中用到,详情参见https://facebook.github.io/re...
不同的方法会在组件生命周期中不同的时间点执行。
在服务器端和在客户端调用一次,在初始化render
执行之前。如果在这个方法里面调用setStat
e,render()
方法只会执行一次尽管state
发生了改变。
仅仅在客户端调用一次,在初始化render
发生之后立即被调用,在这个方法中你可以获取到组件中的任何子节点。因为子组件的componentDidMount()
方法调用是在父组件之前。
如果你想整合其他js框架,例如使用setTimeout
或者setInterval
来设置时间或者发送AJAX
请求,那么都可以在这个方法里面书写。
这个方法是在组件接收到新的props
的时候调用,在组件初始化渲染的时候不会调用此方法。
通过this.setState()
来更新状态可以导致对render()
方法的一次调用,而 componentWillReceiveProps
可以让你在render()
调用之前来改变prop值。此时,旧的props
可以通过this.props
访问到,这个函数里面调用this.setSteate()
不会触发额外的一次渲染。
备注1:常常出现的一个错误用法是认为在这个生命周期方法中props
已经改变。
备注2:没有componentWillReceiveState
这个相似的生命周期方法。prop
的改变会导致状态的改变,但反过来讲就是不对的。如果你需要在state值改变时进行一些操作,请使用componentWillUpdate
这个方法。
当组件接收到新的props
或者state
,在重新渲染之前会调用这个方法,然后根据返回值(true
或者false
来决定是否进行重新渲染)。这个方法在首次渲染的时候是不调用的或者在forceUpdate
的时候是不会被调用的。
这个方法默认返回true
,但是如果你确认新的props
和state
不需要引起组件更新的情况下可以让它返回false值。
如果shouldComponentUpdate
返回false
,那么便会完全跳过之后的render
直到下一次state
的改变。除此之外componentWillUpdate
和componentDidUpdate
方法也不会被调用。
默认情况下, shouldComponentUpdate
总是返回true
来避免当state
为mutated
的时候导致的微妙的bug,但是如果你小心地总是将state
作为不可变数据,那么你可以重写 shouldComponentUpdate
方法来根据新旧props
和state
的对比来确定返回true
或者是false
。
如果在组件数目庞大的情况下遇到性能瓶颈,那么在这个方法里做一些优化来加速你的app。
当组件接收到新的props
或者state
,在重新渲染之前会调用这个方法。 这个方法在首次渲染的时候是不调用的或者在forceUpdate的时候是不会被调用的。
注意:这个方法里不能调用this.setState()
。
这个方法在组件更新并且重新刷新DOM之后被调用。 在首次渲染的时候是不调用的或者在forceUpdate
的时候是不会被调用的。
这个方法提供了组件更新后操作DOM节点的机会。
在组件从DOM中卸载之后被立即调用。
你可以在这个方法做一些必要的清除工作,比如一些计时器或者清除一些在componentDidMount
方法中添加的一些DOM元素。