Javascript React ImmutableJS-ShouldComponentUpdate

父组件：

import React, { Component } from 'react';
import { Child } from './Child';

const testObject = {
  test: {
    one: false,
    two: false,
    three: false,
  },
};

export class Parent extends Component {
  constructor() {
    super();
    this.state = {
      test: testObject.test,
    };
  }

  render() {
    return (
      <Child test={ this.state.test } />
    )
}

import React, { Component, PropTypes } from 'react';

export class Child extends Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.test !== this.props.test;
  }

  render() {
    console.log('hey! i\'m rendering!!');
    return (
       <div>Child</div>
    );
  }
}

Child.propTypes = {
  test: PropTypes.object.isRequired,
};

import React，{Component}来自'React'；
从“/Child”导入{Child}；
常量testObject={
测试：{
一:错,，
二:错,，
三:错,，
},
};
导出类父扩展组件{
构造函数（）{
超级（）；
此.state={
test:testObject.test，
};
}
render（）{
返回(
)
}

子组件：

import React, { Component } from 'react';
import { Child } from './Child';

const testObject = {
  test: {
    one: false,
    two: false,
    three: false,
  },
};

export class Parent extends Component {
  constructor() {
    super();
    this.state = {
      test: testObject.test,
    };
  }

  render() {
    return (
      <Child test={ this.state.test } />
    )
}

import React, { Component, PropTypes } from 'react';

export class Child extends Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.test !== this.props.test;
  }

  render() {
    console.log('hey! i\'m rendering!!');
    return (
       <div>Child</div>
    );
  }
}

Child.propTypes = {
  test: PropTypes.object.isRequired,
};

import React，{Component，PropTypes}来自'React'；
导出类子扩展组件{
应更新组件（下一步）{
return nextrops.test！==this.props.test；
}
render（）{
log（'嘿！我正在渲染！！'）；
返回(
小孩
);
}
}
Child.propTypes={
测试：需要PropTypes.object.isRequired，
};

问题:

---

现在，它不起作用。当我们假设test.one变为真时，是否应该重新呈现ComponentUpdate。我阅读了immutablejs和react doc上的文档，但我仍然不明白。这对你们来说应该很容易，有人能帮帮忙吗？

testObject

不是不可变的。确保它不能被另一个对象替换：

testObject=a禁止任何对象

，但可以修改

1

、

2

或

3

：

testObject.one=true

即可。ImmutableJS提供了禁止

testObject

值修改的机制

---

调用SetState将创建一个新的

this.state.test

，因此，

nextrops.test！==this.props.test

始终会重新返回true。

您的组件会重新呈现，因为求值

nextrops.test！==this.props.test

将始终返回

true

，因为值或类型都不会更改

您似乎只更改了

test

对象的

one

、

two

和

three

的属性值。这里的问题是，您试图将一个对象的属性求值到另一个对象，而这不能通过（严格的）比较运算符（如

=

或

==

）来完成

解决此问题的一种方法是将对象转换为JSON进行比较：

return JSON.stringify(nextProps.test) !== JSON.stringify(this.props.test);

另一个解决方案是逐个比较每个属性：

for(let key in this.props.test) {
  if(!(key in nextProps.test) || this.props.test[key] !== nextProps.test[key]) {
    return true; //the current property didn't evaluate - component should update 
  }
}
for(var key in nextProps.test) {
  if(!(key in this.props.test) || nextProps.test[key] !== this.props.test[key]) {
    return true; //the current property didn't evaluate - component should update 
  }
}
return false; //the objects are equal - component shouldn't update

---

Edit:Damien Leroux正确地指出，您的

testObject

是不可变的，因为您已将其声明为常量。您可能想更改它。

如何修改测试？我一直在更新状态，如下所示：const newState=update（this.state，{test:{one:{$set:true}}）；this.setState（newState）；我本想简化，但忘了添加setState。我读了你下面的帖子，谢谢你的帮助。我不能用immutablejs查看对象的值是否发生了变化吗？这是我在文档中读到的内容，但不知道它在我的情况下是如何工作的……你可以用它来验证对象值是否发生了变化Hanks，shall equals是否完美工作。如果可以，我还有一个问题回答我。现在，当道具从父级传递更改时，我的子组件不会重新渲染，但是当父级中的其他状态更改没有作为道具传递给子级时，它会重新渲染。很明显，它应该这样做，但是有没有简单的方法阻止它重新渲染？我不想将不必要的道具传递给子级…不管怎样，我just添加了return false:）谢谢，我被你以前的帖子弄糊涂了。谢谢你帮我把它分解了。