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

Question

在 React 的官方文档中提到 -

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

我的问题是 - 我们如何在挂钩中使用 componentWillMount() lifecyle 方法？

Answer 1

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

如果你熟悉 React 类生命周期方法，你可以把 useEffectHook 想成 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', () => {})
  }
}, [])

Answer 2

使用ComponentWillMount 挂钩

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

    if (willMount.current) cb()

    willMount.current = false
}

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

useComponentDidMount 挂钩

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

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

useEffect 范例

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

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

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

  ...
}

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

组件将挂载讨论

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

Answer 3

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

不需要使用componentWillMount。

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

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

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

希望对你有帮助。

---

于 2019 年 8 月 3 日更新

你之所以要求 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

---

于 2019 年 8 月 21 日更新

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

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

Answer 4

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

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

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

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

Answer 5

钩子中的 React 生命周期方法

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

如上图所示，对于ComponentWillUnmount，你必须这样做

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

Answer 6

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

例如：

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

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

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

我个人认为，useMemo 在您需要做一些繁重的事情的特定情况下是可以的 - 只要您记住这是例外与常态。

Answer 7

这是我使用 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的模拟。

Answer 8

我编写了一个自定义钩子，它将在第一次渲染之前运行一次函数。

useBeforeFirstRender.js

import { useState, useEffect } from 'react'

export default (fun) => {
  const [hasRendered, setHasRendered] = useState(false)

  useEffect(() => setHasRendered(true), [hasRendered])

  if (!hasRendered) {
    fun()
  }
}

用法：

import React, { useEffect } from 'react'
import useBeforeFirstRender from '../hooks/useBeforeFirstRender'


export default () => { 
  useBeforeFirstRender(() => {
    console.log('Do stuff here')
  })

  return (
    <div>
      My component
    </div>
  )
}

Answer 9

有一个很好的解决方法来实现componentDidMount 和componentWillUnmount 与useEffect。

根据文档，useEffect 可以返回“清理”函数。此函数不会在第一次 useEffect 调用时调用，只会在后续调用时调用。

因此，如果我们使用完全没有依赖关系的useEffect钩子，则只有在挂载组件时才会调用该钩子，而在卸载组件时会调用“清理”函数。

useEffect(() => {
    console.log('componentDidMount');

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

只有在卸载组件时才会调用清理返回函数。

希望这会有所帮助。

Answer 10

鉴于此

• componentWillMount 已弃用（1、2、3），建议的替换是在 constructor 中执行代码
• 在功能组件的 return 语句之前执行的代码在渲染之前隐式运行
• 挂载类组件的大致等价物是功能组件的初始调用
• 目标是在 ui 更新之前执行一次代码

解决办法是

在功能组件的主体中只运行一次函数。这可以通过useState、useMemo 或useEffect 来实现，具体取决于用例所需的时间。

由于代码需要在初始渲染提交到屏幕之前运行，这将取消useEffect 的资格，因为“传递给 useEffect 的函数将在渲染提交到屏幕后运行。” 4.

由于我们想保证代码只运行一次，这将取消useMemo 的资格，因为“将来，React 可能会选择“忘记”一些以前记忆的值并在下一次渲染时重新计算它们”5。

useState 支持 lazy initial state 计算，保证在初始渲染期间只运行一次，这似乎是这项工作的理想选择。

useState 示例：

const runOnceBeforeRender = () => {};

const Component = () => {
  useState(runOnceBeforeRender);

  return (<></>);
}

作为自定义钩子：

const runOnceBeforeRender = () => {};

const useOnInitialRender = (fn) => {
  useState(fn);
}

const Component = () => {
  useOnInitialRender(fn);

  return (<></>);
};

runOnceBeforeRender 函数可以选择返回一个状态，该状态将在函数第一次渲染时立即可用，不会触发重新渲染。

Answer 11

https://reactjs.org/docs/hooks-reference.html#usememo

请记住，传递给 useMemo 的函数在渲染期间运行。 不要在那里做任何你在渲染时通常不会做的事情。 比如副作用属于useEffect，而不是useMemo。

Answer 12

Ben Carp 的回答对我来说似乎只有一个有效。

但由于我们使用的是函数式方法，因此另一种方法可以从闭包和 HoC 中受益：

const InjectWillmount = function(Node, willMountCallback) {
  let isCalled = true;
  return function() {
    if (isCalled) {
      willMountCallback();
      isCalled = false;
    }
    return Node;
  };
};

然后使用它：

const YourNewComponent = InjectWillmount(<YourComponent />, () => {
  console.log("your pre-mount logic here");
});

Answer 13

简短回答您的原始问题，componentWillMount 如何与 React Hooks 一起使用：

componentWillMount 是 deprecated and considered legacy。反应recommendation:

一般来说，我们建议使用 constructor() 来代替初始化状态。

现在在Hook FAQ 中你会发现，函数组件的类构造函数的等价物是：

构造函数：函数组件不需要构造函数。您可以在 useState 调用中初始化状态。如果计算初始状态的开销很大，可以将函数传递给 useState。

所以componentWillMount 的用法示例如下所示：

const MyComp = () => {
  const [state, setState] = useState(42) // set initial value directly in useState 
  const [state2, setState2] = useState(createInitVal) // call complex computation

  return <div>{state},{state2}</div>
};

const createInitVal = () => { /* ... complex computation or other logic */ return 42; };

Answer 14

这对大多数人来说可能很清楚，但请记住，在函数组件的主体内部调用的函数充当beforeRender。这并不能回答在 ComponentWillMount 上运行代码的问题（在第一次渲染之前），但因为它是相关的并且可能对其他人有帮助，所以我将它留在这里。

const MyComponent = () => {
  const [counter, setCounter] = useState(0)
  
  useEffect(() => {
    console.log('after render')
  })

  const iterate = () => {
    setCounter(prevCounter => prevCounter+1)
  }

  const beforeRender = () => {
    console.log('before render')
  }

  beforeRender()

  return (
    <div>
      <div>{counter}</div>
      <button onClick={iterate}>Re-render</button>
    </div>
  )
}

export default MyComponent

Answer 15

正如react document中所述：

您可能认为我们需要一个单独的效果来执行 清理。但是添加和删除订阅的代码非常紧凑 相关的是 useEffect 旨在将其保持在一起。如果你的效果 返回一个函数，React 会在需要清理的时候运行它：

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

所以我们唯一需要在钩子中使用 componentWillUnmount 就是在 useEffect 中返回一个函数，如上所述。

Answer 16

所以对于 React 钩子，我认为在 return 语句可以工作之前声明你的逻辑。您应该有一个默认设置为 true 的状态。在我的例子中，我调用了状态组件WillMount。然后有条件在此状态为 true 时运行代码块（代码块包含您要在 componentWillMount 中执行的逻辑），此块中的最后一条语句应该将 componentWillMountState 重置为 false（这一步很重要，因为如果不做，会出现无限渲染） 示例

// do your imports here

const App = () =>  {
  useEffect(() => {
    console.log('component did mount')
  }, [])
  const [count, setCount] = useState(0);
  const [componentWillMount, setComponentWillMount] = useState(true);
  if (componentWillMount) {
    console.log('component will mount')
    // the logic you want in the componentWillMount lifecycle
    setComponentWillMount(false)
  }
  
  return (
    <div>
      <div>
      <button onClick={() => setCount(count + 1)}> 
        press me
      </button>
      <p>
        {count}
      </p>
      
      </div>
    </div>
  )
}

Answer 17

这可能不是 componentWillMount 方法的确切替代方法，但这是一种可用于实现相同目标但使用 useEffect 的方法：

首先将获取数据的对象初始化为空值并定义useEffect方法：

const [details, setDetails] = useState("")

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

const retrieveData = () => {       
       getData()                  // get data from the server 
      .then(response => {
        console.log(response.data);
        setDetails(response.data)
      })
      .catch(e => {
        console.log(e);
      })
  }

现在在我们返回的 JSX 中添加一个三元运算符

*return(
  <div>
    { 
   details ? (
   <div class="">
   <p>add Your Jsx Here</p>
</div>
): (
  <div>
<h4>Content is still Loading.....</h4>
</div>
)
}
  </div>
)*

这将确保在对象“details”中有数据之前，加载三元运算符的第二部分，这反过来会触发 useEffect 方法，该方法导致将从服务器接收到的数据设置在“details”对象中，因此主 JSX 的渲染

Answer 18

在 React.useEffect() 中简单地放置一个依赖数组作为第二个参数。如果任何依赖项更新，钩子将导致运行并最终更新您的组件的副作用。

Answer 19

我们最近遇到了这个问题，因为我们需要在组件挂载时做一些事情，即我们需要更新全局状态。

所以我创建了这个钩子，不确定这是一种多么好的方法，但到目前为止，只要我们谨慎使用它并且只用于简单的任务，它就可以工作。我可能不会将它用于网络请求和其他长时间运行的复杂任务。

import { useRef } from 'react';

function useComponentWillMount(callback: () => void) {
  const hasMounted = useRef(false);

  if (!hasMounted.current) {
    (() => {
      hasMounted.current = true;
      callback();
    })();
  }

  console.log(hasMounted.current);
  return null;
}

export default useComponentWillMount;

Answer 20

React 组件是一个函数，对吧？所以只要让componentWillMount moment 成为return 语句之前的函数体。

function componentWillMountMomentIsHere() {
  console.log('component will mount')
}


function AnyComponent(){
  const [greeting, setGreeting] = useState('Hello')

  componentWillMountMomentIsHere()

  
  return <h1>{greeting}</h1>
}

Answer 21

只需在 useEffect 中添加一个空的依赖数组，它将作为componentDidMount 工作。

useEffect(() => {
  // Your code here
  console.log("componentDidMount")
}, []);