揭秘:如何用React的两大神器斩断性能瓶颈,让你的应用飞起来!-CSDN博客
很多人对 useEffect 的认识都是从类组件的 compomentDidMount 中转化来的,其实对于现在 react 的生态情况来说,现在接触 react 完全没必要去了解类组件的生命周期,你完成可以抛弃类组件的那一套思想。
随着React的发展,尤其是自从引入Hooks以来,函数组件的能力得到了极大的扩展和增强,使得我们可以更加灵活和简洁地构建组件。useEffect钩子的引入尤其标志着这种转变,它为函数组件提供了执行副作用操作的能力,这在以前是通过类组件的生命周期方法如componentDidMount、componentDidUpdate和componentWillUnmount来实现的。
抛弃类组件的思维模式
对于新接触React的开发者来说,直接学习和掌握函数组件及其Hooks可以说是更为直接和高效的路径。这不仅仅是因为函数组件的语法更为简洁,更重要的是,Hooks提供了一种更加直观和灵活的方式来处理副作用、状态管理、上下文(Context)等,而不必深入了解类组件的生命周期方法。
useEffect与生命周期的映射
useEffect允许我们在函数组件内处理副作用,例如数据请求、订阅或手动更改DOM,这些在类组件中通常在不同的生命周期方法中处理。通过useEffect,我们可以将所有这些副作用放在一个地方,使得代码更为集中和一致。更重要的是,useEffect提供了依赖项数组,让我们有能力精确控制副作用的执行时机,这是类组件生命周期方法难以精确做到的。
现代React的生态
随着时间的推移,React团队和社区都在向Hooks和函数组件的使用倾斜。这不仅反映在官方文档和教程中,也体现在新项目和库的开发中。学习和使用函数组件及其Hooks,意味着紧跟React的最新实践,也更易于在现代React生态中找到相关的资源和社区支持。
import React, { useEffect } from 'react';
function FunctionalComponent() {
useEffect(() => {
const handleResize = () => {
// 处理窗口大小改变
};
window.addEventListener('resize', handleResize);
// 清除副作用
return () => window.removeEventListener('resize', handleResize);
}, []);
return <div>查看控制台了解窗口大小变化</div>;
}
上面这个例子,使用了一个 useEffect,第一个参数接收一个函数,并可以返回一个函数。第二个参数是一个依赖项数值,在前面的文章中,我们知道了 react 的每一次更新都是重新执行这个函数,那么当 react 重新执行这个函数的时候遇到 useEffect 时会发生什么呢。
- 如果是首次执行,那么就将第一个参数的函数保存到一个队列中,等待 react 与浏览器后续的调用(这里展示按下不表,等以后的文章解析),这里还会保存依赖项数组。
- 如果是后面更新导致的重新执行,都会将第一个参数的函数保存到一个队列中,但是会比较依赖项数组,如果数组不相同了,那么就会添加不同的 tag,这样在后续调用的时候才决定执不执行。
- 使用useEffect的执行时机,大致能理解为,每一次重新执行函数组件都会去比较依赖项数组,如果数组不一样则执行。那么就很简单了,要执行一次就使用空数值,如果要监听数值变化,就将数值填进依赖数组。
总的来说,对于新手来说,直接学习函数组件和Hooks不仅能够更快速地上手React,也能够更好地适应现代React的开发模式。useEffect和其他Hooks提供的能力完全能够覆盖类组件生命周期方法的使用场景,使得开发者可以用更简洁和现代的方式编写组件。随着React生态的不断进化,抛弃类组件的思维模式,拥抱函数组件和Hooks,无疑是顺应潮流的选择。