等效于使用React挂钩的componentDidUpdate

Question

太长，读不下去了如何模拟componentdiddupdate或使用带有数组的键道具强制重置我的组件？

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

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

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

我还试图通过传递我所关心的数组来推动道具的变化，但状态保持不变，因此间隔没有重置。

为了强制仅使用新的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} />

尝试与道具更改一起使用：

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

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




Answer 1

使用自定义钩子

js prettyprint-override">export const useComponentDidUpdate = (effect, dependencies) => {
  const hasMounted = useRef(false);

  useEffect(
    () => {
      if (!hasMounted.current) {
        hasMounted.current = true;
        return;
      }
      effect();
    }, 
    dependencies
  );
};

初始渲染后，效果将不会运行。此后，它取决于应观察的值数组。如果为空，则将在每次渲染后运行。否则，它将在其中一个值发生更改时运行。

Answer 2

简言之，当数组的引用更改时，您希望重置计时器，对吗？如果是这样，您将需要使用一些扩散机制，一个基于纯钩子的解决方案将利用useffect的第二个参数，如下所示：

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

  //reset part, lets just set startedAt to now
  useEffect(() => setStartedAt(new Date()),
    //important part
    [props.listOfObjects] // <= means: run this effect only if any variable
    // in that array is different from the last run
  )

  useEffect(() => {
    // everything with intervals, and the render
  })
}

有关此行为的更多信息，请参见此处https://reactjs.org/docs/hooks-effect.html#tip-通过跳过效果优化性能

Answer 3

useRef在函数组件中创建一个实例变量。它充当一个标志，指示它是否处于挂载或更新阶段，而不处于更新状态。

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