为什么要在React组件的componentDidMount中完成ajax请求?
React文档指出应从componentDidMount
生命周期事件启动ajax请求 (请参阅react
docs)。
为什么会这样?
在大多数情况下,使用ajax加载数据时,我想显示某种加载栏,例如:
componentDidMount() { this.setState({isLoading: true});
fetch(...)
.then(...)
.then(() => this.setState({isLoading: false})
}
但这会触发render
方法3次(初始渲染后立即进行设置isLoading = true
,然后按isLoading = false
从componentWillMount
事件发送Ajax请求有什么问题?
回答:
好吧,isLoading: true
可能是初始状态的一部分,无需在组件完成mount =>后设置它,只需设置2个渲染,而不是3个。
根据https://github.com/reactjs/react-
redux/issues/210的说法,render
仅从from
调用一次的结果componentWillMount
意味着,如果setState
将在after之后被异步调用render
,则不会有任何效果(如果我正确理解了注释)。
不知道回调是否有可能在setState
执行之前执行render
,因此看不到加载屏幕,只有结果可见,因此有时它会“起作用”(很有可能在DEV中),但实际上这将是一个竞争条件难以调试…
另请参阅:https :
//reactjs.org/docs/faq-ajax.html
以上是 为什么要在React组件的componentDidMount中完成ajax请求? 的全部内容, 来源链接: utcz.com/qa/418963.html