javascript - Reactjs:为什么子组件不在数据更改时重新呈现？

Question

React.js 是否应该在根组件的状态发生变化时重新渲染所有子组件(子组件)？

请看这个例子: http://jsfiddle.net/F8H7p/8/

在上面的例子中，当 Dashboard 组件的状态改变时，只有 Search 子组件重新渲染。但其他子组件 - 部分、图表和小部件不会重新呈现。

这是我的 renderComponent 的样子:

React.renderComponent(Dashboard({title: "D", children: [Section({title: "S", children: [Widget({title: "W"}), Chart()]})]}), document.body);

知道为什么吗？

Answer 1

当您更新 Dashboard 时，React 会重新渲染由 Dashboard render 方法创建的每个组件。在这种情况下，您通过 this.props.children 传递组件，因此预计它们不依赖于 Dashboard 的状态，因此它们不会重新呈现。

如果您的应用不是这种情况，您可能想要创建一个更高级别的 Page 组件来处理此状态并呈现 Dashboard 组件及其子组件。使用该结构，您的 renderComponent 调用将类似于:

React.renderComponent(Page(), document.body);