如果我使用参数相同的参考对象操作 setState，为啥要重新渲染..？

Posted 2023-02-22

【中文标题】如果我使用参数相同的参考对象操作 setState，为啥要重新渲染..？

【英文标题】：If i operate setState with parameter same reference object, why this re-render..?如果我使用参数相同的参考对象操作 setState，为什么要重新渲染..？

【发布时间】：2020-02-24 09:18:28

【问题描述】：

我知道如果状态改变，这个组件会重新渲染。 但是当我将相同的对象插入到 setState 的参数时。该组件正在重新渲染。 像这样

 obj1 = 
    do: true
  ;

  obj2 = 
    do: true
  ;

  obj3 = this.obj1;

  constructor(props) 
    super(props);

    //init state
    this.state = 
      do: true
    ;
    this.changeProps = this.changeProps.bind(this);
  

  changeProps = function() 
    this.setState(this.obj3);
  ;

这里链接 https://codesandbox.io/s/xenodochial-engelbart-33dl7

我能得到一些建议吗..？ 谢谢。

【问题讨论】：

调用渲染函数并不一定意味着对 DOM 进行了更改。渲染的“调用”可能会也可能不会导致“提交”到 DOM。

嗨，欢迎来到 SO。我不确定我是否理解您的问题，您能详细说明一下吗？

@TabishJaved 感谢您的建议 :) 我现在无法 100% 理解，但我会尽力理解您所说的！再次非常感谢你:) @TasosK。谢谢你的欢迎 :) 真诚地，我担心在这个 SO 中提出一些问题..但是感谢像你们这样的人，我想我可以问更多。绝对更合格的东西..ㅎㅎ再次非常感谢:)

【参考方案1】：

实际上当你这样做的时候.setState React 会看到这个对象中的属性，React 会使用这些属性来执行浅合并，所以在这里

this.setState(this.obj3);

就像

this.setState( do: true );

因为这就是这个对象所拥有的。所以这些属性 React 会更新。

你只能在 constructor 内部使用 this.state 来改变初始化状态，你不能在 React 中改变状态

希望对你有帮助

【讨论】：

感谢您的回答，我接受了我应该搜索的内容。谢谢你的帮助:)

很高兴它有帮助:-)

【参考方案2】：

每次打开和关闭括号来定义一个对象时，您都在定义一个不同的对象，无论它有什么属性。

这就是为什么：

    this.obj1 = 
      do: true
    ;

    this.obj2 = 
      do: true
    ;

    console.log(this.obj1 === this.obj2); // false

这里在内存中创建了两个对象，对它们中的每一个的引用分别作为值分配给 this.obj1 和 this.obj2。

当您执行this.obj3 = this.obj1; 时，obj3 的值将是对内存中已经存在的对象的引用。这两个对象将指向同一个对象，因此 console.log(this.obj1 === this.obj3); //true.

【讨论】：

因为我的问题表达晦涩难懂，我无法在你的回答中得到我想要的......对不起..但谢谢你:)

顺便说一句，this.setState 无论如何都会导致渲染。它不检查状态是否已更改。还有另一种方法可以决定是否应该在更新后进行渲染。

@Sulthan 是的，对！我确实 setState() 传递了空对象。然后重新渲染。谢谢你的评论：）

【参考方案3】：

我假设你的问题是，当对象不一定改变时，为什么会渲染。

当调用 setState 时，react 会触发对渲染函数的调用。渲染函数的这种“调用”可能会也可能不会导致“提交”到 DOM。

只有当渲染“调用”创建的虚拟 DOM 与当前实际 DOM 存在差异时，才会对 DOM 进行“提交”。

为了您的优化需求：重新渲染不是问题，而实际提交到 DOM 的重新渲染可能是问题。

我建议你通过这个from kent c dodds

【讨论】：

你的想法是对的！我必须搜索那个“提交”的意思。非常感谢:)