React生命周期总结

生命周期（新）

先看图

对比 （旧）生命周期

对比俩张图发现，旧版的废弃了三个”will”,引来了俩个”get”

废弃：

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

新增：

• getDerivedStateFromProps
• getSnapshotbeforeUpdate

getDerivedStateFromProps

1. 是个静态方法，需要在前面加个static，否则会报错，如下：

Lifecycle method should be static: getDerivedStateFromProps

2. 必须返回属性对象或者 null，否则报错，如下：

A valid state object (or null) must be returned. You have returned undefined.

3. 可以传参数
   参数：新的属性对象(内部数据state)，旧的状态对象（外部数据props）

官网也提出了，这个钩子不建议使用， 因为 派生状态会导致代码冗余，并使组件难以维护。在这里不过多学习它了。

getDerivedStateFromProps

在更新之前获取快照

1. 有这个钩子必须也要有 componentDidUpdate 这个钩子，需要和它搭配使用
2. 必须有返回值，返回值 可以是 值，也可以是null

  getSnapshotBeforeUpdate(){
  console.log('getSnapshotBeforeUpdate--count')
  return 'Wangpf'
  }


componentDidUpdate(preProps, preState, snapShotValue){
  console.log('componentDidUpdate--count组件更新完毕后', preProps, preState, snapShotValue);
  // preProps 外部数据更新前的值
  // preState 内部数据更新前的值
  // snapShotValue 是在getDerivedStateFromProps钩子函数中所返回的值
}

getSnapshotBeforeUpdate

获取更新前的快照值，

举个例子：

import React, { Component } from 'react';

import './News.css';

class News extends Component {
    state = {
        newsArr: [],
    };

    componentDidMount() {
        setInterval(() => {
            const { newsArr } = this.state;
            const news = `新闻${newsArr.length + 1}`;

            this.setState({
                newsArr: [news, ...newsArr],
            });
        }, 1000);
    }

    getSnapshotBeforeUpdate() {
        return this.listHeight.scrollHeight;
    }

    componentDidUpdate(preProps, preState, height) {
        // 用更新之后的高度 减去 更新之前的高度 再 += 给 更新之后的所在的值
        // 这样旧能一直处于最底下了
        this.listHeight.scrollTop += this.listHeight.scrollHeight - height;
    }

    render() {
        const { newsArr } = this.state;
        return (
            <div className='list' ref={(c) => (this.listHeight = c)}>
                {newsArr.map((item, index) => {
                    return (
                        <div key={index} className='news'>
                            {item}
                        </div>
                    );
                })}
            </div>
        );
    }
}

export default News;

上述例子描述的是 ， 可以使用 该钩子来获取更新之前的 scroll 高度， 然后到它一直在滚动时，我希望它一直显示某个位置，而不是随之滚动，一直显示顶部。

总结

记住较为重要的几个钩子

1. render : 初始化渲染或者更新渲染时调用的
2. componentDidMount：组件挂载完毕后调用，用途如： 开启监听，发送 ajax 请求
3. componentWillUnmount： 组件将要卸载时调用， 用途如： 做一些收尾的工作，如清理定时器，取消订阅等。

废弃的钩子

1. componentWillMount
2. componentWillReceiveProps
3. componentWillUpdate

目前版本 17.0.1，目前使用的话，会出现警告，需要加上 前缀 UNSAFE_ 才行， 但官方说了在未来 18 版本之后很可能彻底废弃，因此不建议使用。