用 useEffect 替换 componentDidMount答案

【问题标题】：replacing componentDidMount with useEffect用 useEffect 替换 componentDidMount
【发布时间】：2020-05-29 01:57:12
【问题描述】：

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

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

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

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

据我所知，组件在生命周期中只调用一次吗？

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

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

这会在每次反应功能挂钩组件中的状态更改时调用我的函数吗？每次都调用MapboxGL.setTelemetryEnabled(false); 来调用它不是多余的吗？当您只想在组件安装后执行此操作？

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

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

【问题讨论】：

标签： reactjs

【解决方案1】：

你需要添加一个依赖数组让它知道什么时候调用这个钩子。一个空的 dep 数组只会调用一次，也就是“挂载”。如果你不提供 dep 数组，那么它只会在每次重新渲染时被调用。

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

【讨论】：

【解决方案2】：

您可以创建一个标志，如果标志为假/真，则仅执行该操作。这么简单的事情

 useEffect(() => {
   if (something) {
    MapboxGL.setTelemetryEnabled(false);
    setSomething(false) 
    }
  });

或者如果你只需要一次钩子，你可以按照马特的建议做

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

【讨论】：