wxya（个人网站）类组件和Hook 对比
‣
Class组件的生命周期
在深入探讨之前，让我们先回顾一下Class组件的生命周期。这就像是老式的电影放映机，有着它复杂的装置和操作，但却能稳定运行。
- 挂载阶段（Mounting）
constructor(): 组件的构造函数，是初始化状态的绝佳地点。render(): 组件渲染的核心，所有的JSX都在这里变为现实。componentDidMount(): 组件挂载完成后调用，这里是发送网络请求的好地方。
- 更新阶段（Updating）
shouldComponentUpdate(): 决定组件是否重新渲染的关键时刻。render(): 是的，render()方法又来了，它就像是老工人，无论何时都在岗位上。componentDidUpdate(): 组件更新后被调用，可以做一些后续操作。
- 卸载阶段（Unmounting）
componentWillUnmount(): 组件即将被卸载和销毁之前调用，清理工作在这里进行。
Hooks与Function组件
然后是Function组件，它们就像是那种新兴的无人机，灵活、简洁，而且随着Hooks的加入，它们的功能变得无所不能。
- useState
- 用于添加状态到函数组件中。这就像是给无人机装上了摄像头，突然间它们能做更多事了。
- useEffect
- 这个钩子让你在函数组件中执行副作用操作。可以看作是组件的
componentDidMount,componentDidUpdate, 和componentWillUnmount的组合。
- 自定义Hooks
- 当你觉得React提供的钩子还不够用时，还可以自定义Hooks，这就像是给无人机装上了激光枪，让它变得更强大。
对比与迁移
当我们比较Class组件和Function组件时，很容易看出后者的简洁和灵活性。但这不意味着Class组件就完全过时了。某些复杂的场景下，使用Class组件可能会更有优势，但随着Hooks的成熟，这种情况正在迅速改变。
对于新手而言，可能会对Hooks感到恐惧，就像面对未知的星际旅行一样。但不要担心，一旦你习惯了Hooks的强大和灵活，你就会发现，构建React应用变得更加快速和愉快。
Loading...