Javascript 在componentDidUpdate中比较prevProps的常规/标准方法_Javascript_Reactjs_React Props_React State

Javascript 在componentDidUpdate中比较prevProps的常规/标准方法

javascript reactjs

Javascript 在componentDidUpdate中比较prevProps的常规/标准方法,javascript,reactjs,react-props,react-state,Javascript,Reactjs,React Props,React State,这是因为在原型设计过程中，我发现传入的新道具可能是一个复杂对象数组，因此prevProps.myProp===This.props.myProp总是falseJSON.stringify在比较工作之前将它们都字符串化，但感觉不可靠我正在尝试为类组件编写一个可重用函数，用于比较react的componentDidUpdate中的prev/new props。例如： componentDidUpdate（prevProps）{ //首先，在这里获得差异，可能使用像npm“deep object d

这是因为在原型设计过程中，我发现传入的新道具可能是一个复杂对象数组，因此

prevProps.myProp===This.props.myProp

总是

false

<代码>JSON.stringify在比较工作之前将它们都字符串化，但感觉不可靠

我正在尝试为类组件编写一个可重用函数，用于比较react的

componentDidUpdate

中的prev/new props。例如：

componentDidUpdate（prevProps）{
//首先，在这里获得差异，可能使用像npm“deep object diff”这样的库。
//…或只是JSON.stringify并进行字符串比较
const changes=getTheDifference（prevProps，this.props）
//如果没有变化，什么都不要做。
如果（！更改）返回
//然后我想做一些类似的事情：
this.setState（Object.assign（this.state，changes））
}

…这意味着任何时候传入的道具发生变化，这些道具会立即反映在状态中。我在寻找一个合适的diff库时遇到了一些问题，但我仍然觉得我不应该这样做，我遗漏了一些东西-是否有一种普遍接受的“正常”方法来做到这一点，或者我遇到的这个问题只是一个迹象：

组件尝试执行太多/状态太复杂
我应该用Redux之类的东西将道具映射到状态？（在绝对必要之前尽量避免）
我想得太多了，有时候组件的componentDidUpdate中的逻辑是复杂而独特的

这意味着任何时候，当传入的道具发生变化时，这些道具会立即反映在状态中

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

state

是该组件“拥有”的东西（值得注意的是：并非所有组件都需要state！）

props

是由更高的组件“拥有”的东西最佳例子：

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

该API请求的状态/结果构成组件B状态的一部分（它由您的组件“拥有”）。作为道具传入的id不是ComponentB状态的一部分（它属于ComponentA，或者可能是作为道具传入ComponentA的树中更高的位置）

当id属性更改时，ComponentB将需要发出另一个API请求

编辑：

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

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

componentDidUpdate

已被移动到带有依赖项列表的

useEffect

，因此您可以说-运行此函数，但仅当此属性更改时-这是将大量

componentDidUpdate

方法分解为小的readbale/可测试块的好方法

我听过很多人说，钩子坏了，但我非常不同意他们的看法。React通过误用基于类/实例的组件看到了人们在社区中遇到的问题，他们没有讲授如何正确使用这些组件，而是通过引入更简单的API函数推动人们编写更好的组件，尽管它们仍然可能被滥用，也将被滥用，但它们通常比类更容易处理，并且与组合而不是继承和声明而不是命令很好地结合在一起