06.useEffect

在 React 开发中,正确使用 useEffect 钩子对于优化组件性能至关重要。一个常见但容易被忽视的性能问题是在依赖数组中使用对象作为依赖项。这可能导致不必要的效果重新执行,从而影响应用性能。通过优先使用原始值(如字符串、数字)作为依赖项,我们可以显著提高组件的效率。

问题示例:

const CartItem = ({
     item }) => {
   
  useEffect
在React中,useEffect是一个用于执行副作用的Hook函数。它可以在函数组件中模拟类组件中的生命周期方法。useEffect函数接受两个参数,第一个参数是副作用函数,第二个参数是一个依赖数组。 如果不传递第二个参数,每次组件渲染时都会执行副作用函数。这意味着每次状态更新后,组件都会重新渲染并再次触发副作用函数。这可能会导致性能问题。例如: ``` useEffect(() => { console.log(props.number); setNumber(props.number); }); ``` 上述代码中,每次组件渲染时都会执行console.log和setNumber函数。 如果传递一个空的依赖数组作为第二个参数,副作用函数只会在组件挂载和卸载时执行,相当于类组件中的componentDidMount和componentWillUnmount。例如: ``` useEffect(() => { console.log('页面渲染完成'); }, []); ``` 上述代码中,console.log只会在组件挂载时执行一次。 如果传递一个非空的依赖数组作为第二个参数,副作用函数只会在依赖项发生变化时执行。例如: ``` const [count, setCount = useState(1); useEffect(() => { console.log('执行了'); }, [count]); ``` 上述代码中,console.log只会在count发生变化时执行。 综上所述,useEffect是用于执行副作用的Hook函数,可以用来模拟类组件中的生命周期方法。通过传递依赖数组,可以控制副作用函数的执行时机。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [react useEffect详解](https://blog.csdn.net/weixin_45760365/article/details/124386573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [react中的useEffect](https://blog.csdn.net/zsm4623/article/details/127733367)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@大迁世界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值