javascript - 相当于使用 React hooks 的 componentDidUpdate

Question

tldr; 如何模拟 componentDidUpdate 或以其他方式使用带有数组的 key 属性来强制重置我的组件？

我正在实现一个组件，它显示计时器并在计时器达到零时执行回调。回调的目的是更新对象列表。后一个组件由新的 React hooks 制成。 useState 和 useEffect。

state 包含对计时器启动时间和剩余时间的引用。 effect 设置一个每秒调用的时间间隔来更新剩余时间，并检查是否应该调用回调。

该组件并不意味着重新安排计时器，或者在达到零时保持间隔继续，它应该执行回调并空闲。为了刷新计时器，我希望将一个数组传递给key，这将导致组件的状态被重置，从而计时器将重新启动。不幸的是 key 必须与字符串一起使用，因此无论我的数组的引用是否更改都不会产生任何效果。

我还尝试通过传递我关心的数组来推送对 props 的更改，但状态得到了维护，因此间隔没有重置。

观察数组中浅层变化以强制仅使用新的 hooks API 更新状态的首选方法是什么？

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';

function getTimeRemaining(startedAt, delay) {
    const now = new Date();
    const end = new Date(startedAt.getTime() + delay);
    return Math.max(0, end.getTime() - now.getTime());
}

function RefresherTimer(props) {
    const [startedAt, setStartedAt] = useState(new Date());
    const [timeRemaining, setTimeRemaining] = useState(getTimeRemaining(startedAt, props.delay));

    useEffect(() => {

        if (timeRemaining <= 0) {
            // The component is set to idle, we do not set the interval.
            return;
        }

        // Set the interval to refresh the component every second.
        const i = setInterval(() => {
            const nowRemaining = getTimeRemaining(startedAt, props.delay);
            setTimeRemaining(nowRemaining);

            if (nowRemaining <= 0) {
                props.callback();
                clearInterval(i);
            }
        }, 1000);

        return () => {
            clearInterval(i);
        };
    });

    let message = `Refreshing in ${Math.ceil(timeRemaining / 1000)}s.`;
    if (timeRemaining <= 0) {
        message = 'Refreshing now...';
    }

    return <div>{message}</div>;
}

RefresherTimer.propTypes = {
    callback: PropTypes.func.isRequired,
    delay: PropTypes.number
};

RefresherTimer.defaultProps = {
    delay: 2000
};

export default RefresherTimer;

尝试与key一起使用:

<RefresherTimer delay={20000} callback={props.updateListOfObjects} key={listOfObjects} />

尝试与 Prop 更改一起使用:

<RefresherTimer delay={20000} callback={props.updateListOfObjects} somethingThatChanges={listOfObjects} />

listOfObjects 指的是一个对象数组，其中对象本身不一定会改变，因此该数组应该与 !== 进行比较。通常，该值来自 Redux，其中 updateListOfObjects 操作会导致数组重新初始化，如下所示:newListOfObjects = [...listOfObjects].

Answer 1

useRef 在功能组件中创建一个“实例变量”。它充当一个标志，指示它是处于挂载阶段还是处于更新阶段(没有更新状态)。

const mounted = useRef();
useEffect(() => {
  if (!mounted.current) {
    // do componentDidMount logic
    mounted.current = true;
  } else {
    // do componentDidUpdate logic
  }
});