javascript - 重新渲染 React js 组件

Question

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

状态改变后的 forceUpdate() 可能会解决手动渲染组件的问题。

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

Answer 3

根据React 顶级 API 文档：

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

所以重新渲染不应该创建一个新的组件，而是更新前一个。

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