Normal/Standard 在 componentDidUpdate 中比较 prevProps 的方法

Question

这是因为在原型制作过程中，我发现传入的新道具可能是一组复杂的对象，所以 prevProps.myProp===this.props.myProp 总是 false。 JSON.stringify在比较工作之前对它们进行测试，但感觉不可靠。

我正在尝试为 Class 组件编写一个可重用函数，用于比较 prev/new 反应中的道具 componentDidUpdate。例如：

componentDidUpdate(prevProps) {
    // First, get difference here, possibly using a lib like npm 'deep-object-diff'.
    // ...or just JSON.stringify both and do string comparison
    const changes = getTheDifference(prevProps, this.props)

    // Don't do anything if there's no changes.
    if (!changes) return

    // Then I want to do something like:
    this.setState( Object.assign(this.state, changes) )
}

...这意味着只要传入的道具发生变化，这些道具就会立即反映在状态中。我在寻找合适的差异库时遇到了一些问题，但我仍然觉得我不应该这样做并且遗漏了一些东西 - 是否有普遍接受的 "normal" 方法来做到这一点，或者我有这个问题只是一个迹象：

该组件正在尝试做太多much/state太复杂？
我应该使用 Redux 之类的东西将 props 映射到状态？（在绝对必要之前尽量避免这种情况）
我想多了，有时组件的 componentDidUpdate 中的逻辑只是复杂而独特？

Answer 1

that would mean any time the incoming props change, those get immediately reflected in state

是的，这是错误的。当我刚开始的时候，我也在做同样的事情。

state 是该组件的 "owned"（值得注意的是：并非所有组件都需要状态！）。
props 是 "owned" 的更高成分。

最佳范例：

ComponentA 将 id 作为 prop 传递给 ComponentB。 ComponentB 使用该 ID 发出 API 请求（例如）。

API 请求的 status/results 构成 ComponentB 状态的一部分（它是您的组件的 "owned"）。作为 prop 传入的 id 不是 ComponentB 状态的一部分（它属于 ComponentA，或者可能在树中更高的某个地方将它作为 prop 传递给 ComponentA）。

当 id prop 改变时，ComponentB 将需要发出另一个 API 请求。

编辑：

生命周期方法的复杂性是 React 高度鼓励功能组件的原因。

您应该将组件视为函数。如果你只是将其视为输入 -> 输出，那么编写逻辑会容易得多。

componentDidUpdate 已移至 useEffect 并带有依赖列表，因此您可以说 - 运行此功能，但仅当此道具更改时 - 这是打破的好方法将大量 componentDidUpdate 方法分解为微小的 readbale/testable 块。

我听过很多人说 hooks 毁了 react，但我非常不同意他们的看法。 React 发现了社区中人们运行因滥用基于 class/instance 的组件而陷入的问题，他们没有讲授如何正确使用它们，而是通过引入更简单的 [=48] 来促使人们编写更好的组件=] - 函数，虽然它们仍然可以而且将会被滥用 - 通常比类更容易处理，并且与组合优于继承和声明优于命令很好地对齐。

Normal/Standard 在 componentDidUpdate 中比较 prevProps 的方法

Normal/Standard way to compare prevProps in componentDidUpdate

javascript

reactjs

react-props

react-state