Question

我是React的新手，

我想知道是否有任何方法可以知道是否由于父修改（props）或内部状态已更改而调用了render函数？

假设我有一个<input type"text" />。我希望它的值在keydown（onChange函数）或每次道具（来自父代）更改时更改

Answer 1

您可以比较新旧道具的状态：

componentDidUpdate(prevProps, prevState) {
  Object.entries(this.props).forEach(([key, val]) =>
    prevProps[key] !== val && console.log(`${key} prop was changed`)
  );
  Object.entries(this.state).forEach(([key, val]) =>
    prevState[key] !== val && console.log(`${key} state changed`)
  );
}

Answer 2

无论哪种情况，您都可以在render函数中简单地添加console.log（this.props）或（props），它将把props记录在控制台上。

有什么方法可以知道是否由于父修改（props）或内部状态已更改而调用了渲染函数？

2 个答案: