React Hooks - useEffect，仅在我更新特定属性时调用函数答案

【问题标题】：React Hooks - useEffect, call fuctions just when I update an specific propertyReact Hooks - useEffect，仅在我更新特定属性时调用函数
【发布时间】：2020-09-02 03:47:39
【问题描述】：

这是我的useEffect：

useEffect(() => {
        handleFetchUsers();
        handleFetchBooks();
}, [month, listUsers, listBooks]);

我想在第一次（以及当用户更改月份时）获取书籍和用户，并且当组件外部发生更改时我还需要获取书籍和用户（当缓存更改时，我想从缓存中获取)。

这里的问题是有 3 个属性，当书本更新时，useEffect 函数会调度所有的 fetch，如果用户没有更新，我不希望获取用户。

有没有办法只在图书更新时获取图书，而在用户更新时获取图书？

现在，我已经全部 fetch 重复了。

我记得在componentWillUpdated中，我通过比较nextProps和currentProps解决了这个问题：

if(nextProps.users !=== props.users){
  fetchUsers();
}

我想要这样的表演。

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

您可以（并且应该！）在一个功能组件中多次使用 useEffect。以这种方式分离您的关注点，您应该会看到您正在寻找的行为。

useEffect(() => {
    handleFetchBooks()
},[month])

useEffect(() => {
    handleFetchUsers()
},[YOUR_USER_DEPENDENCIES])

在每次重新渲染时，react 检查依赖项数组并在任何项目发生更改时重新触发钩子，因此通过将它们分开，您可以控制此行为。

【讨论】：

天哪！抱歉，因为我知道 useEffect 是函数组件的“componentWillMount”，所以我认为我不能多次使用 useEffect。谢谢！！！这很有道理，如果问题太简单了，请见谅。
@LeonardoCavani 肯定要习惯使用钩子的技巧之一，一旦你掌握了它，它就会变得非常强大，useEffect 替换了 componentWillMount 和 componentWillUpdate，它的工作方式也不完全一样，但如果您知道自己在做什么，则可以同时担任两者的角色。

【解决方案2】：

useEffect 牢记这一点，理想情况下应该有一个任务或者附加副作用。

所以基本上就像@Cal Irvine 的回答一样，您可以对副作用有单独的影响。

useEffect(() => {
        taskrelatedtomonthdependant();
}, [month]);

useEffect(() => {
        taskrelatedtouserdependant();
}, [month]);

【讨论】：