重新呈现React js组件

Question

我必须用React js实现现有应用程序的新UI。这是react组件，在单击菜单项后呈现。我注意到用于react的chrome dev tools插件每次点击菜单时都会显示新创建的组件。这不是在浪费内存吗？这是Sammy.js的菜单激活码

this.get('#/security',function(){
        this.swap("");
        React.render(
           <MainComponent/>,
           document.getElementById('content')
       );
    });

Answer 1

是的，你应该只React.render一次。尝试如下所示：

React.render(<App />, document.getElementById('content'));

const App = React.createClass({
  getInitialState() {
    return { loaded: false };
  },

  componentDidMount() {
    this.get('#/security',function(){
      this.swap("");
      this.setState({ loaded: true });  
    });
  },

  render() {
    return (
      <div>
        {this.state.loaded ? <MainComponent /> : null}
      </div>
    );
  }
});

Answer 2

根据React top-level API documentation的说法

如果ReactElement之前被渲染到容器中，这将对其执行更新，并仅在必要时更改DOM以反映最新的React组件。

因此，重新渲染不应该创建新的组件，而应该更新以前的组件。

根据您的用例，您可能希望处理React应用程序或组件中的菜单单击，并在内部更新状态并重新呈现，但这在您的情况下可能不可能实现。

Answer 3

状态更改后的forceUpdate()可能会解决手动呈现组件的问题。

  this.forceUpdate();//manually renders components of each time the state changed