dom完成渲染后的React函数答案

【问题标题】：React function after dom has finished renderingdom完成渲染后的React函数
【发布时间】：2018-06-27 22:09:46
【问题描述】：

我有一张世界地图，当您点击某个特定国家/地区时，它会 ping 和 API 并获取该国家/地区的学校。 React 然后使用传单显示所有点（GEOJSON）。加载学校后，我会弹出一个 Dock 类型的东西。问题是我需要知道反应何时完成更新。我尝试在 Map.jsx 文件中使用反应生命周期方法我有以下代码来尝试查看 GEOJSON 何时完成渲染：

componentWillUpdate() {
   console.log('CWU');
}
componentDidUpdate() {
   console.log('CDU');
}

但在控制台中我得到以下打印输出：

CWU, CDU, CWU, CDU, CWU, CDU

因此，这两个函数都运行了 3 次，而对于另一个国家/地区，这两个函数都运行了两次。所以我不能将启动 Dock 的函数放在 componentWillUpdate 或 componentDidUpdate 中，因为我需要在第三个“CDU”之后运行该函数，或者在第二个“CDU”之后运行另一个国家。有没有办法知道 react 何时完成渲染？

【问题讨论】：

您可能应该弄清楚为什么组件会多次更新，以及是否可以避免这种情况。
@Timo 这会很棒，但不幸的是，由于很多原因会重新渲染，例如 link 如果我能对重新渲染一次做出反应，那就太好了。但是那种我的控制，除非我指定所有应该做出反应渲染的条件（componentShouldRender）
你能分享更多代码吗，你是怎么做API调用的？我认为你不应该担心 React 何时完成渲染，而是挂钩事件，当 API 调用完成并更新状态以在此处显示 Dock。
我关心什么时候反应完成的原因是因为渲染是什么时候。我获得数据的速度相对较快，但渲染需要一段时间，因此我想知道渲染何时完成/完成更新。
嗯，很有趣，也许您可以比较该组件以前的道具和当前道具？例如，如果您通过 items 之类的 prop 传递加载的项目，并且在 componentDidUpdate 期间该属性等于先前的属性，那么这意味着组件重新渲染的原因与您正在加载的数据不同。

标签： javascript reactjs react-redux

【解决方案1】：

我找到了解决它的方法。我会尽力解释：我有一个名为

的状态变量

didUpdate = false

API 更改道具中的特定条目所以在componentWillUpdate中，我检查下一个状态是否不同于我当前的状态，如果是这样，我将didUpdate设置为false。这样就不会显示了。

然后在我的 componentDidUpdate 中，我检查之前的状态是否与我当前的状态不同，如果是，我将 didUpdate 设置为 true。这样就可以显示停靠栏了。

这是一些代码：

componentWillUpdate(nextProps, nextState) {
    if (nextProps.X !== this.props.X) {
        this.setState({
          didUpdate: false,
        })
    }
}
componentDidUpdate(prevProps, prevState) {
    if (prevProps.X !==this.props.X) {
        this.setState({
            didUpdate: true
        })
    }
}

【讨论】：

【解决方案2】：

你可以使用

componentWillUnmount()

componentWillUnmount() 在组件被卸载和销毁之前立即调用。在此方法中执行任何必要的清理，例如使计时器无效、取消网络请求或清理在 componentDidMount() 中创建的任何订阅。

【讨论】：

这如何回答有关组件何时完成渲染的问题？
一个组件可能会重新渲染几次状态会改变的次数，但是组件卸载后不会重新渲染。这是我的理解，如果我错了，请纠正我。
是什么让您根据这个问题认为任何东西都在卸载？ OP 正在询问如何确定组件是否已完成渲染。