为什么在componentDidUpdate（）中需要带有prevState的prevProps？

Question

我建立了一个简单的计数器应用程序：

class Counter extends React.Component {

  constructor(props) {
    super(props);
    this.handleAddOne = this.handleAddOne.bind(this);
    this.handleMinusOne = this.handleMinusOne.bind(this);
    this.handleReset = this.handleReset.bind(this);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
      const stringCount = localStorage.getItem('count');
      const count = parseInt(stringCount);

      if (isNaN(count) === false) {
        this.setState(() => ({ count }));
      } 
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      localStorage.setItem('count', this.state.count);
      console.log('componentDidUpdate');
    }
  }

  handleAddOne() {
    this.setState((prevState) => {
      return {
        count: prevState.count + 1
      }
    });
  }

  handleMinusOne() {
    console.log('handleMinusOne');
    this.setState((prevState) => {
      return {
        count: prevState.count - 1
      }
    });
  }

  handleReset() {
    this.setState(() => {
      return {
        count: 0
      }
    });
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.handleAddOne}>+</button>
        <button onClick={this.handleMinusOne}>-1</button>
        <button onClick={this.handleReset}>reset</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('app'));

我的问题是componentDidUpdate()。在其中，我正在检查是否prevState.count与相同this.state.count。如果不相同，则设置localStorage为新计数。如果不一样，我什么也不做。

在当前的componentDidUpdate（）中，我需要prevProps作为该函数正常运行的参数。例如，如果我只有这个：

componentDidUpdate(prevState) {
    if (prevState.count !== this.state.count) {
      localStorage.setItem('count', this.state.count);
      console.log('componentDidUpdate');
    }
  }

然后localStorage，即使计数保持为0，每次重复按下复位按钮时，组件也会进行设置。

到底是怎么回事？为什么我需要prevProps为componentDidUpdate()工作正常，如果我从来没有使用props该功能？

Answer 1

您是否prevProps在函数中使用并不重要，它必须包含在内，因为函数中的参数顺序确实很重要。

componentDidUpdate(prevProps, prevState)

如果您省略该prevProps参数，prevState（即使名称会清楚地表明它是 state 的先前版本）它也将代表 props 的先前版本。

它只是一个空白。您可以使用下划线来告诉其他人（或只是您自己）它没有在该函数中使用。

componentDidUpdate(_, prevState)

Answer 2

中的第一个参数componentDidUpdate是prevProps。第二个参数是prevState。该文档明确指出：

componentDidUpdate（prevProps，prevState，快照）

这个

componentDidUpdate(prevState) {...}

不是该钩子的正确签名。即使第一个参数被调用了prevState，它也包含以前的道具。

可以根据参数的可变性来替换函数参数，但这在React中没有实现，并且通常被认为是不好的做法，因为这会导致更复杂的签名。

为了不引起lint警告，可以通过约定对未使用的参数进行强调：

componentDidUpdate(_prevProps, prevState) {...}