Question

在状态更改时更改组件更改，但在属性值更改时可以更改。

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var name="foo";
React.render(<Hello name={name} />, document.body);
name="bar";

上面我想看到'Hello bar'呈现。

Answer 1

我不知道任何JavaScript平台会采用本地变量并自动触发UI组件的更新（如您所示）（没有实用且有效的方法来监控变量不使用计时器进行更改）。

虽然您可能遇到的某些JavaScript框架确实会更改对象属性的跟踪，但ReactJS目前不是其中之一。

在所有React案例中，您将通过重新创建和呈现组件来触发更改。但是，由于这实际上只是一个虚拟DOM，因此不一定会导致DOM显着改变（使其更有效）。

在下面的简单案例中，这只是意味着您使用新值render再次致电"bar"。

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var name="foo";
React.render(<Hello name={name} />, document.body);
name = "bar";
React.render(<Hello name={name} />, document.body);

在一个更复杂的场景中，您可能会有一个容器组件连接到Store的更改并触发UI更新（再次，通过遵循上面的模式，或者您可能发现自己需要使用{来自容器/组件内的{3}}。您可以选择遵循Flux模式（forceUpdate）。

Answer 2

React的设计假设组件道具在呈现组件时可能被视为不可变（它们不会改变），这将在React的未来版本中强制执行（从React v0.13开始）将触发警告），请参见此处：React V0.13 Changelog。

如果要在渲染后更改属性的值，则需要使用新的prop值重新渲染组件。

Answer 3

在这种情况下，您必须在React组件上调用forceUpdate。这有助于刷新。

c = React.render(<Hello name={name} />, document.body);
c.forceUpdate();

然而，这是某种糟糕设计的标志。理想情况下使用setState来保持数据同步。或者从父组件传递属性并在父组件上调用setState。

对属性更改做出反应

3 个答案: