React - 防止生命周期组件两次渲染相同的数据：WillReceiveProps & 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);
  }
}