问componentDidMount等价于一个反应函数/钩子组件？
EN

Stack Overflow用户

提问于 2018-12-27 05:18:44

回答 11查看 155.8K关注 0票数 262

有什么方法可以通过钩子来模拟componentDidMount在功能组件中的反应？

javascript

reactjs

react-hooks

回答 11

Stack Overflow用户

回答已采纳

发布于 2019-02-12 09:22:29

对于钩子的稳定版本( 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);

每当计数增加时，您都希望重新呈现函数组件。那么您的useEffect应该是这样的

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

这样，每当计数更新时，组件就会重新呈现。希望这能有所帮助。

票数 516

Stack Overflow用户

发布于 2020-11-26 06:11:28

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

在我的经验中，requires在开发时需要一种不同的心态，一般来说，您不应该将它与类方法(如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])

解决方案3(有函数)：

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，那么我建议您使用这个预制钩子使用。

源(有更多详细信息)：componentDidMount在反应钩中的应用

票数 35

Stack Overflow用户

发布于 2018-12-29 15:09:38

函数组件上没有componentDidMount，但是React提供了一种通过使用useEffect钩子来模拟行为的方法。

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

请阅读useEffect。

function ComponentDidMount() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('componentDidMount');
  }, []);

  return (
    <div>
      <p>componentDidMount: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <ComponentDidMount />
  </div>,
  document.querySelector("#app")
);

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>