React function/Hooks 组件上的 componentDidMount 等效项？

Question

有没有办法通过钩子在 React 功能组件中模拟 componentDidMount？

Answer 1

您想使用 useEffect()，根据您使用函数的方式，它可以像 componentDidMount() 一样工作。

例如。您可以使用自定义 loaded 状态属性，它最初设置为 false，并在渲染时将其切换为 true，并且仅在该值更改时触发效果。

Documentation

Answer 2

功能组件上没有 componentDidMount，但 React Hooks 提供了一种方法，您可以使用 useEffect 钩子来模拟行为。

将一个空数组作为第二个参数传递给 useEffect() 到运行仅在挂载时回调。

请阅读documentation on useEffect。

function ComponentDidMount() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('componentDidMount');
  }, []);

  return (
    <div>
      <p>componentDidMount: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <ComponentDidMount />
  </div>,
  document.querySelector("#app")
);

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

Answer 3

hooks稳定版（React Version 16.8.0+）

对于componentDidMount

useEffect(() => {
  // Your code here
}, []);

对于componentDidUpdate

useEffect(() => {
  // Your code here
}, [yourDependency]);

对于componentWillUnmount

useEffect(() => {
  // componentWillUnmount
  return () => {
     // Your code here
  }
}, [yourDependency]);

所以在这种情况下，你需要将你的依赖传递到这个数组中。假设您处于这样的状态

const [count, setCount] = useState(0);

每当计数增加时，您都想重新渲染您的函数组件。那么你的 useEffect 应该是这样的

useEffect(() => {
  // <div>{count}</div>
}, [count]);

这样，只要您的计数更新，您的组件就会重新呈现。希望这会有所帮助。

Answer 4

虽然接受的答案有效，但不推荐。当你有不止一种状态并且你将它与 useEffect 一起使用时，它会警告你将它添加到依赖数组或根本不使用它。

它有时会导致可能给您带来不可预测的输出的问题。所以我建议你花点功夫把你的函数改写成class。变化很小，您可以将一些组件作为 class，将一些作为函数。您没有义务只使用一种约定。

以此为例

function App() {
  const [appointments, setAppointments] = useState([]);
  const [aptId, setAptId] = useState(1);

  useEffect(() => {
    fetch('./data.json')
      .then(response => response.json())
      .then(result => {
        const apts = result.map(item => {
          item.aptId = aptId;
          console.log(aptId);
          setAptId(aptId + 1);
          return item;
        })
        setAppointments(apts);
      });
  }, []);

  return(...);
}

和

class App extends Component {
  constructor() {
    super();
    this.state = {
      appointments: [],
      aptId: 1,
    }
  }

  componentDidMount() {
    fetch('./data.json')
      .then(response => response.json())
      .then(result => {
        const apts = result.map(item => {
          item.aptId = this.state.aptId;
          this.setState({aptId: this.state.aptId + 1});
          console.log(this.state.aptId);
          return item;
        });
        this.setState({appointments: apts});
      });
  }

  render(...);
}

这只是举例。所以我们不要谈论代码的最佳实践或潜在问题。这两者具有相同的逻辑，但后者只能按预期工作。这次您可能会使用 useEffect 运行获得 componentDidMount 功能，但随着您的应用程序的增长，您可能会遇到一些问题。因此，与其在那个阶段重写，不如在早期阶段进行重写。

此外，OOP 并没有那么糟糕，如果 Procedure-Oriented 编程就足够了，我们就不会 Object-Oriented 编程了。有时很痛苦，但更好（技术上。个人问题除外）。

Answer 5

componentDidMount() 的确切等效挂钩是

useEffect(()=>{},[]);

希望这对您有所帮助:)

Answer 6

React hooks 中没有 componentDidMount 的确切等价物。

根据我的经验，React Hooks 在开发时需要不同的思维方式，一般来说，您不应该将它与 class 方法（例如 componentDidMount.

进行比较

话虽如此，您可以通过多种方式使用挂钩来产生与 componentDidMount 类似的效果。

解决方案一：

useEffect(() => {
  console.log("I have been mounted")
}, [])

方案二：

const num = 5

useEffect(() => {
  console.log("I will only run if my deps change: ", num)
}, [num])

方案三（有函数）：

useEffect(() => {
  const someFunc = () => {
    console.log("Function being run after/on mount")
  }
  someFunc()
}, [])

方案四（useCallback）：

const msg = "some message"

const myFunc = useCallback(() => {
  console.log(msg)
}, [msg])

useEffect(() => {
  myFunc()
}, [myFunc])

解决方案 5（发挥创意）：

export default function useDidMountHook(callback) {
  const didMount = useRef(null)

  useEffect(() => {
    if (callback && !didMount.current) {
      didMount.current = true
      callback()
    }
  })
}

值得注意的是，解决方案 5 只有在 none 其他解决方案适用于您的用例时才能真正使用 。如果您确实决定需要解决方案 5，那么我建议使用此 pre-made hook use-did-mount.

来源（更详细）：Using componentDidMount in react hooks

Answer 7

useEffect() hook允许我们实现componentDidMount的功能，componentDidUpdate componentWillUnMount的功能。

useEffect() 的不同语法允许实现上述每个方法。

i) componentDidMount

useEffect(() => {
  //code here
}, []);

ii) componentDidUpdate

useEffect(() => {
  //code here
}, [x,y,z]);

//where x,y,z are state variables on whose update, this method should get triggered

iii) componentDidUnmount

useEffect(() => {
  //code here
  return function() {
    //code to be run during unmount phase
  }
}, []);

您可以查看官方 React 站点以获取更多信息。 Official React Page on Hooks

Answer 8

有关钩子内异步函数的信息：

效果回调是同步的以防止竞争条件。将异步函数放在里面：

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Answer 9

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

请访问此官方文档。很容易理解最新的方法。

https://reactjs.org/docs/hooks-effect.html

Answer 10

ComponentDidMount

useEffect(() => {
  //code here
}, []);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

Answer 11

useLayoutEffect hook 是 React Hooks 中 ComponentDidMount 的最佳替代方案。

useLayoutEffect 钩子在渲染前执行 UI 和 useEffect 钩子在渲染后执行 UI。根据您的需要使用它。

示例代码：

import { useLayoutEffect, useEffect } from "react";

export default function App() {
  useEffect(() => {
    console.log("useEffect Statements");
  }, []);

  useLayoutEffect(() => {
    console.log("useLayoutEffect Statements");
  }, []);
  return (
    <div>
      <h1>Hello Guys</h1>
    </div>
  );
}

React function/Hooks 组件上的 componentDidMount 等效项？

componentDidMount equivalent on a React function/Hooks component?

javascript

reactjs

react-hooks