Mounting / 挂载阶段
getDefaultProps->getInitialState->componentWillMount -> render ->componentDidMount
getDefaultProps 初始化props
- 在这里可以给组件预设默认的Props值，防止组件渲染报错
// 旧写法
getDefaultProps() {
return {
style: {}
}
}
// ES6
static defaultProps = {
style: {}
}
getInitialState 初始化state
// 旧写法
getInitialState() {
return { visible: false }
}
// ES6
constructor(props) {
super(props);
this.state = { visible: false }
}
// 或直接在组件第一层写
class MyComponent extends React.Component {
constructor() {}
state = { visible: false }
// ...
}
componentWillMount 准备挂载组件
- 在此处可以做一些组件准备动作
componentWillMout() {
// 第一次挂载时不可见，就不挂载，避免默认不可见时也fadeOut
if(this.state.visible) {
this.render = this.renderBody
}
}
renderBody() {
return (<div className={this.state.visible ? 'fadeOut' : 'fadeIn'>延迟加载的文字</div>)
}
render() {
return <div/>
}
render 渲染组件
render() {
// 注意此处需要保证有且只有一个组件返回，如果实在不想渲染一个元素，可以返回<noscript>
return <div/>
}
componentDidMount 组件挂载完毕
- 可以在此处执行与服务端的交互
componentDidMount() {
// 只有不在挂载中或更新中状态的生命钩子才可以获取到this.refs
console.log(this.layer);
}
render() {
return <div ref={c=> this.layer = c}>哈哈</div>
}
Updating / 更新阶段
componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
componentWillReceiveProps 组件将接收并更新Props
- 这个钩子可以在组件props发生变动时帮助我们执行一些相应操作，在这个钩子中可以执行setState更新状态
componentWillReceiveProps (nextProps) {
if(this.props.index !== nextProps.index) {
// 当外部传入的index发生变化时，组件执行一些操作...
}
}
shouldComponentUpdate 组件是否应该更新
- 当整个应用update频繁时，可以通过这个钩子对本组件的更新进行控制，防止无用刷新，可提高性能
shouldComponentUpdate(nextProps, nextState) {
// 根据state数据的时间戳来决定是否应该更新组件
return this.state.timeStamp !== nextState.timeStamp
}
componentWillUpdate 准备更新组件
- 此处不应该setState，可能造成过渡更新
componentWillUpdate(nextProps, nextState) {
if(this.props.childCount !== nextProps.childCount) {
// childCount发生了变化，对应做出操作
}
}
render 渲染（更新）组件
- 与Mounting阶段相似
componentDidUpdate 组件更新完毕
componentDidUpdate(prevProps, prevState) {
}
Unmounting / 卸载阶段
componentWillUnmount
componentWillUnmount 准备卸载组件
- 可以在此处对组件状态、store数据、定时器等等进行清除
componentDidMount() {
// 组件挂载完毕之后开始执行定时器
this.timer = window.setInterval(()=> {
// 定时器执行的一些操作
}, 300)
}
componentWillUnmount() {
// 组件卸载时清除定时器，防止内存消耗
window.clearInterval(this.timer);
}
