javascript - 为什么异步请求应该在 componentDidMount 中而不是 ReactJS 中的 getInitialState 中发出?

标签 javascript reactjs

This React 文档页面显示,异步请求的数据应在 componentDidMount 事件中使用,而 getInitialState 将状态对象初始化为默认的状态。

这有什么原因吗?也许 getInitialState 不应该这样做或者有不同的目的?是由于库的某些内部逻辑吗?

请版主和回答者注意:这不是一个基于意见的问题:如果存在原因,那就是答案,但是,对我的问题的一个好的、正确的答案也可以是“不,没有什么特别的原因,做你感觉更好的事情”

最佳答案

getInitialState应该是 props 的纯函数(尽管它们经常不被使用)。换句话说,使用相同的 props getInitialState 应该返回相同的数据。

componentDidMount允许有动态行为,并引起副作用,例如 dom 操作和 ajax 请求(这是它的主要目的)。

处理此问题的常见方法是提前返回空 div、加载消息、<div>Loading</div> ),或加载指示器(例如 spinkit )。

第一次渲染时,将显示微调器,然后最终使用数据更新状态,并且可以运行渲染的主要部分。

render: function(){
   // while loading
   if (!this.state.data){
     return <div className="spinner"></div>
   }

   // loaded, you can use this.state.data here
   return <div>...</div>
}

关于javascript - 为什么异步请求应该在 componentDidMount 中而不是 ReactJS 中的 getInitialState 中发出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26615307/

相关文章:

javascript - 在React es6中实现去抖

javascript - Fetch 请求出现 500 错误;请求的资源上不存在 'Access-Control-Allow-Origin' header

html - ant-tooltip组件的文字颜色和背景颜色如何更改

JavaScript instanceof 和 moment.js

javascript - 从 Electron 应用程序打印

javascript - 无法读取 Render() 上未定义的属性 'setState'

javascript - 淡入数组中的随机引号

javascript - 开 Jest - 语法错误 : React Navigation - Unexpected token export for [node_modules\react-navigation\src\react-navigation. js:1]

javascript - 如何重构检查图像(用作 css 背景法师)是否存在以返回 bool 值的函数?

javascript - 播放Java音频文件