我们先来看一张图,其实看完这张图基本就懂了,如果还不懂,请继续往下看。
getDefaultProps
执行过一次后,被创建的类会有缓存,映射的值会存在this.props
,前提是这个prop不是父组件指定的
这个方法在对象被创建之前执行,因此不能在方法内调用this.props
,另外,注意任何getDefaultProps()
返回的对象在实例*享,不是复制
getInitialState
控件加载之前执行,返回值会被用于state的初始化值
componentWillMount
执行一次,在初始化render
之前执行,如果在这个方法内调用setState
,render()
知道state发生变化,并且只执行一次
render
render的时候会调用render()
会被调用
调用render()
方法时,首先检查this.props
和this.state
返回一个子元素,子元素可以是DOM组件或者其他自定义复合控件的虚拟实现
如果不想渲染可以返回null或者false,这种场景下,React渲染一个<noscript>
标签,当返回null或者false时,ReactDOM.findDOMNode(this)
返回null render()
方法是很纯净的,这就意味着不要在这个方法里初始化组件的state,每次执行时返回相同的值,不会读写DOM或者与服务器交互,如果必须如服务器交互,在componentDidMount()
方法中实现或者其他生命周期的方法中实现,保持render()
方法纯净使得服务器更准确,组件更简单
componentDidMount
在初始化render之后只执行一次,在这个方法内,可以访问任何组件,componentDidMount()
方法中的子组件在父组件之前执行
从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,或者发起网络请求
shouldComponentUpdate
boolean shouldComponentUpdate(object nextProps, object nextState)
这个方法在初始化render
时不会执行,当props或者state发生变化时执行,并且是在render
之前,当新的props
或者state
不需要更新组件时,返回false。
shouldComponentUpdate: function(nextProps, nextState) { return nextProps.id !== this.props.id; }
当shouldComponentUpdate
方法返回false时,讲不会执行render()
方法,componentWillUpdate
和componentDidUpdate
方法也不会被调用
默认情况下,shouldComponentUpdate
方法返回true防止state
快速变化时的问题,但是如果·state
不变,props
只读,可以直接覆盖shouldComponentUpdate
用于比较props
和state
的变化,决定UI是否更新,当组件比较多时,使用这个方法能有效提高应用性能
componentWillUpdate
void componentWillUpdate(object nextProps, object nextState)
当props
和state
发生变化时执行,并且在render
方法之前执行,当然初始化render时不执行该方法,需要特别注意的是,在这个函数里面,你就不能使用this.setState
来修改状态。这个函数调用之后,就会把nextProps
和nextState
分别设置到this.props
和this.state
中。紧接着这个函数,就会调用render()
来更新界面了
componentDidUpdate
void componentDidUpdate( object prevProps, object prevState )
组件更新结束之后执行,在初始化render
时不执行
componentWillReceiveProps
void componentWillReceiveProps(object nextProps)
componentWillReceiveProps
在将要接受新的props
时被调用。
当props
发生变化时执行,初始化render
时不执行,在这个回调函数里面,你可以根据属性的变化,通过调用this.setState()
来更新你的组件状态,旧的属性还是可以通过this.props
来获取,这里调用更新状态是安全的,并不会触发额外的render
调用
componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); }
这里我们可能会有疑问了,不是说props
是不可变状态吗?情况通常是这样的,但当一个父组件包含了一个子组件,子组件的一个props
的值是父组件的states
的值,那么当父组件可变状态改变时,子组件的props
也更新了,于是调用了这个函数。这个生命周期函数componentWillReceiveProps
提供了更新states
的机会,可以调用this.setState
,也是唯一可以在组件更新周期中调用this.setState
的函数。
子组件显示父组件穿过来的props
有两种方式:
1、直接使用
这种方式,父组件改变props
后,子组件重新渲染,由于直接使用的props
,所以我们不需要做什么就可以正常显示最新的props
class Child extends Component { render() { return <div>{this.props.someThings}</div> } }
2、转换成自己的state
这种方式,由于我们使用的是state
,所以每当父组件每次重新传递props
时,我们需要重新处理下,将props
转换成自己的state
,这里就用到了 componentWillReceiveProps
。
关于你提到的不会二次渲染
是这样的:每次子组件接收到新的props
,都会重新渲染一次,除非你做了处理来阻止(比如使用:shouldComponentUpdate
),但是你可以在这次渲染前,根据新的props
更新state
,更新state
也会触发一次重新渲染,但react
不会这么傻,所以只会渲染一次,这对应用的性能是有利的。
class Child extends Component { constructor(props) { super(props); this.state = { someThings: props.someThings }; } componentWillReceiveProps(nextProps) { this.setState({someThings: nextProps.someThings}); } render() { return <div>{this.state.someThings}</div> } }
componentWillUnmount
void componentWillUnmount()
当组件要被从界面上移除的时候,就会调用componentWillUnmount()
,在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等
总结
React的生命周期就介绍完了,其中最上面的虚线框和右下角的虚线框的方法一定会执行,左下角的方法根据props
state
是否变化去执行,其中建议只有在componentWillMount
,componentDidMount
,componentWillReceiveProps
方法中可以修改state
值,在componentWillUpdate和componentDidUpdate中修改会导致无限循环调用