componentDidMount等效React函数/Hooks组件?

在React的功能组件中，有方法通过钩子来模拟componentDidMount吗?

当前回答

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

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

我)componentDidMount

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

(二)componentDidUpdate

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

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

3) componentDidUnmount

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

你可以查看官方react网站获取更多信息。hook的官方反应页面

2021-02-05 13:25:20

其他回答

在react钩子中没有完全等价的componentDidMount。

根据我的经验，react钩子在开发时需要不同的心态，一般来说，你不应该将它与componentDidMount等类方法进行比较。

尽管如此，还是有一些方法可以使用钩子来产生与componentDidMount类似的效果。

解决方案1:

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

解决方案2:

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()
}, [])

解决方案4 (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。如果你决定你需要解决方案5，那么我建议使用这个预先制作的钩子use-did-mount。

来源(更多细节):在react钩子中使用componentDidMount

2020-11-26 14:11:28

您希望使用useEffect()，这取决于您如何使用函数，可以像componentDidMount()一样工作。

如。你可以使用一个自定义的加载状态属性，初始设置为false，并在呈现时将其切换为true，并且仅在该值发生变化时触发效果。

文档

2018-12-27 14:13:15

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

2021-08-08 14:42:37

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

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

请阅读有关useEffect的文档。

2018-12-29 23:09:38