带有嵌套对象的无限环

Question

当我使用{data：{}}时，为什么它可以循环循环，而{data：data：1}？

codesandbox示例。

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
  const [test, setTest] = useState(true);
  const role = useRole({ data: {} }); // with object { data: 1 } all fine
  useEffect(() => {
    setTest(false);
  }, []);
  return 1;
}
export function useRole({ data }) {
  const [role, roleSet] = useState(false);
  useEffect(() => {
    console.log("looping");
    roleSet({});
  }, [data]);
  return role;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

我认为@tvg告诉的是正确的。对象比较是通过参考进行的。当您以代码中完成的方式创建对象时，每次都会创建新的参考对象。

const role = useRole({ data: {} });

即使您这样做：

let defaultRole = { data: {} }
const role = useRole(defaultRole);

它每次都会创建新对象。Defaultrole的值将在每个渲染中重新计算。

在这里可以做的是，React为我们提供了USEREF方法，除非明确更改，否则不会改变重读者。这是您阅读的链接：

useref文档您可以做这样的事情：

const { useEffect, useState, useRef }  = React
function App() {
  const [test, setTest] = useState(true);
  console.log("running this")
  let baseObj = {
    data: {}
  }
  const roleDefaultValueRef = useRef(baseObj)
  const role = useRole(roleDefaultValueRef.current);
  useEffect(() => {
    setTest(false);
  }, []);
  return 1
}
function useRole({ data }) {
  const [role, roleSet] = useState(false);
  useEffect(() => {
    console.log("looping");
    roleSet({});
    debugger
  }, [data]);
  return role;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

folllow up问题为什么在这种情况下，诸如data = {}之类的对象将起作用。因此，您的用户具有取决于数据的效果。假设您将Userole称为Userole({}(

现在在您的用户中，您正在将数据值从此传递对象{}中传播出来所以这条线

export function useRole({ data }) {
// data will be evaluated as undefined and undefined will remain same on //consecutive rerenders and hence the effect will not run 
}

这是当您将空白对象传递给Userole时正在运行的原因。

希望这会有所帮助。为了理解尝试在Userole中打印数据的价值，您一定会理解它：(

1 === 1 //true
undefined === undefined //true
{} === {} // false

Answer 2

我认为这与JavaScript的工作方式有关。

在React中，useEffect默认情况下每次渲染后运行。自定义该行为的一种方法是将列表作为第二个参数提供。

这样，反应将在渲染后与上一个渲染的提供值进行检查，并仅在值更改时调用效果。

这是问题出现的地方，因为您可能会验证以下示例：

if(1 === 1) {
    console.log("1 === 1");
}
if({} === {}) {
    console.log("{} === {}");
}

如果您运行此操作，则可能会在此处注意到1 === 1的输出。那是因为JavaScript并未将两个空对象视为平等。

由于您提供{ data: {} }并解开useRole中数据的值，因此您在列表中有一个空对象。

我希望有帮助。