Reactjs:为什么子组件在数据变化时不重新渲染

Reactjs: Why child components aren't re-rendering on data change?

本文关键字：变化新渲染数据为什么组件 Reactjs 更新时间：2023-09-26

当根组件的状态改变时，React.js应该重新渲染所有子组件(子)?

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

在上面的例子中，当Dashboard组件的状态改变时，只有Search子组件重新呈现。但是其他子组件- Section, Chart &小部件不重新渲染。

这是我的renderComponent的样子:

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

知道为什么吗?

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

如果你的应用不是这种情况，你可能想要创建一个更高级的Page组件来处理这种状态，并呈现Dashboard组件及其子组件。有了这个结构，你的renderComponent调用就会像这样:

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