reactjs - 'proper' 在使用钩子(Hook)间隔后更新 react 组件的方法是什么？

Question

我正在使用 React 支持钩子(Hook)的 alpha 版本，并且想要验证我在一段时间间隔后更新组件中文本的方法，而不会在 prop 更改时渲染组件的次数超过所需的次数.

EDIT: For clarity - this component is calling moment(timepoint).fromNow() within the formatTimeString function (docs here), so the update isn't totally unneccessary, I promise!

我以前有:

const FromNowString = ({ timePoint, ...rest }) => {
  const [text, setText] = useState(formatTimeString(timePoint));

  useEffect(() => {
    setText(formatTimeString(timePoint));
    let updateInterval = setInterval(
      () => setText(formatTimeString(timePoint)),
      30000
    );
    return () => {
      clearInterval(updateInterval);
    };
  }, [timePoint]);

  // Note the console log here is so we can see when renders occur
  return (
    <StyledText tagName="span" {...rest}>
      {console.log('render') || text}
    </StyledText>
  );
};

这“有效” - 如果 Prop 发生变化，组件会正确更新，并且组件会在每个时间间隔更新，但是在安装时，并且当 Prop 发生变化时，组件将渲染两次。

这是因为useEffect在 timePoint 的值产生的渲染之后运行更改，并在我的 useEffect 内回调我立即调用 setState触发额外渲染的方法。

显然，如果我删除对 setText 的调用，当 prop 更改时(直到间隔运行)，组件似乎不会更改，因为 text还是一样。

我终于意识到我可以通过设置一个我实际上不需要的状态变量来触发渲染，如下所示:

const FromNowString = ({ timePoint, ...rest }) => {
  // We never actually use this state value
  const [, triggerRender] = useState(null);

  useEffect(() => {
    let updateInterval = setInterval(() => triggerRender(), 30000);
    return () => {
      clearInterval(updateInterval);
    };
  }, [timePoint]);

  return (
    <StyledText tagName="span" {...rest}>
      {console.log("render") || formatTimeString(timePoint)}
    </StyledText>
  );
};

这工作得很好，该组件仅在安装时渲染一次，并且每当 timePoint 时渲染一次。 prop 发生了变化，但感觉很hacky。这是正确的处理方式吗？还是我遗漏了什么？

Answer 1

我认为这个方法似乎不错。我要做的主要更改是每次实际更改该值，以便它是:

const FromNowString = ({ timePoint, ...rest }) => {
  const [, triggerRender] = useState(0);

  useEffect(() => {
    const updateInterval = setInterval(() => triggerRender(prevTriggerIndex => prevTriggerIndex + 1), 30000);
    return () => {
      clearInterval(updateInterval);
    };
  }, [timePoint]);

  return (
    <StyledText tagName="span" {...rest}>
      {console.log("render") || formatTimeString(timePoint)}
    </StyledText>
  );
};

我建议进行此更改有两个原因:

• 我认为这在调试和/或验证正在发生的确切行为时会有帮助。然后，您可以在开发工具中查看此状态，并准确查看以这种方式触发重新渲染的次数。
• 另一个原因只是为了让查看这段代码的人更有信心，相信它实际上会完成预期的任务。尽管 setState 可靠地触发了重新渲染(React 不太可能改变这一点，因为它会破坏太多)，但对于查看此代码的人来说，想知道“React 是否保证重新渲染”是合理的。 -如果 setState 调用不会导致状态发生任何更改，则渲染？”即使未更改，setState 始终会触发重新渲染的主要原因是因为在对现有状态进行突变后可能会调用 setState，但如果现有状态是null 并且没有任何内容传递给 setter，在这种情况下，React 可以知道自上次渲染以来状态没有更改并对其进行优化。我不会强制某人深入研究 React 的确切行为或担心该行为将来是否会改变，而是会对状态进行实际的更改。