如何在react原生功能组件中更改标题？

constructor(props) {
  super(props);
  this.state = {
    title: '初始标题'
  };
}

componentDidMount() {
  document.title = this.state.title;
}

componentDidUpdate(prevProps, prevState) {
  if (prevState.title !== this.state.title) {
    document.title = this.state.title;
  }
}

handleTitleChange = (event) => {
  this.setState({ title: event.target.value });
}

render() {
  return (
    <div>
      <input type="text" value={this.state.title} onChange={this.handleTitleChange} />
    </div>
  );
}