react的新生命周期函数

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)
    }
   
}