Javascript React初始输入值为空，不接受状态或属性值

我用了很长一段时间的Vue，现在我正在通过反应。为了进行练习，我正在尝试转换一些基本的Vue组件以做出反应。 我在Vue上有一个简单的代码，如下所示：

<template>
  <div>
    <h1>Hello {{message}}</h1>
    <input v-model:value="message" placeholder="Type a name"/>
  </div>
</template>

<script>
  export default {
    data(){
       return { message: 'World!' };
    }
  }
</script>

你好{{message}}
导出默认值{
数据（）{
返回{消息：“世界！”}；
}
}

对于React，我做了以下工作：

export default class App extends React.Component {
  state={message: 'World!'};
  changeValue = e => { this.setState({message: e.target.value}); };
  render() {
    return (<div>
        <h1>Hello {this.state.message}</h1>
        <input value={this.message} placeholder="Type a name" onChange={this.changeValue}/>
      </div>)
  }
}

导出默认类App扩展React.Component{
状态={消息：“世界！”}；
changeValue=e=>{this.setState（{message:e.target.value}）；}；
render（）{
返回(
你好{this.state.message}
)
}
}

它很有魅力，绑定非常完美，就像Vue

v-model

，因此反应性非常完美，除了一件事：输入的初始值不是消息状态，它是

'world！'但它只是空的，显示占位符；因此，我认为它只是获取输入的默认值。
我试图通过创建一个getter来处理计算属性，但认为它可能会起作用，但徒劳无功。现在，我确信在方法循环
componentDidMount
中装入组件后，我可以通过调用输入的
onChange
处理程序来处理这个问题，但我觉得每次必须使用输入，或者更糟糕的是，使用表单时都这样做不是一个好的做法。
你能告诉我：


为什么会按照反应周期逻辑发生这种情况
最好的处理方法是什么
您应该使用
value={this.state.message}
而不是
value={this.message}
。通过
this.state
访问状态变量，而不是
value={this.messageValue}
使用
value={this.state.message}
。这是错误。我没有注意它，当我在处理程序或生命周期方法中工作时，我使用了这个.state.message，所以是的，这就是错误。谢谢只要写一个答复，我就选择它作为答案。