004*：组件的生命周期（初始化、进行中、销毁）
目录
正文
1：生命周期-初始化
/* 目标 1：始化生命周期的执行过程 constructor(props) componentWillMount() render() componentDidMount() 2：理解生命周期的各个钩子函数的作用 */ import React, { Component } from 'react' export default class LifeCycleComponent extends Component { // 构造函数 constructor(props) { super(props) console.log('1:constructor') } /* 组件挂载之前执行 组件挂载之前，会执行constructor构造函数 组件渲染之前最后一次修改数据的计划 1：初始化数据的操作 在react16.2版本之之后，componentWillMount不安全 它的优先级别比较低，会被 render 或者 componentDidMount这些优先级高的打算，之后componentWillMount在重新执行。 导致componentWillMount执行多次，所以react16.3之后，componentWillMount被废弃了。 不是安全的。 */ componentWillMount() { console.log('2:componentWillMount') } /* 组件挂载之后执行 组件渲染之后的操作 1：请求数据 2：监听事件 3：定时器 4：订阅 5：其他 */ componentDidMount() { console.log('4:componentDidMount') } // 渲染函数 render() { console.log('3:render') return ( <div>生命周期-初始化</div> ) } }
2：生命周期-进行中1
/* demo 案例 1：一个标签，一个按钮，点击按钮，更新标签的内容 目的：查看生命周期的运行顺序 生命周期的注意： 运行中的生命周期会走多次，需要设置一个条件来区分。进行性能优化。 可以查询旧的属性和状态 */ import React, { Component } from 'react' export default class LifeCycleRunningComponent extends Component { state = { content: "11111" } shouldComponentUpdate(nextProps, nextState) { // 如果老的状态和新的状态一样，就不更新 // 如果老的状态和新的状态不一样，就更新，判断对象中的状态中的字符串是否一样 if (JSON.stringify(this.state) === JSON.stringify(nextState.state)) { return false; } else { return true; } } UNSAFE_componentWillUpdate(nextProps, nextState) { console.log("componentWillUpdate", nextProps, nextState) } componentDidUpdate(prevProps, prevState) { console.log("componentDidUpdate", prevProps, prevState) } render() { return ( <div> <button onClick={() => { this.setState({ content: "2222" }) }}>改变</button> <label>{this.state.content}</label> </div> ) } }
3：生命周期-进行中2
/* 目标 shouldComponentUpdate生命周期 作用：控制组件是否需要更新，返回 true 表示需要更新，false 表示不需要更新。 默认返回 true， 子组件主要用他来控制父组件的更新，父组件更新后，子组件是否需要更新。 demo 1：创建一个输入框，输入内容，控制是否渲染SCUComponent 2：创建一个 list，根据输入框输入的索引选中对应的 item */ import React, { Component } from 'react' export default class SCUComponent extends Component { state = { list: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"], selectIndex: 0 } // nextState 代表即将更新的 state // this.state 代表当前 state shouldComponentUpdate(nextProps, nextState) { console.log(nextState.selectIndex) console.log(this.state.selectIndex) // 判断是否需要更新， // 如果将要更新的 state 和当前 不相同state 相同 if (nextState.selectIndex !== this.state.selectIndex) { return true; } return false; } render() { return ( <div> <input type="text" onChange={ (event) => { this.setState({ selectIndex: Number(event.target.value) }) } }/> <ul> { this.state.list.map((item, index) => { return <li key={index} style={{ border: index === this.state.selectIndex ? "1px solid red" : "" }}>{item}</li> }) } </ul> </div> ) } shouldComponentUpdate(nextProps, nextState) { return true; } }
4：生命周期-进行中3
import React, { Component } from 'react'
class Child extends Component {
componentWillReceiveProps(nextProps) {
console.log("componentWillReceiveProps")
// 第一个接受到props的函数，可以利用属性来进行 ajax 请求或者逻辑操作
// 当父组件的 render 函数被调用时，所有子组件都会刷新一下.所以需要判断子组件是否需要更新
}
render() {
console.log("render")
return (
<div>Child</div>
)
}
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate")
return true
}
}
export default class CWRPComponent extends Component {
state = {
text: "11111"
}
render() {
return (
<div>
{this.state.text}
<button onClick={() => {
this.setState({
test: "2222"
})
} }>按钮</button>
<Child />
</div>
)
}
}
5：生命周期-demo
/* */ import axios from 'axios' import React, { Component } from 'react' export default class ComponentDemo extends Component { state = { type: 1 } render() { return ( <div> <ul> <li onClick={() => { this.setState({ type: 1 }) }}>正在上映</li> <li onClick={() => { this.setState({ type: 2 }) }}>即将上映</li> </ul> <VideoList type={this.state.type}></VideoList> </div> ) } } class VideoList extends Component { state = { list: [] } componentWillReceiveProps(nextProps) { if (nextProps.type === 1) { console.log('正在上映') axios({ url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=6164811", headers: { 'X-Client-Info': '{ "a": "3000", "ch": "1002", "v": "5.2.1", "e": "17053742704302745481773057"}', "X-Host": "mall.film-ticket.film.list" } }).then(res => { console.log(res.data.data.films) this.setState({ list: res.data.data.films }) }).catch(err => { console.log(err) }) } else if (nextProps.type === 2) { console.log('即将上映') axios({ url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=8896526", headers: { 'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17053742704302745481773057"}', 'X-Host': 'mall.film-ticket.film.list' } }).then(res => { console.log(res.data.data.films) this.setState({ list: res.data.data.films }) }).catch(err => { console.log(err) }) } console.log('componentWillReceiveProps', nextProps.type, 11111) } render() { return ( <div> {this.props.type === 1 ? <div>正在上映</div> : <div>即将上映</div>} <ul> { this.state.list.map((item, index) => { return <li key={item.filmId}>{item.name}</li> }) } </ul> </div> ) } }
6：生命周期-销毁
/* 生命周期-销毁 componentWillUnmount 作用：清除定时器，清除事件监听 */ import React, { Component } from 'react' export default class LifeCycleClearComponent extends Component { state = { isShow: true } render() { return ( <div> <h1>生命周期-销毁</h1> <button onClick={() => { this.setState({ isShow: !this.state.isShow }) }}>点击</button> {this.state.isShow && <Child></Child>} </div> ) } } class Child extends Component { componentDidMount() { this.timer = setInterval(() => { console.log('定时器') } , 1000) } // 组件销毁的时候调用 componentWillUnmount() { // 清除定时器 清除事件监听 console.log('组件销毁') // 清除定时器 clearInterval(this.timer) } render() { return ( <div>Child</div> ) } }
7：新生命周期-getDerivedStateFromProps
/* 新的生命周期：在初始化的时候执行，在更新的时候执行。 getDerivedStateFromProps 注意： 1：必须是static方法 2：必须写状态 3：必须返回一个对象， 对象中的属性就是state中的属性， 如果 state中没有这个属性就合并，有这个属性就替换。 */ import React, { Component } from 'react' export default class NewLiftComponent extends Component { state = { name: "张三", age: 8 } // 1：从props派生出state， 在初始化的时候，还有更新的时候执行 static getDerivedStateFromProps(nextProps, nextState) { console.log('getDerivedStateFromProps', nextProps, nextState) return { name: nextState.name, } } // 2：这个会执行多次，需要在之前之前判断是否更新 componentDidUpdate(prevProps, prevState) { console.log('componentDidUpdate', prevProps, prevState) // 判断是否更新 if (prevState.name === this.state.name) { return } console.log('更新') console.log(this.state.name) } // 3：在更新的时候执行 render() { console.log('render') return ( <div> <button onClick={() => { this.setState({ name: "李四", }) }}>更新 </button> <h1>{this.state.name}---{this.state.age}</h1> </div> ) } }
引用
