Reactjs useEffect和依赖项数组

我试图理解react useEffect如何处理对象

下面是一个有助于说明我的问题的示例：

导出函数useffecthook{ 常量初始状态={ 名字：乔， 姓：史密斯， 地址:{ 住址：123街 } }; const[user，setUser]=useStateinitialState； const[count，setCount]=useState0； useEffect=>{ console.logtrigged； }，[用户]； 回来 使用效果-使用不同的DEP进行练习

{JSON.stringifyuser} 名字： setUser{…user，firstName:e.target.value} /> 姓氏： setUser{…user，lastName:e.target.value} /> setCountcount+1}>按钮 ; } 我已经读到，将对象作为依赖项放置在useEffect钩子中不起作用，因为对象是如何在重新渲染器之间进行比较的

我最初的想法是在这个示例中单击按钮，更新计数也会导致更新useEffect挂钩。情况并非如此，useEffect不会重新运行

我找不到一个精心设计的示例来帮助演示useEffect何时以及为什么使用对象重新运行。如有任何帮助，我们将不胜感激。

请在组件下方留言

变化：

将initialState移到UseEffectHook之外。你不需要去创造 每一次重新呈现的初始状态； use将返回一个回调的备忘录版本，只有当其中一个依赖项发生更改时才会更改； 使用设置用户和设置计数； handleOnChangeUser可用于用户对象的所有字段。每次handleOnChangeUser-创建对用户对象的新引用。在这种情况下，useEffect能够检测到变化； 从“React”导入React、{useCallback、useEffect、useState}； 常量初始状态={ 名字：乔， 姓：史密斯， 地址:{ 住址：香港湾仔街123号， } }; 导出函数useffecthook{ const[user，setUser]=useStateinitialState； const[count，setCount]=useState0； const handleOnChangeUser=useCallbackevent=>{ 常量{name，value}=event； setUserprevState=>{…prevState，[名称]：值}； }, []; const increaseCount=useCallback=>{ setCountprevState=>prevState+1； }, []; useEffect=>{ console.logtrigged； }，[用户]； 回来 使用效果-使用不同的DEP进行练习

{JSON.stringifyuser} 名字： 姓氏： 增长 ; } 吼叫你的部件

变化：

将initialState移到UseEffectHook之外。你不需要去创造 每一次重新呈现的初始状态； use将返回一个回调的备忘录版本，只有当其中一个依赖项发生更改时才会更改； 使用设置用户和设置计数； handleOnChangeUser可用于用户对象的所有字段。每次handleOnChangeUser-创建对用户对象的新引用。在这种情况下，useEffect能够检测到变化； 从“React”导入React、{useCallback、useEffect、useState}； 常量初始状态={ 名字：乔， 姓：史密斯， 地址:{ 住址：香港湾仔街123号， } }; 导出函数useffecthook{ const[user，setUser]=useStateinitialState； const[count，setCount]=useState0； const handleOnChangeUser=useCallbackevent=>{ 常量{name，value}=event； setUserprevState=>{…prevState，[名称]：值}； }, []; const increaseCount=useCallback=>{ setCountprevState=>prevState+1； }, []; useEffect=>{ console.logtrigged； }，[用户]； 回来 使用效果-使用不同的DEP进行练习

{JSON.stringifyuser} 名字： 姓氏： 增长 ;

---

} 每当对象更改引用时，useEffect将使用其依赖项数组中的对象重新运行

例如，在代码中，在调用setUser之前，user始终是稳定的，在这种情况下，它将更改为新引用并在该点运行

如果在每次渲染中将用户定义为新对象，则每次重新渲染组件时都会运行useEffect

  const user = {
    firstName: 'Joe',
    lastName: 'Smith',
    address: {
      home: '123 street',
    },
  };

---

这都是关于引用平等的。每个渲染上的previousUser===newUser。React本质上对依赖关系数组中的每个变量执行与我相信Object.is非常相似的检查。

useEffect将在对象更改引用时，使用其依赖关系数组中的对象重新运行

例如，在代码中，在调用setUser之前，user始终是稳定的，在这种情况下，它将更改为新引用并在该点运行

如果在每次渲染中将用户定义为新对象，则每次重新渲染组件时都会运行useEffect

  const user = {
    firstName: 'Joe',
    lastName: 'Smith',
    address: {
      home: '123 street',
    },
  };

这都是关于引用平等的。每个渲染上的previousUser===newUser。React本质上执行一个与我相信Object.is非常相似的检查

---

对于依赖项数组中的每个变量。

如果您希望count触发useEffect，则需要将其添加到依赖项数组：[user，count]也许我的示例过于刻意，无法有效，但我知道添加count会触发useEffect。我的目标是看看何时以及如何将对象添加到useEffect会导致重新渲染，因为jsI中的对象比较方式刚刚测试过它，它与一个对象一起工作。如果你想让count触发useEffect，你需要将它添加到依赖项数组：[user，count]也许我的示例太过做作而没有效果，但我知道增加计数会触发使用效果。我的目标是看看何时以及如何将对象添加到useffect引起重新渲染，因为jsI中的对象比较方式刚刚测试过它，它与一个对象一起工作。谢谢，这是我一直在寻找的答案。如果我有这个名声，我会投票。如果你觉得这个答案很好地回答了你的问题，你应该能够接受这个答案。谢谢，这就是我一直在寻找的答案。如果我有这个名声，我会投票。如果你觉得这个答案很好地回答了你的问题，你应该能够接受这个答案。