钩子如何知道何时触发(或不触发)useEffect的主体

Question

查看官方的react文档，给出了一个编写自定义钩子的示例，如下所示：

function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
function ChatRecipientPicker() {
const [recipientID, setRecipientID] = useState(1);
const isRecipientOnline = useFriendStatus(recipientID);
return (
<>
<Circle color={isRecipientOnline ? 'green' : 'red'} />
<select
value={recipientID}
onChange={e => setRecipientID(Number(e.target.value))}
>
{friendList.map(friend => (
<option key={friend.id} value={friend.id}>
{friend.name}
</option>
))}
</select>
</>
);
}

我感到困惑的部分是，我的理解是，每次组件重新渲染时，useEffect(...)都会触发，正如目前所描述的，只有在调用setRecipientID时才会发生。但是，假设添加了另一个状态变量，例如const [nameFilter, setNameFilter] = useState('')。在这种情况下，每当用户向过滤器中键入时，组件都会重新渲染，我认为这将触发"；"连接"；CCD_ 4中的逻辑。

我认为如果useEffect将friendID作为第二个参数，这会起作用，但作为新手，我不想假设官方文档没有以弹性的方式编写，这意味着我错了，react管道不知何故知道不连接每个重新渲染-但如何连接？

Answer 1

对于useEffect，您需要提供一个将要执行的回调，还需要提供一组值，这些值将决定何时触发效果。这里有三个选项：

1. 您什么都不通过-每次组件呈现时都会触发useEffect

2. 您传递一个空数组-当组件安装时，useEffect只触发一次

3. 您传递一个包含道具和状态变量的数组-首次安装组件时会触发useEffect，每次至少有一个变量更改

React没有做任何其他事情来减少调用useEffect的次数，所以是的，您确实需要明确提供效果所依赖的变量(在您的情况下为friendID)