React的Effect Hook解决函数组件的性能问题和潜在bug！
原创
React的Effect Hook解决函数组件的性能问题和潜在bug！
原创
一、Effect Hook 是啥？
Hook 是以 use 开头的特殊函数，让 函数组件 拥有 calss组件 的某些特性。Effect Hook 就是指 useEffect 这个特殊函数，它让 函数组件 能在渲染完成后执行自定义操作。
useEffect 中要谨慎使用 useState，因为它会触发组件渲染后，再次调用 useEffect，形成一个死循环。正确方式：用条件语句包裹 useState 方法，定义了退出条件，避开死循环。
二、3种使用方式
让组件只监控特定数据的变更，再进行渲染后的操作，忽略不必要的操作，很好的优化了组件性能。
1、useEffect(() => { })
只有一个参数，每一次组件渲染完成后 且 在下一次渲染前 被调用。
// 1、导入useEffect；
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 2、调用，箭头函数作为其唯一参数
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}2、useEffect(() => { }, [])
有两个参数，第二个参数是空数组([]) 。在组件首次加载渲染完成后被调用，且只被调用这一次。
useEffect(() => {
function doSomething() {
console.log('hello');
}
doSomething();
}, []);3、useEffect(() => { }, count)
有两个参数，第二个参数是数组。只有当数组里面的值改变时，useEffect 才会被调用。
// 只有当 `props.source` 改变后才会调用 useEffect。
useEffect(
() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
},
[props.source],
);三、清除机制
useEffect 被调用时，执行了一些操作（譬如设定了一个定时器、访问了一些网络资源），在组件卸载时，必须做一些清除操作来防止内存泄露等问题。
解决方案：只需要在 useEffect 中返回一个清除函数，React会在组件卸载之前调用清除函数。
// 函数组件中实现：用户登录状态更新和清除
// ChatAPI是假设的模块，它允许我们订阅好友的在线状态。
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// 返回清除函数
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}四、依赖值频繁变化，怎么办？
1、问题：
useEffect 没有指定依赖，意味着 useEffect 只会运行一次，其内部获取到的 count 永远是初始值0，导致页面 中的<h1>{count}</h1> 值，永远是1。
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>;
}2、不完美解决方案
在 useEffect 中添加 count 依赖，这样每一次 useEffect 执行 setCount 带来count的变化，都会使得 useEffect 再次被调用，可以解决问题，但是这样会带来另一个问题，每一次执行 useEffect 都会清除计时器，再重新设置计时器，这不是我们想要的。
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(count + 1); // 这个 effect 依赖于 `count` state
}, 1000);
return () => clearInterval(id);
}, [count]); // 添加 count 依赖
return <h1>{count}</h1>;
}3、最终解决方案
采用 setState 的更新特性，让 setCount 自己去获取和更新 count，让 useEffect 完全脱离对 count 的依赖，实现最终理想效果。
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>;
}五、函数组件中实现class组件中的this
1、useRef + useEffect
使用 useRef 和 useEffect 来实现，仅当你实在找不到更好办法的时候才这么做，因为依赖于变更会使得组件更难以预测。
function Example(props) {
// 把最新的 props 保存在一个 ref 中
const latestProps = useRef(props);
useEffect(() => {
latestProps.current = props;
});
useEffect(() => {
function tick() {
// 在任何时候读取 props 都是最新的
console.log(latestProps.current);
}
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, []); // 这个 effect 只会执行一次
}六、依赖回调函数更新
1、useCallback + useEffect
function ProductPage({ productId }) {
// ✅ 用 useCallback 包裹以避免随渲染发生改变
const fetchProduct = useCallback(() => {
// ... Does something with productId ...
}, [productId]); // ✅ useCallback 的所有依赖都被指定了
return <ProductDetails fetchProduct={fetchProduct} />;
}
function ProductDetails({ fetchProduct }) {
useEffect(() => {
fetchProduct();
}, [fetchProduct]); // ✅ useEffect 的所有依赖都被指定了
// ...
}七、useLayoutEffect
useEffect 会在组件完全渲染完后被调用执行，此时执行的 useEffect ，如果涉及到可见DOM变更，就可能给客户带来视觉上的跳跃感，此时可以考虑使用 useLayoutEffect，使用方式跟 useEffect 完全一样，只是被调用的时机不同。
八、参考文档
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
