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

问题描述 投票:26回答:4

在React的官方文档中提到 -

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

我的问题是 - 我们如何在钩子中使用qazxsw poi生命周期方法?

javascript reactjs jsx react-hooks
4个回答
78
投票

您不能在钩子中使用任何现有的生命周期方法(componentDidMount,componentDidUpdate,componentWillUnmount等)。它们只能在类组件中使用。而Hooks只能用于功能组件。 React doc下面的内容是什么

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

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

componentDidMount中的代码在安装组件时运行一次。 useEffect挂钩等效于此行为

componentWillMount()

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

如果没有第二个参数,将在组件的每个渲染上调用useEffect钩子,这可能是危险的。

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

componentWillUnmount用于清理(如删除事件侦听器,取消计时器等)。假设您要在componentDidMount中添加事件列表器,并在componentWillUnmount中将其删除,如下所示。

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

相当于以上代码的钩子如下

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

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

11
投票

根据reactjs.org,将来不支持componentWillMount。 useEffect(() => { window.addEventListener('mousemove', () => {}); // returned function will be called on component unmount return () => { window.removeEventListener('mousemove', () => {}) } }, [])

无需使用componentWillMount。

如果要在安装组件之前执行某些操作,只需在构造函数()中执行此操作即可。

如果要执行网络请求,请不要在componentWillMount中执行此操作。这是因为这样做会导致意外的错误。

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

希望能帮助到你。


更新于08/03/2019

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

只需在useState中执行即可。

https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

或者您可能希望在componentWillMount中运行一个函数,例如,如果您的原始代码如下所示:

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

使用hook,您需要做的就是删除生命周期方法:

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

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

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

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

useEffect(()=>{})

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

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

我创建了一个钩子样本。请检查一下。

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


4
投票

如果功能实际上类似于https://codesandbox.io/s/kw6xj153wr,那么useLayoutEffect可以通过一组空的观察者([])实现这一点 - 它将在第一个内容到达DOM之前运行 - 尽管实际上有两个更新但它们在绘制到屏幕。

例如:

componentWillMount

使用初始化程序/ setter或 function MyComponent({ ...andItsProps }) { useLayoutEffect(()=> { console.log('I am about to render!'); },[]); return (<div>some content</div>); } useState的好处是虽然它可以计算渲染过程,但是没有用户会注意到DOM的实际重新渲染,并且它在第一个显着渲染之前运行,这不是useEffect的案例。当然,在绘制到屏幕之前必须进行检查/更新,因此在第一次渲染时会出现轻微的延迟。但这确实取决于你的用例。

我个人认为,useEffect在一些需要做大事的利基案件中很好 - 只要你记住它是常态而不是常态。


0
投票

useMemo

请记住,传递给useMemo的函数在渲染过程中运行。不要做那些在渲染时通常不会做的事情。例如,副作用属于useEffect,而不是useMemo。


0
投票

useComponentDidMount hook

在大多数情况下,https://reactjs.org/docs/hooks-reference.html#usememo是使用的工具。组件安装后(初始渲染),它只运行一次。

useComponentDidMount

useComponentWillMount

值得注意的是,在类组件中, const useComponentDidMount = func => useEffect(func, []); 被认为是遗留的。如果您需要在安装组件之前只运行一次代码,则可以使用构造函数。 componentWillMount

由于功能组件不是构造函数的等价物,因此在某些情况下使用钩子在组件安装之前仅运行一次代码可能是有意义的。 More about it here将在imeditatly运行,只有在第一次从组件调用它之后。但是,不要传递包含副作用的回调(如服务器调用),因为我们不想延迟组件的呈现。这些应该传递给useComponentWillMount

useComponentDidMount

Demo

const useComponentWillMount = func => {
  const [willMount, setWillMount] = useState(true);
  useComponentDidMount(() => setWillMount(false));
  if (willMount) {
    func();
  }
};

const Component = (props) => { useComponentWillMount(() => console.log("Runs only once before component mounts")); useComponentDidMount(() => console.log("Runs only once after component mounts")); ... return ( <div> {...} </div> ); }

© www.soinside.com 2019 - 2024. All rights reserved.