https://segmentfault.com/a/1190000044797431

Class组件的生命周期

在深入探讨之前，让我们先回顾一下Class组件的生命周期。这就像是老式的电影放映机，有着它复杂的装置和操作，但却能稳定运行。

1. 挂载阶段（Mounting）
   • constructor(): 组件的构造函数，是初始化状态的绝佳地点。
   • render(): 组件渲染的核心，所有的JSX都在这里变为现实。
   • componentDidMount(): 组件挂载完成后调用，这里是发送网络请求的好地方。
2. 更新阶段（Updating）
   • shouldComponentUpdate(): 决定组件是否重新渲染的关键时刻。
   • render(): 是的，render()方法又来了，它就像是老工人，无论何时都在岗位上。
   • componentDidUpdate(): 组件更新后被调用，可以做一些后续操作。
3. 卸载阶段（Unmounting）
   • componentWillUnmount(): 组件即将被卸载和销毁之前调用，清理工作在这里进行。

Hooks与Function组件

然后是Function组件，它们就像是那种新兴的无人机，灵活、简洁，而且随着Hooks的加入，它们的功能变得无所不能。

1. useState
   • 用于添加状态到函数组件中。这就像是给无人机装上了摄像头，突然间它们能做更多事了。
2. useEffect
   • 这个钩子让你在函数组件中执行副作用操作。可以看作是组件的componentDidMount, componentDidUpdate, 和 componentWillUnmount的组合。
3. 自定义Hooks
   • 当你觉得React提供的钩子还不够用时，还可以自定义Hooks，这就像是给无人机装上了激光枪，让它变得更强大。

对比与迁移

当我们比较Class组件和Function组件时，很容易看出后者的简洁和灵活性。但这不意味着Class组件就完全过时了。某些复杂的场景下，使用Class组件可能会更有优势，但随着Hooks的成熟，这种情况正在迅速改变。

对于新手而言，可能会对Hooks感到恐惧，就像面对未知的星际旅行一样。但不要担心，一旦你习惯了Hooks的强大和灵活，你就会发现，构建React应用变得更加快速和愉快。