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

关于钩子内异步函数的信息:

效果回调是同步的，以防止竞争条件。把async函数放在里面:

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

useLayoutEffect钩子是React钩子中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 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);

当count增加时，你想重新渲染你的函数组件。然后你的useEffect应该看起来像这样

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

这样，每当你的计数更新你的组件将重新呈现。希望这对你有所帮助。

componentDidMount()的等效钩子是

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

希望这对你有帮助。

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