React 函数/Hooks 组件上的 componentDidMount 等价物？

小编典典

all

有没有办法componentDidMount通过钩子模拟 React 功能组件？

阅读 121

2022-06-09

共1个答案

小编典典

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

这样，每当您的计数更新时，您的组件就会重新渲染。希望这会有所帮助。

2022-06-09