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

Question

我知道如果状态改变，这个组件会重新渲染。但是当我将相同的对象插入到 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);
  };

此处link https://codesandbox.io/s/xenodochial-engelbart-33dl7

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

Answer 1

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

这就是为什么：

    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.

Answer 2

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

this.setState(this.obj3);

就像

this.setState({ do: true });

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

并且您只能在 构造函数 中使用 this.state 更改初始状态，您不会在 React

中改变状态

希望对您有所帮助

Answer 3

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

调用setState时，react会触发对render函数的调用。此 'call' 渲染函数可能会或可能不会导致 'commit' 到 DOM。

它导致 'commit' 到 DOM，仅当渲染 'call' 创建的虚拟 DOM 与当前实际 [=25] 存在差异时=].

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

我建议你完成这个 from kent c dodds

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

If i operate setState with parameter same reference object, why this re-render..?

reactjs

setstate

rerender