react17中生命周期改变，组件挂载流程微调

react17的版本更新了，作了一些更新，最近学习了新版的生命周期，来使用对比16.8的版本

旧版本：

新版本：

能够看到新版的生命周期中 componentWillMount, componentWillReceiveProps, componentWillUpdate 三个生命周期被干掉了，其实还没被干掉，使用时会报警告：（componentWillReceiveProps也同样的警告）

为啥推荐加 UNSAFE_ 前缀，官方说明：新生命周期差别
目的是为了react18版本的 异步渲染更新，请移步官方去查看具体：异步渲染更新新特性探索

新生命周期里面，有两个函数 getDeriveStateFromProps，getSnapshotBeforeUpdate

getDeriveStateFromProps

从props获取一个派生的状态，在调用 render 方法以前调用，函数必须返回一个状态对象或者 null,

// 使用方法，必须加 static ！！！
static getDerivedStateFromProps(props, state)

若是在 getDerivedStateFromProps 中返回了一个状态对象（跟定义的state中同样），视图中的值会被函数返回值拦截并赋值为当前函数返回的状态对象中的值，而且对state内容操做，视图也不会更新（卸载组件仍是没影响）。

使用不多

// state的值跟随props值变动而变动
// 例如判断props内值是奇数仍是偶数，来肯定用state仍是用props
// 官方举例实现 <Transition> 组件很容易，跟随信息判断哪些组件作动画
static getDerivedStateFromProps(props, state) {
    props.xx === xx ? props : state;
}

getSnapshotBeforeUpdate

获取更新前的快照，从 DOM 中捕获一些信息（例如，滚动位置）。今生命周期的任何返回值将做为参数传递给 componentDidUpdate()。应返回 snapshot 的值（或 null）

什么是 snapshot ？？

答案是什么均可以！！！灵活的js，哈哈哈

结合上述，咱们的 componentDidUpdate() 方法中的参数就应该是 prevProps, prevState

来个例子，滚动位置定位

class NewsList extends React.Component{
    state = {newsArr:[]}
    componentDidMount(){
        setInterval(() => {
            //获取原状态
            const {newsArr} = this.state
            //模拟一条新闻
            const news = '新闻'+ (newsArr.length+1)
            //更新状态
            this.setState({newsArr:[news,...newsArr]})
        }, 1000);
    }
    getSnapshotBeforeUpdate(){
        // 返回每一条新闻的高度，就是咱们说的，
        return this.refs.list.scrollHeight
    }
    componentDidUpdate(prevProps, prevState, height){
        // 计算滚动到当前想显示的条目位置而且保持不动
        // height就是咱们说的 snapshot 的值！！！！
        this.refs.list.scrollTop += this.refs.list.scrollHeight - height
    }
    render(){
        return(
            <div className="list" ref="list">
                {
                    this.state.newsArr.map((n,index)=>{
                        return <div key={index} className="news">{n}</div>
                    })
                }
            </div>
        )
    }
}
ReactDOM.render(<NewsList/>,document.getElementById('test'))