组件规范
当通过调用React.creatClass() 来生成一个组件类的时候,你需要提供一个规范对象作为参数传入,这个对象必须包含render 方法以及包含其他可选的生命周期方法。这些方法介绍如下。
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() 或者其他生命周期方法中。
getInitialState
这个方法在组件被挂载前调用一次,它的返回值会被用来初始化this.state 。
getDefaultProps
这个方法在组件类创建的时候调用一次并将值缓存(意味着相同的组件重新挂载的时候这个方法不会被调用)。 如果组件的prop不是从父组件传进来,那么这些值将会用来初始化this.props 。 这个方法是在任何实例被创建前调用。另外,这个方法返回的任何复杂类型值都会在实例之间共享而不是拷贝。
propTypes
propTypes 对象允许你验证传递给组件的props 的值是否符合要求,想要了解更多关于propTypes 的内容请看可复用的组件
mixins
mixins 数组允许你使用mixins 来在多个组件之间共享一些行为。想要了解更多信息,请参阅可复用的组件
statics
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
displayName 字符串会在debug中用到,详情参见https://facebook.github.io/re...
生命周期方法
不同的方法会在组件生命周期中不同的时间点执行。
Mouting:componentWillMount
在服务器端和在客户端调用一次,在初始化render 执行之前。如果在这个方法里面调用setStat e,render() 方法只会执行一次尽管state 发生了改变。
Mouting:componentDidMount
仅仅在客户端调用一次,在初始化render 发生之后立即被调用,在这个方法中你可以获取到组件中的任何子节点。因为子组件的componentDidMount() 方法调用是在父组件之前。 如果你想整合其他js框架,例如使用setTimeout 或者setInterval 来设置时间或者发送AJAX 请求,那么都可以在这个方法里面书写。
Updating: componentWillReceiveProps
这个方法是在组件接收到新的props 的时候调用,在组件初始化渲染的时候不会调用此方法。 通过this.setState() 来更新状态可以导致对render() 方法的一次调用,而 componentWillReceiveProps 可以让你在render() 调用之前来改变prop值。此时,旧的props 可以通过this.props 访问到,这个函数里面调用this.setSteate() 不会触发额外的一次渲染。
备注1:常常出现的一个错误用法是认为在这个生命周期方法中props 已经改变。 备注2:没有componentWillReceiveState 这个相似的生命周期方法。prop 的改变会导致状态的改变,但反过来讲就是不对的。如果你需要在state值改变时进行一些操作,请使用componentWillUpdate 这个方法。
Updating: shouldComponentUpdate
当组件接收到新的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。
Updating: componentWillUpdate
当组件接收到新的props 或者state ,在重新渲染之前会调用这个方法。 这个方法在首次渲染的时候是不调用的或者在forceUpdate的时候是不会被调用的。
注意:这个方法里不能调用this.setState() 。
Updating: componentDidUpdate
这个方法在组件更新并且重新刷新DOM之后被调用。 在首次渲染的时候是不调用的或者在forceUpdate 的时候是不会被调用的。 这个方法提供了组件更新后操作DOM节点的机会。
Unmounting: componentWillUnmount
在组件从DOM中卸载之后被立即调用。 你可以在这个方法做一些必要的清除工作,比如一些计时器或者清除一些在componentDidMount 方法中添加的一些DOM元素。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|