componentDidMount是否等效于React函数/ Hooks组件？

Question

是否有componentDidMount可能通过钩子在React功能组件中进行仿真的方法？

Answer 1

对于钩子的稳定版本（反应版本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]);

这样，无论何时更新计数，组件都将重新呈现。希望这会有所帮助。

Answer 2

componentDidMount在反应钩子中没有确切的等价物。

根据我的经验，react hooks 在开发时需要不同的思维方式，一般来说，你不应该将它与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。

来源（更多细节）：在反应钩子中使用 componentDidMount

Answer 3

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

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

i) 组件DidMount

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

ii) 组件更新

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

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

iii) 组件已卸载

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

您可以查看官方反应网站以获取更多信息。Hooks 官方 React 页面

Answer 4

没有componentDidMount功能组件，但是 React Hooks 提供了一种可以通过使用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>