React - 防止生命周期组件两次呈现相同的数据：WillReceiveProps＆amp; componentDidMount

Question

具体针对组件的快速反应问题。我正在使用两种生命周期方法：

• componentDidMount（） - 用于在首次呈现组件时检索数据
• componentWillReceiveProps（nextProps） - 用于在某些参数更改时更新数据

这很有效。但是，当我使用组件刷新页面时，只要一个就足够了，就会执行两个生命周期方法。页面上的数据仍然是正确的，但似乎有点低效。如果可能，我如何将这些与生命周期结合起来？

以下示例将在刷新页面时调用 fetchTest（）两次。如果我删除componentDidMount，那么如果用户刷新页面，数据最初不会加载。

无论用户如何访问组件，有关如何调用fetchTest（）的任何想法？

 componentDidMount() {
     fetchTest(this.props.params.id);
     // for initial component render
   }

   componentWillReceiveProps(nextProps) {
     fetchTest(nextProps.params.id);
     // for when (params.id) is changed. data within component is updated
   }

Answer 1

您可能想要

componentWillReceiveProps(nextProps) {
  if (nextProps.params.id !== this.props.params.id) {
    fetchTest(nextProps.params.id);
  }
}