将 componentDidMount 替换为 useEffect

Question

我正在浏览 React Hooks 文档，它提到

\n\n

\n

如果您熟悉 React 类生命周期方法，您可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

\n

\n\n

假设我现在有一个类组件，在 componentDidMount 中我正在做这样的事情

\n\n

  componentDidMount() {\n    MapboxGL.setTelemetryEnabled(false);\n  }\n

\n\n

据我记得，组件安装在生命周期中只调用一次？

\n\n

如果我要使用反应钩子那么它会是这样的

\n\n

  useEffect(() => {\n   MapboxGL.setTelemetryEnabled(false);\n  });\n

\n\n

每次反应功能钩子组件中的状态发生变化时，这都会调用我的函数吗？打电话不是多余吗 MapboxGL.setTelemetryEnabled(false);？当您只想在组件安装后执行此操作时？

\n\n

React 文档已经展示了如何useEffect如何替换多个生命周期方法，但我仍然无法理解 React hooks 如何替换 componentDidMount？

\n\n

另外，只是一个旁注问题，你能使用钩子制作一个完整的应用程序（比如 foursquare 或 instagram 吗？）

\n

Answer 1

您需要添加一个依赖数组以使其知道何时调用此钩子。空的 dep 数组只会调用它一次，即“挂载时”。如果您不提供 dep 数组，那么它将在每次重新渲染时被调用。

useEffect(() => {
   MapboxGL.setTelemetryEnabled(false);
}, []);