对属性变化做出反应

Question

React 组件在状态改变时改变，但它能在属性值改变时改变吗？

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

React 的设计假设一旦组件被渲染，组件 props 可能被视为不可变的（它们不会改变），并且这将在 React 的未来版本中强制执行（从 React v0.13 开始将触发警告），请参阅此处：React V0.13 Changelog.

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

Answer 2

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

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

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

Answer 3

我不知道有任何 JavaScript 平台会采用 local 变量并在您使用时自动触发 UI 组件的更新'已经显示（没有实用且有效的方法可以在不使用计时器的情况下监视变量的变化）。

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

在所有 React 案例中，您将通过重新创建和渲染组件来触发更改。但是，由于这实际上只是一个虚拟 DOM，它不一定会导致 DOM 发生重大变化（使其可能更有效）。

在下面的简单情况下，它只意味着您使用 "bar" 的新值再次调用 render。

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 更新（同样，按照上述模式，或者您可能发现自己需要使用 forceUpdate from within a container/component). You might choose to follow the Flux pattern (more information).

对属性变化做出反应

React on attribute change

reactjs