为什么我们更喜欢在 componentDidMount 中而不是在 componentWillMount 中编写 header 或 api 请求或 ajax 代码

Question

为什么我们更喜欢在 componentDidMount 而不是 componentWillMount 中编写 header 或 api 请求或 ajax 代码。

需要与示例进行简单明了的区别

Answer 1

您应该使用 componentDidMount() 因为您需要渲染组件以便用您从 [=35= 获取的数据填充它].

componentWillMount(){
   //Fetch API and set the State
}

render(){
   return(<div>{this.state.myData}</div>)
}

当 componentWillMount() 启动时 <div> 还没有被渲染（目前在 DOM 中不存在）。

另一只手使用componentDidMount()时。 render 方法首先运行，在 DOM 中创建 <div> 元素，然后运行 componentDidMount()，获取数据，设置 state 并创建重新渲染的组件。这就是我们使用 componentDidMount() 从 API 中获取数据的原因。您可以找到更多信息 here.

注意事项： 您应该验证状态 这样您就不会在组件第一次渲染时得到 undefined （没有来自 API 的数据）。

Answer 2

edgaromar90 与构造函数的情况相同。我们通常在初始渲染之前在构造函数和构造函数调用中设置临时状态。 constuctor 和 willMount 都在初始渲染之前调用，那么为什么我们不在 componentWillMount

中使用

为什么我们更喜欢在 componentDidMount 中而不是在 componentWillMount 中编写 header 或 api 请求或 ajax 代码

why we prefer to write header or api request or ajax code in componentDidMount not in componentWillMount

reactjs

react-lifecycle