1.getDerivedStateFromProps
这个生命周期函数是为了替代componentWillReceiveProps存在的，所以在你需要使用componentWillReceiveProps的时候，就可以考虑使用getDerivedStateFromProps来进行替代了。
两者的参数是不相同的，而getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。
需要注意的是，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾。
static getDerivedStateFromProps(nextProps, prevState) {
const {type} = nextProps;
// 当传入的type发生变化的时候，更新state
if (type !== prevState.type) {
return {
type,
};
}
// 否则，对于state不进行任何操作
return null;
}
//老生命周期
//(1) componentWillMount, 在 ssr 中 这个方法将会多次被调用，所以会重复触发多遍，同时在这里如果绑定事件，将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃。
//(2) componentWillReceiveProps 外部组件频繁更新传入多次不同的props，会导致不必要的异步请求
//(3) ccomponentWillupdate ,更新前记录 DOM状态，可能会做一些处理，与 componentDidUpdate 相隔事件如果过长，会导致状态不太信
//新生命周期的替代
// getDerivedStateFromProps 第一次初始化组件一级后续的更新过长中（包括资深状态更新以及父传子） 返回一个对象做为新的state,返回null则说明不需要在这里更新state
import React, { Component } from 'react'
export default class app extends Component {
state = {
myname: 'lele',
myage:100
}
//componentWillMount 初始化，第一次修改状态
static getDerivedStateFromProps(nextProps,nextState) {
console.log("getDerivedStateFromProps")
return {
myname: nextState.myname.substring(0,1).toUpperCase()+nextState.myname.substring(1)
}
}
render() {
return (
<div>{this.state.myname } {this.state.myage }</div>
)
}
}
import React, { Component } from 'react'
import Axios from 'axios'
import './../01-base/css/01-index.css'
class Child extends Component {
state = {
list: []
}
componentDidMount() {
if (this.props.type == 1) {
console.log("卖座正在热映的电影")
Axios.get('./test.json').then((res) => {
this.setState({
list: res.data[2].list
})
})
} else {
console.log("卖座即将上映的电影")
}
}
render() {
return (
<div>
Films-{this.props.type}
<ul>
{this.state.list.map((item, index) =>
<li key={index}>
{item.name}
</li>
)}
</ul>
</div>
)
}
//这个生命周期函数是为了替代componentWillReceiveProps存在的，所以在你需要使用componentWillReceiveProps的时候，就可以考虑使用getDerivedStateFromProps来进行替代了。
//两者的参数是不相同的，而getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。
static getDerivedStateFromProps(nextProps, nextState) {
console.log(nextProps.type+"qingqing")
return {
type:nextProps.type
}
}
componentDidUpdate(prevProps, prevState) {
console.log(this.state.type+"!11", prevState)
if (this.state.type === prevState.type) {
return
}
if (this.state.type=== 1) {
console.log("卖座正在热映的电影")
Axios.get('./test.json').then((res) => {
this.setState({
list: res.data[2].list
})
})
}
if (this.state.type === 2) {
console.log("卖座即将上映的电影")
Axios.get('./test-1.json').then((res) => {
this.setState({
list: res.data[2].list
})
})
}
}
}
export default class app extends Component {
state = {
type:1
}
render() {
console.log('render2')
return (
<div>
<ul className="tab" >
<li className={this.state.type==1 ? 'active' :''} onClick={() => this.setState({type:1})}>正在热映</li>
<li className={this.state.type==2 ? 'active' :''} onClick={() => this.setState({type:2})}>即将上映</li>
</ul>
<Child type={this.state.type} />
</div>
)
}
}
2.getSnapshotBeforeUpdate
import React, { Component } from 'react'
export default class app extends Component {
state = {
mytext:"11111"
}
render() {
console.log('render')
return (
<div>
<button onClick={() => this.setState({mytext:"2222"})}>click</button>
{this.state.mytext}
</div>
)
}
getSnapshotBeforeUpdate() {
console.log("getSnapshotBeforeUpdate")
return 111;
}
componentDidUpdate(prevProps, prevState,value) {
console.log("componentDidUpdate",value) //componentDidUpdate,1111
}
}
import React, { Component } from 'react'
export default class app extends Component {
state = {
list:[1,2,3,4,5,6,7,8,9]
}
myref = React.createRef()
render() {
console.log('render')
return (
<div>
<h1>邮箱的应用</h1>
<button onClick={() => this.setState({list:[...[11,12,13,14,15,16,17,18,19,20,21,22],...this.state.list]})}>来邮件</button>
<div id="box" style={{height:'200px',overflow:"auto",background:"#eee"}} ref={this.myref}>
<ul>
{
this.state.list.map(item => <li key={item} > {item}</li>)
}
</ul>
</div>
</div>
)
}
getSnapshotBeforeUpdate() {
console.log(this.myref.current.scrollHeight)
return this.myref.current.scrollHeight;
}
componentDidUpdate(prevProps, prevState, value) {
console.log("componentDidUpdate", value)
this.myref.current.scrollTop+=this.myref.current.scrollHeight-value
console.log(this.myref.current.scrollHeight)
}
}
