Question

我必须使用React js为现有应用程序实现新的UI。这是在单击菜单项后呈现的反应组件。我注意到反应的chrome dev工具插件显示每次单击菜单时创建的新组件。是不是浪费了记忆？这是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

rerender React js component

3 个答案: