即使我通过相同的参考，可以反应usestate rerender？

Question

我知道的是，如果我们通过同一状态，我将不会恢复，我自己对其进行了测试，但是仅在组件首次启动时才起作用，而初始状态传递给了Usestate。 但是在下面的示例中，即使我传递了相同的参考，美国植物也会重新启动组件，也知道状态不会改变。 带有控制台的图片显示了这种行为。

const arr = [
  { name: 'Khaled', id: 0 },
  { name: 'Mohamed', id: 1 },
  { name: 'Ahmed', id: 2 },
  { name: 'Mohsen', id: 3 },
];

function App() {
  console.log('num $1');

  const [same, setSame] = useState({});

  useEffect(() => {
    console.log('num $3');

    const test = arr.find((el) => el.id === 0);
    console.log(Object.is(same, test));
    setSame(test);
  }, [same]);

  console.log('num $2');

  return <div>welcome</div>;
}

Answer 1

组件是两次渲染的，因为您具有相同状态的初始值，该值为空{}。在使用效果内部，您可以使用一个新对象更新此状态，然后使用效果触发已添加到相同状态的新值。这是您数组中的匹配对象。然后重新渲染组件，这就是为什么您进入控制台的原因。

   const arr = [
      { name: 'Khaled', id: 0 },
      { name: 'Mohamed', id: 1 },
      { name: 'Ahmed', id: 2 },
      { name: 'Mohsen', id: 3 },
    ];
    
    function App() {
      console.log('num $1');
    
      const [same, setSame] = useState({}); <= initial value
    
      useEffect(() => {
        console.log('num $3');
    
        const test = arr.find((el) => el.id === 0);
        console.log(Object.is(same, test)); <= changed from false to true because the new value of same
        setSame(test); <= you updated the state
      }, [same]); <= the value of same changed from { } to a new value and that's make the component to re-render
    
      console.log('num $2');
    
      return <div>welcome</div>;
    }

这是您上次评论的更新。

import { useState, useEffect } from "react";

const arr = [
  { name: "Khaled", id: 0 },
  { name: "Mohamed", id: 1 },
  { name: "Ahmed", id: 2 },
  { name: "Mohsen", id: 3 }
];

export default function App() {
  const [same, setSame] = useState(arr);

  useEffect(() => {
    const test = arr.find((el) => el.id === 0);
    console.log(same); <= here the same is [] with 4 objecs
    setSame(test);
    console.log(same); <= here the same is { }
  }, [same]);

  return <div>welcome</div>;
}

与之那样。这将使我们的使用效率一旦看到相同被更新。然后，它将像我之前提到的那样重新渲染组件。

这里相同具有相同的数据。但是它们是不同的，因为第一个相同是[]，第二个是{}。因此，这是国家的变化。然后使用效率将重新渲染。

Answer 2

以前的答案很好地解释了这一点。为了没有状态重新渲染，您必须使用原始数组初始化它。

const arr = [
  { name: 'Khaled', id: 0 },
  { name: 'Mohamed', id: 1 },
  { name: 'Ahmed', id: 2 },
  { name: 'Mohsen', id: 3 },
];

function App() {
  console.log('num $1');

  const [same, setSame] = useState(arr); <= initial value is now original arr

  useEffect(() => {
    console.log('num $3');

    const test = arr.find((el) => el.id === 0);
    console.log(Object.is(same, test)); <= changed from false to true because the new value of same
    setSame(test); <= you updated the state
  }, [same]); <= the value of same changed from { } to a new value

  console.log('num $2');

  return <div>welcome</div>;
}

请注意，这仅适用于参考类型。 Hook不会对对象或数组进行比较，它只是检查参考是否更改。这对价值类型不起作用。

Answer 3

我对您到底要做什么有些困惑，但这是我对此的理解，并希望能解决您的问题。

重要的是要记住，无论如何，useffect（）都会在组件安装（第一个渲染）上调用。这就是为什么您的组件正在吐出num $ 3首次渲染的控制台登录，即使从逻辑上看，您也希望它不会以setSame（）（）函数在usefeft（）本身之内。

出于以看似相同的对象设置状态之后的组件重新订阅者的原因，在这里要记住的另一个重要的事情（通常使用JavaScript）是参考等值。考虑以下内容：

{} === {} //false

即使从逻辑上讲，您也希望两个相同的对象将其评估为两个平等，就JavaScript而言，它们并不相同。因此，当您将对象传递到setSame（）函数外观与相同状态相同的函数时，JavaScript考虑了它是改变状态的，并提示在React中重新渲染。

希望这会有所帮助。