reactjs - 用 useEffect 替换 componentDidMount

Question

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

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

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

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

据我所知，组件确实在生命周期中只调用了一次 mount？

如果我要使用 react hooks 那么它会是这样的

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

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

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

另外，只是一个旁注问题，你能用钩子(Hook)制作一个完整的应用程序吗(像foursquare或instagram之类的？)

Answer 1

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

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