组件的生命周期
- 简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期
组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！
- 通过这个函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为
- react component
- React Native 中组件的生命周期
- React 生命周期的管理艺术
- 智能组件和木偶组件
组件生命周期函数总览
- 组件的生命周期包含三个阶段：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）
- Mounting：
constructor()
componentWillMount()
render()
componentDidMount()
- Updating
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
- Unmounting
componentWillUnmount()
组件生命周期 - 创建阶段(Mounting)
- 特点：该阶段的函数只执行一次
constructor()
- 作用：1 获取props 2 初始化state
- 说明：通过
constructor()的参数props获取 - 设置state和props
class Greeting extends React.Component {
constructor(props) {
// 获取 props
super(props)
// 初始化 state
this.state = {
count: props.initCount
}
}
}
// 初始化 props
// 语法：通过静态属性 defaultProps 来初始化props
Greeting.defaultProps = {
initCount: 0
};
componentWillMount()
- 说明：组件被挂载到页面之前调用，其在render()之前被调用，因此在这方法里
同步地设置状态将不会触发重渲染 - 注意：无法获取页面中的DOM对象
- 注意：可以调用
setState()方法来改变状态值 - 用途：发送ajax请求获取数据
componentWillMount() {
console.warn(document.getElementById('btn')) // null
this.setState({
count: this.state.count + 1
})
}
render()
-
作用：渲染组件到页面中，无法获取页面中的DOM对象
-
注意：不要在render方法中调用
setState()方法，否则会递归渲染- 原因说明：状态改变会重新调用
render()，render()又重新改变状态
- 原因说明：状态改变会重新调用
render() {
console.warn(document.getElementById('btn')) // null
return (
<div>
<button id="btn" onClick={this.handleAdd}>打豆豆一次</button>
{
this.state.count === 4
? null
: <CounterChild initCount={this.state.count}></CounterChild>
}
</div>
)
}
componentDidMount()
- 1 组件已经挂载到页面中
- 2 可以进行DOM操作，比如：获取到组件内部的DOM对象
- 3 可以发送请求获取数据
- 4 可以通过
setState()修改状态的值 - 注意：在这里修改状态会重新渲染
componentDidMount() {
// 此时，就可以获取到组件内部的DOM对象
console.warn('componentDidMount', document.getElementById('btn'))
}
组件生命周期 - 运行阶段（Updating）
- 特点：该阶段的函数执行多次
- 说明：每当组件的
props或者state改变的时候，都会触发运行阶段的函数
componentWillReceiveProps()
- 说明：组件接受到新的
props前触发这个方法 - 参数：当前组件
props值 - 可以通过
this.props获取到上一次的值 - 使用：若你需要响应属性的改变，可以通过对比
this.props和nextProps并在该方法中使用this.setState()处理状态改变 - 注意：修改
state不会触发该方法
componentWillReceiveProps(nextProps) {
console.warn('componentWillReceiveProps', nextProps)
}
shouldComponentUpdate()
- 作用：根据这个方法的返回值决定是否重新渲染组件，返回
true重新渲染，否则不渲染 - 优势：通过某个条件渲染组件，降低组件渲染频率，提升组件性能
- 说明：如果返回值为
false，那么，后续render()方法不会被调用 - 注意：这个方法必须返回布尔值！！！
- 场景：根据随机数决定是否渲染组件
// - 参数：
// - 第一个参数：最新属性对象
// - 第二个参数：最新状态对象
shouldComponentUpdate(nextProps, nextState) {
console.warn('shouldComponentUpdate', nextProps, nextState)
return nextState.count % 2 === 0
}
componentWillUpdate()
- 作用：组件将要更新
- 参数：最新的属性和状态对象
- 注意：不能修改状态 否则会循环渲染
componentWillUpdate(nextProps, nextState) {
console.warn('componentWillUpdate', nextProps, nextState)
}
render() 渲染
- 作用：重新渲染组件，与
Mounting阶段的render是同一个函数 - 注意：这个函数能够执行多次，只要组件的属性或状态改变了，这个方法就会重新执行
componentDidUpdate()
- 作用：组件已经被更新
- 参数：旧的属性和状态对象
componentDidUpdate(prevProps, prevState) {
console.warn('componentDidUpdate', prevProps, prevState)
}
组件生命周期 - 卸载阶段（Unmounting）
- 组件销毁阶段：组件卸载期间，函数比较单一，只有一个函数，这个函数也有一个显著的特点：组件一辈子只能执行依次！
- 使用说明：只要组件不再被渲染到页面中，那么这个方法就会被调用（ 渲染到页面中 -> 不再渲染到页面中 ）
componentWillUnmount()
-
作用：在卸载组件的时候，执行清理工作，比如
- 1 清除定时器
- 2 清除
componentDidMount创建的DOM对象
本文引自部分* React入门看这篇就够了
网友评论