针对我的特定用例替代 componentWillReceiveProps
Alternative to componentWillReceiveProps for my particular use case
由于 componentWillReceiveProps
将被弃用,我听说过使用 componentDidUpdate
的替代方法,但问题是 componentDidUpdate
也会在状态更改时调用。
现在,这个问题最常见的答案是比较以前和当前的道具并执行所需的操作。
但是,无论 prop 是否与之前相同,我都想在 prop 更改时执行某些操作。
此类用例的示例如下。
用例 1:
我的页面顶部有一个搜索栏,当用户在搜索栏中输入内容然后单击搜索按钮时,所有其他组件都必须执行某些操作。所以,当搜索一个字符串时,我曾经在 redux 中设置一个状态。所有其他组件将从 componentWillReceiveProps
开始了解这些更改。现在我不会检查 prevProps
和 currentProps
是否相同。每次调用 componentWillReceiveProps
时,我都会执行某些操作,因为如果用户删除了搜索的字符串,然后重新输入相同的字符串,然后再次单击搜索按钮,其他组件仍然需要执行这些操作,即使搜索到的字符串与前一个相同。所以比较当前和以前的道具不是我在这里可以做的。
现在使用 componentDidUpdate
,如果我在没有任何检查的情况下执行这些操作,因为它也会在状态更改时调用,所以它不会起作用。
用例 2:
聆听路线的变化,我使用使用位置对象的 React Router。现在我也会在这种情况下使用 componentWillReceiveProps
来监听位置变化并相应地更新我的组件,而不管是否再次传递相同的位置对象。因此,与之前的用例相同的问题
处理此类情况的理想方法是什么?
您或许可以向 Redux Store 添加一个附加字段,该字段将传达用户发生新操作的信息,例如单击搜索按钮的 timestamp,或 UUID,然后在 componentDidUpdate 中与之进行比较。
由于 componentWillReceiveProps
将被弃用,我听说过使用 componentDidUpdate
的替代方法,但问题是 componentDidUpdate
也会在状态更改时调用。
现在,这个问题最常见的答案是比较以前和当前的道具并执行所需的操作。
但是,无论 prop 是否与之前相同,我都想在 prop 更改时执行某些操作。
此类用例的示例如下。
用例 1:
我的页面顶部有一个搜索栏,当用户在搜索栏中输入内容然后单击搜索按钮时,所有其他组件都必须执行某些操作。所以,当搜索一个字符串时,我曾经在 redux 中设置一个状态。所有其他组件将从 componentWillReceiveProps
开始了解这些更改。现在我不会检查 prevProps
和 currentProps
是否相同。每次调用 componentWillReceiveProps
时,我都会执行某些操作,因为如果用户删除了搜索的字符串,然后重新输入相同的字符串,然后再次单击搜索按钮,其他组件仍然需要执行这些操作,即使搜索到的字符串与前一个相同。所以比较当前和以前的道具不是我在这里可以做的。
现在使用 componentDidUpdate
,如果我在没有任何检查的情况下执行这些操作,因为它也会在状态更改时调用,所以它不会起作用。
用例 2:
聆听路线的变化,我使用使用位置对象的 React Router。现在我也会在这种情况下使用 componentWillReceiveProps
来监听位置变化并相应地更新我的组件,而不管是否再次传递相同的位置对象。因此,与之前的用例相同的问题
处理此类情况的理想方法是什么?
您或许可以向 Redux Store 添加一个附加字段,该字段将传达用户发生新操作的信息,例如单击搜索按钮的 timestamp,或 UUID,然后在 componentDidUpdate 中与之进行比较。