面试题：React新生命周期函数在复杂业务场景下的应用

使用新生命周期函数实现功能

getDerivedStateFromProps
- 此函数是一个静态方法，在组件挂载和更新时都会被调用。它接收props和state作为参数，并返回一个对象来更新状态，或者返回null表示不更新状态。
- 当组件需要根据props的变化来更新自身状态时，可以使用这个函数。例如，如果父组件传递的props中有一个数据列表，组件内部需要根据这个列表的变化来更新自己的状态，代码如下：

import React, { Component } from'react';

class ComplexComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataList: []
        };
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.data!== prevState.dataList) {
            return {
                dataList: nextProps.data
            };
        }
        return null;
    }

    render() {
        return (
            <div>
                {/* 根据state中的dataList进行渲染 */}
            </div>
        );
    }
}

getSnapshotBeforeUpdate
- 这个函数在组件更新前被调用，它接收prevProps和prevState作为参数。它的返回值会作为componentDidUpdate的第三个参数传递。
- 当需要在DOM更新之前捕获一些信息（例如滚动位置）时，这个函数很有用。比如，组件在更新时可能会改变列表的高度，而我们希望在更新后保持原来的滚动位置，代码如下：

import React, { Component } from'react';

class ComplexComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataList: []
        };
        this.listRef = React.createRef();
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.data!== prevState.dataList) {
            return {
                dataList: nextProps.data
            };
        }
        return null;
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        if (prevState.dataList.length!== this.state.dataList.length) {
            return this.listRef.current.scrollTop;
        }
        return null;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (snapshot!== null) {
            this.listRef.current.scrollTop = snapshot;
        }
    }

    render() {
        return (
            <div ref={this.listRef}>
                {/* 根据state中的dataList进行渲染 */}
            </div>
        );
    }
}

处理性能问题

避免不必要的更新
- 在getDerivedStateFromProps中，仔细比较nextProps和prevState，只有当props发生实际变化时才更新状态。例如上面的代码中，通过比较nextProps.data和prevState.dataList，避免了不必要的状态更新，从而减少了渲染次数。
- 对于getSnapshotBeforeUpdate，如果确定某些更新不会影响需要捕获的信息（如滚动位置），可以直接返回null，避免不必要的计算。
使用shouldComponentUpdate
- 虽然题目强调新的生命周期函数，但shouldComponentUpdate仍然是优化性能的重要手段。可以在这个函数中进行更细粒度的props和state比较，决定是否真正需要更新组件。例如：

shouldComponentUpdate(nextProps, nextState) {
    return nextProps.data!== this.props.data || nextState.dataList!== this.state.dataList;
}

处理数据一致性问题

getDerivedStateFromProps中的数据一致性
- 确保getDerivedStateFromProps中对props的处理是幂等的，即多次调用相同的props和state应该返回相同的结果。这样可以保证在多次更新过程中，状态更新的一致性。
- 当props变化导致状态更新时，要确保更新逻辑符合业务需求，避免出现数据不一致的情况。例如，如果props中的某个数据表示一个计数器，getDerivedStateFromProps应该正确地更新状态中的计数器值。
getSnapshotBeforeUpdate和componentDidUpdate中的数据一致性
- getSnapshotBeforeUpdate捕获的数据应该与componentDidUpdate中使用的数据相对应。例如，捕获滚动位置后，在componentDidUpdate中应该正确地将滚动位置恢复，确保用户体验的一致性。
- 在componentDidUpdate中，要注意处理可能由于异步操作或其他副作用导致的数据不一致。例如，如果在componentDidUpdate中发起一个API调用，要确保在数据更新后正确处理返回的数据，避免覆盖或破坏已有的数据一致性。

星途面试题库

面试题：React新生命周期函数在复杂业务场景下的应用

知识考点

面试题答案

使用新生命周期函数实现功能

处理性能问题

处理数据一致性问题