为什么输入元素在组件重新呈现后不能重新获得焦点？

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidUpdate() {
    this.inputRef.current.focus();
  }

  render() {
    return <input ref={this.inputRef} />;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  componentDidUpdate() {
    this.inputRef.focus();
  }

  render() {
    return <input key="input" ref={ref => this.inputRef = ref} />;
  }
}