当前位置:  开发笔记 > 编程语言 > 正文

在React.js中我应该在componentWillMount或componentDidMount中创建我的初始网络请求吗?

如何解决《在React.js中我应该在componentWillMount或componentDidMount中创建我的初始网络请求吗?》经验,为你挑选了2个好方法。

在react文档中,它建议在componentDidMount方法中进行初始网络请求:

componentDidMount()在装入组件后立即调用.需要DOM节点的初始化应该放在这里.如果需要从远程端点加载数据,这是实例化网络请求的好地方.在此方法中设置状态将触发重新渲染.

如果componentWillMount在渲染组件之前调用,那么在这里发出请求并设置状态是不是更好?如果我这样做componentDidMount,则渲染组件,发出请求,更改状态,然后重新呈现组件.为什么在呈现任何内容之前提出请求更好?



1> Dan Abramov..:

你应该做的请求componentDidMount.

如果在渲染组件之前调用componentWillMount,那么在这里发出请求并设置状态不是更好吗?

不,因为无论如何,在组件呈现时请求都不会完成.

如果我在componentDidMount中执行此操作,则会呈现组件,发出请求,更改状态,然后重新呈现组件.为什么在呈现任何内容之前提出请求更好?

因为任何网络请求都是异步的.除非你缓存了数据,否则无论如何都无法避免第二次渲染(在这种情况下,您根本不需要触发请求).通过先前触发它,你无法避免第二次渲染.它无济于事.

在React的未来版本中,我们希望componentWillMount在某些情况下会多次触发,因此您应该使用componentDidMount网络请求.


通常我会使用`isFetching`状态进行网络请求.1.最初`isFetching = false`,用空数据渲染.2.`componentDidMount`,调度获取请求,将`isFetching`设置为`true`,使用``组件进行渲染.3.成功获取,将`isFetching`设置为`false`,使用获取的数据进行渲染.是否有一种良好(安全)的方式来初始渲染一个``组件,而不是使用空数据渲染.谢谢 .

2> John Weisz..:

您应该使用componentDidMount

为什么在呈现任何内容之前发出请求更好呢?

因为:

您的请求几乎肯定会在呈现组件之前完成(除非呈现大量标记,或者您处于零延迟量子纠缠连接),并且在大多数情况下,组件最终将需要重新呈现

componentWillMount 在服务器端渲染期间也会调用(如果适用)


但是,如果您要问的话,发起一个请求componentWillMount(在没有实际处理的情况下)不是更好,我肯定会说是(ES6),我自己这样做是为了偶尔将加载时间缩短几毫秒:

componentWillMount() {
    // if window && window.XMLHttpRequest
    if (!this.requestPromise) {
        this.requestPromise = new Promise(resolve => {
            // ... perform request here, then call resolve() when done.
        });
    }
}

componentDidMount() {
    this.requestPromise.then(data => ...);
}

这将在期间开始预加载您的请求componentWillMount,但是componentDidMount无论请求是在那时完成还是仍在处理中,都仅在中处理该请求。

推荐阅读
U友50081205_653
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有