javascript - React数据获取为什么一定要在componentDidMount里面调用？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - React数据获取为什么一定要在componentDidMount里面调用？

ringa_lee 2017-04-11 11:30:06

[JavaScript讨论组]

509

根据文档说法，从后台获取数据一定要放在componentDidMount里面调用，为什么不能在constructor或者componentWillMount里面调用？有什么不同？

ringa_lee

全部回复(5)

伊谢尔伦2017-04-11 11:32:06 5楼

constructor()中获取数据的话，如果时间太长，或者出错，组件就渲染不出来，你整个页面都没法渲染了。
componentDidMount()中能保证你的组件已经正确渲染。

赞 +0

添加回复

PHP中文网2017-04-11 11:32:06 4楼

1、通常我在componentWillMount发送ajax(渲染dom之前做的操作)

2、componentDidMount也可以做ajax操作（渲染dom完成之后做的操作）

那么，这2种情况如何区分呢？

需求1：

当你的render函数需要有数据才能渲染的时候，就在componentWillMount做操作。

render() {
    return data && <p>{data}</p>
}

需求2：

当你的render不需要数据，先渲染dom结构，就在componentDidMount操作。

render() {
    const { data } = this.props
    return (
        <p>
            <span>我要先渲染</span>
            <span>{data || ''}</span>
        </p>
    )
}

赞 +0

添加回复

大家讲道理2017-04-11 11:32:06 3楼

你既然了解的周期的顺序，那就很好理解了啊！willMount在dom没有渲染前先进行的方法，如果这个时候请求ajax那么势必会有等待的这一刻，然后排队渲染dom，而didMount是在dom加载后在进行的方法，而这个时候请求ajax前面没有任何等待，直接请求，然后如果你setState那么整个虚拟dom会在此渲染，此时再将获得的数据进行渲染，这样就感觉很顺的就执行下去了。而再次渲染的同时大部分的dom都是没有改变的，只有部分改变，所以渲染的速度会很快

赞 +0

添加回复