React进阶篇——二、组件与服务器通信

最新推荐文章于 2023-06-20 12:05:24 发布

Zoie_ting

最新推荐文章于 2023-06-20 12:05:24 发布

阅读量107

点赞数

分类专栏： React 文章标签：服务器 react.js 前端 javascript 运维

本文链接：https://blog.csdn.net/sxww_zyt/article/details/129253487

版权

29 篇文章 0 订阅

订阅专栏

二、组件与服务器通信

1，组件挂载阶段通信

componentDidMount是调用服务器API最安全的地方，也是React官方推荐的进行服务器通信的地方。除了在componentDidMount，在componentWillMount中进行服务器通信也是比较常见的一种方式。

componentWillMount会在组件被挂载前调用，因此从时间上来讲，componentWillMount中执行服务器通信要早于componentDidMount。但两者执行的时间差微乎其微，完全可以忽略不计。

componentDidMount是执行组件与服务器通信的最佳地方，原因：

在componentDidMount执行服务器通信可以保证获取到数据时，组件已经处于挂载状态，此时可以操作DOM
当组件在服务器端渲染时，componentWillMount会执行两次，一个在服务器端，一次在浏览器端，而componentDidMount能保证在任何情况下只会被调用一次，从而不会发送多余的数据请求。

2，组件更新阶段通信

例如，组件需要以props中某个属性作为与服务器通信的请求采纳数，当这个属性值发生更新时，组件自然需要重新余服务器通信。

componentWillReceiveProps(nextProps){
        if(nextProps.category !== this.props.category) {
            // fetch
        }
    }

componentWillReceiveProps的执行并不能说明props一定发生了修改

关注