reactjs 如果对象引用相同,为什么react会重新渲染组件?

h7wcgrx3  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(178)

我知道我们使用spread操作符来制作一个现有对象的精确副本,但使用新的引用,以便react将重新呈现组件。但我不明白为什么实际上我们不需要在这种情况下使用spread操作符:

import {useState } from 'react';

function Users() {
  const [obj1, setObj]=useState({name: "User_1"});

  const obj2={name: "User_2"}

  const clicked =()=> {

    obj2.name=`User_${2+Math.random()}`;
    setObj(obj2);
  }

  return (
    <div>
      <button onClick={clicked}>{obj1.name}</button>
    </div>
    );
}
  
export default Users;

我知道在第一次点击时它应该被更新,因为引用被更改为新的数组(从obj 1到obj 2),但我想在第一次点击后它不会再渲染了,因为引用是相同的(从obj 2到obj 2),但令我惊讶的是它实际上更新了。我想知道背后的原因,因为它让我困惑。提前感谢任何帮助!

hjzp0vay

hjzp0vay1#

常量对象2 ={名称:“用户_2”}
每次组件呈现时,这一行都会生成一个全新的对象。变量名(obj2)可能是相同的,但它是对新对象的新引用。因此,每次设置state时,都是将其设置为与当前状态不同的对象,这意味着组件会重新呈现。

相关问题