如何在 React Hooks 中使用 componentWillMount()？

您不能在挂钩中使用任何现有的生命周期方法（componentDidMount、componentDidUpdate、componentWillUnmount 等）。它们只能在类组件中使用。使用 Hooks，您只能在功能组件中使用。下面的行来自 React 文档：

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

建议是，您可以在功能组件中从类组件中模仿这些生命周期方法。

componentDidMount 内的代码在组件安装时运行一次。 useEffect 此行为的钩子等效项是

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

注意这里的第二个参数（空数组）。这只会运行一次。

如果没有第二个参数，每次渲染组件时都会调用 useEffect 挂钩，这可能很危险。

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

componentWillUnmount 用于清理（如删除事件侦听器、取消计时器等）。假设您要在 componentDidMount 中添加一个事件侦听器并在 componentWillUnmount 中删除它，如下所示。

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

上面代码的钩子等效如下

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

---

使用ComponentWillMount 挂钩

const useComponentWillMount = (cb) => {
    const willMount = useRef(true)

    if (willMount.current) cb()

    willMount.current = false
}

当存在顺序问题（例如在另一个脚本之前运行）时，这个钩子可能是一个保护程序。如果不是这种情况，请使用更符合 React hooks 范例的 useComnponentDidMount。

useComponentDidMount 挂钩

const useComponentDidMount = cb => useEffect(cb, []);

如果您知道您的效果应该只在开始时运行一次，请使用此解决方案。它只会在组件安装后运行一次。

使用效果范式

类组件具有生命周期方法，这些方法被定义为组件时间线中的点。 Hooks 不遵循这种范式。相反，效果应该由它们的内容构成。

function Post({postID}){
  const [post, setPost] = useState({})

  useEffect(()=>{
    fetchPosts(postID).then(
      (postObject) => setPost(postObject)
    )
  }, [postID])

  ...
}

在上面的示例中，效果处理获取帖子的内容。它不是某个时间点，而是有一个它依赖的值 - postID。每次 postID 获得一个新值（包括初始化）时，它都会重新运行。

组件将挂载讨论

在类组件中，componentWillMount 被视为旧版（source 1、source2）。它是遗留的，因为它可能会运行不止一次，并且还有另一种选择 - 使用构造函数。这些考虑与功能组件无关。

---

根据 reactjs.org 的说法，将来不会支持 componentWillMount。 https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

无需使用 componentWillMount。

如果你想在组件挂载之前做一些事情，只需在 constructor() 中做。

如果要进行网络请求，请不要在 componentWillMount 中进行。这是因为这样做会导致意想不到的错误。

网络请求可以在 componentDidMount 中完成。

希望能帮助到你。

更新于 08/03/2019

您要求 componentWillMount 的原因可能是因为您想在渲染之前初始化状态。

只需在 useState 中执行即可。

const helloWorld=()=>{
    const [value,setValue]=useState(0) //initialize your state here
    return <p>{value}</p>
}
export default helloWorld;

或者您可能想在 componentWillMount 中运行一个函数，例如，如果您的原始代码如下所示：

componentWillMount(){
  console.log('componentWillMount')
}

使用钩子，您需要做的就是删除生命周期方法：

const hookComponent=()=>{
    console.log('componentWillMount')
    return <p>you have transfered componeWillMount from class component into hook </p>
}

我只想在关于 useEffect 的第一个答案中添加一些内容。

useEffect(()=>{})

useEffect 在每个渲染上运行，它是 componentDidUpdate、componentDidMount 和 ComponentWillUnmount 的组合。

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

如果我们在 useEffect 中添加一个空数组，它只会在组件安装时运行。这是因为 useEffect 会比较你传递给它的数组。所以它不必是一个空数组。它可以是不变的数组。例如，它可以是 [1,2,3] 或 ['1,2']。 useEffect 仍然只在组件安装时运行。

这取决于您是希望它只运行一次还是在每次渲染后运行。只要你知道自己在做什么，忘记添加数组并不危险。

我为钩子创建了一个示例。请检查一下。

https://codesandbox.io/s/kw6xj153wr

更新于 21/08/2019

我写上面的答案已经有一段时间了。我认为你需要注意一些事情。当你使用

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

当 react 比较你传递给数组 [] 的值时，它使用 Object.is() 进行比较。如果您将对象传递给它，例如

useEffect(()=>{},[{name:'Tom'}])

这与以下内容完全相同：

useEffect(()=>{})

每次它都会重新渲染，因为当 Object.is() 比较一个对象时，它比较的是它的引用，而不是值本身。这与 {}==={} 返回 false 的原因相同，因为它们的引用不同。如果您仍然想比较对象本身而不是引用，您可以执行以下操作：

useEffect(()=>{},[JSON.stringify({name:'Tom'})])

2021 年 7 月 9 日更新：

关于依赖的一些更新：

一般来说，如果你使用一个函数或一个对象作为依赖，它总是会重新渲染。但是 react 已经为你提供了解决方案：useCallback 和 useMemo

useCallback 能够记住一个函数。 useMemo 能够记住一个对象。

见这篇文章：

https://javascript.plainenglish.io/5-useeffect-infinite-loop-patterns-2dc9d45a253f

---

您可以破解 useMemo 挂钩来模仿 componentWillMount 生命周期事件。做就是了：

const Component = () => {
   useMemo(() => {
     // componentWillMount events
   },[]);
   useEffect(() => {
     // componentDidMount events
     return () => {
       // componentWillUnmount events
     }
   }, []);
};

您需要在与您的状态交互的任何内容之前保留 useMemo 挂钩。这不是它的意图，但它对我所有 componentWillMount 问题都有效。

这是有效的，因为 useMemo 不需要实际返回一个值，并且您不必实际将它用作任何东西，但是因为它基于依赖项记住一个值，该依赖项只会运行一次（“[]”）并且它位于我们的组件之上当组件在其他任何东西之前安装时运行一次。

---

钩子中的 React 生命周期方法

对于简单的视觉参考，请按照此图片

https://i.stack.imgur.com/7q1jC.jpg

正如您在上图中简单看到的那样，对于 ComponentWillUnmount，您必须这样做

 useEffect(() => {
    return () => {
        console.log('componentWillUnmount');
    };
   }, []);

---

这是我使用 useRef 钩子在功能组件中模拟构造函数的方式：

function Component(props) {
    const willMount = useRef(true);
    if (willMount.current) {
        console.log('This runs only once before rendering the component.');
        willMount.current = false;        
    }

    return (<h1>Meow world!</h1>);
}

这是生命周期示例：

function RenderLog(props) {
    console.log('Render log: ' + props.children);
    return (<>{props.children}</>);
}

function Component(props) {

    console.log('Body');
    const [count, setCount] = useState(0);
    const willMount = useRef(true);

    if (willMount.current) {
        console.log('First time load (it runs only once)');
        setCount(2);
        willMount.current = false;
    } else {
        console.log('Repeated load');
    }

    useEffect(() => {
        console.log('Component did mount (it runs only once)');
        return () => console.log('Component will unmount');
    }, []);

    useEffect(() => {
        console.log('Component did update');
    });

    useEffect(() => {
        console.log('Component will receive props');
    }, [count]);


    return (
        <>
        <h1>{count}</h1>
        <RenderLog>{count}</RenderLog>
        </>
    );
}

[Log] Body
[Log] First time load (it runs only once)
[Log] Body
[Log] Repeated load
[Log] Render log: 2
[Log] Component did mount (it runs only once)
[Log] Component did update
[Log] Component will receive props

当然 Class 组件没有 Body 步骤，由于函数和类的概念不同，不可能进行 1:1 模拟。

---

如果功能实际上类似于 componentWillMount，则 useLayoutEffect 可以使用一组空的观察者 ([]) 来完成此操作——它将在第一个内容到达 DOM 之前运行——尽管实际上有两个更新，但它们在绘制到屏幕之前是同步的。

例如：

function MyComponent({ ...andItsProps }) {
     useLayoutEffect(()=> {
          console.log('I am about to render!');
     },[]);

     return (<div>some content</div>);
}

使用初始化器/设置器或 useEffect 的 useState 的好处是虽然它可以计算渲染通道，但用户不会注意到对 DOM 的实际重新渲染，并且它在 before 第一个明显的渲染，useEffect 不是这种情况。缺点当然是您的第一次渲染略有延迟，因为在绘制到屏幕之前必须进行检查/更新。不过，这确实取决于您的用例。

我个人认为，useMemo 在您需要做一些繁重的事情的特定情况下很好 - 只要您记住它是例外而不是常态。

---

useLayoutEffect 是要走的路！！！！这回答了我关于检查用户是否登录的问题。（问题是，组件会加载，然后检查用户是否登录。）我的问题是，这是标准做法吗？我没有在太多地方看到

是的，这很常见；在官方 React 文档中也提到过——只是在较小的文本中，因为双 DOM 渲染的后果是为了在用户注意到之前运行逻辑。

实际上它在渲染组件后运行。所以它与componentWillMount完全不同。

正如@JiriMihal 提到的，useLayoutEffect 在渲染后运行，来自 React Docs (reactjs.org/docs/hooks-reference.html#uselayouteffect)：If you’re migrating code from a class component, note useLayoutEffect fires in the same phase as componentDidMount and componentDidUpdate.