如何检查 componentWillReceiveProps 中更改了哪些道具 [英] How to check what props changed in componentWillReceiveProps

问题描述

有没有办法检查 componentWillReceiveProps 中哪些 props 发生了变化(不将旧的 props 存储在其他地方)?

Is there a way to check what props changed (without storing old props elsewhere) inside componentWillReceiveProps ?

即

componentWillReceiveProps (newProps) {
  if( /* newProps.profileImage is different to previous props */ ) /* do stuff */
}

推荐答案

请注意，函数 componentWillReceiveProps 现在不推荐使用.引用官方文档:

Note that the function componentWillReceiveProps is now deprecated. Quoting the official documentation:

如果您使用 componentWillReceiveProps 仅重新计算某些数据当道具发生变化时，请改用备忘助手.

If you used componentWillReceiveProps for re-computing some data only when a prop changes, use a memoization helper instead.

这是指您在 componentWillReceiveProps 中的检查是为了避免多次不必要地重新计算同一事物的情况.在 链接博客文章，它建议缓存昂贵函数的结果，以便可以查找，而不是重新计算.这可以使用诸如 memoize-one 之类的帮助程序来完成.

This refers to the case where the your check inside componentWillReceiveProps was to avoid unnecessarily recomputing the same thing many times. In the linked blog post, it suggests caching the result of the expensive function so that it can be looked up, rather than recomputed. This can be done using a helper such as memoize-one.

如果你使用 componentWillReceiveProps 来重置"某个状态道具更改，考虑使组件完全受控或完全不受钥匙控制.

If you used componentWillReceiveProps to "reset" some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.

同样，链接的博文 更详细地描述了这一点，但简而言之:

Again, the linked blog post describes this in more detail, but in a nutshell:

• 完全受控"组件是指没有状态的功能组件(父组件负责处理状态).
• 完全不受控制"的替代方案是仅使用props来设置初始状态，然后忽略对道具.

• The "fully controlled" component refers to a functional component with no state (the parent component is responsible for handling the state).
• The "fully uncontrolled" alternative is one that only uses the props to set the initial state, and then ignores all further changes to the props.

在极少数情况下，您可能想要使用 getDerivedStateFromProps生命周期作为最后的手段.

In very rare cases, you might want to use the getDerivedStateFromProps lifecycle as a last resort.

此函数接收 (props, state) 并在调用 render 之前返回对状态的任何更改，让您可以控制做任何您想做的事情.

This function receives (props, state) and returns any changes to the state before render is called, giving you the control to do whatever you want.

在这个生命周期方法 被调用，this.props 指的是之前的一组 props.

At the point in time that this lifecycle method is called, this.props refers to the previous set of props.

要将新道具上的单个属性 foo 与旧道具上的相同属性进行比较，您只需将 newProps.foo 与 this 进行比较.props.foo.所以在你的例子中:

To compare a single property foo on the the new props with the same property on the old ones, you can just compare newProps.foo with this.props.foo. So in your example:

componentWillReceiveProps (newProps) {
  if( newProps.profileImage !== this.props.profileImage ) /* do stuff */
}

这篇关于如何检查 componentWillReceiveProps 中更改了哪些道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！