javascript - Reactjs SPA 应用程序 - 一切作为组件(性能和实践)

Question

我发现当您想“组件化”应用程序的小部分时，React 非常适合，但我不确定是否要制作完整的组件应用程序，比如说 SPA。

在我的示例中，我有一个单独的页面，其中包含一个菜单和一个用于“ View ”的内容位置，这些 View 也是其他组件。

我发现解决这个问题的方法是构建一个菜单组件，在它的渲染方法上我检查选择了什么选项并在这个内容位置显示它，它只不过是渲染方法中的一个开关盒(闻起来很容易修复)

var MenuComponent = React.createClass({
  getInitialState: function() {
    return { selectedPage: '' }
  },
  handleMenuClick: function(e) {
    this.setState({ selectedPage: e.target.attributes['data-page'].value});
  },
  render: function() {
    return (
      <div className='main'>
        <ul class='menu'>
          <li><button onClick={this.handleMenuClick} data-page='applicantList'>Applicant List</button></li>
          <li><button onClick={this.handleMenuClick} data-page='applicantForm'>Applicant Form</button></li>
        </ul>
        <div className='content'>
          {function() { 
            switch(this.state.selectedPage) {
              case 'applicantList':
                return <ApplicantList />
              case 'applicantForm':
                return <ApplicantForm />
              default:
                return <h1>Select a Page</h1>
            };
          }.bind(this)()}
        </div>
      </div>
    );
  }
});

从那时起，我想象一切都是一个组件，并有它们的子组件等等。我想知道这种方法是否是一种好的做法，它是否有性能或可维护性等缺点(我发现它更容易进行单元测试)。

Answer 1

将您的应用程序拆分成许多小组件是一个好主意，因为它往往会使事情更容易理解。将每个组件视为一个函数，其参数是 props；考虑到这一点，也许像您建议的那样拆分事物的优势更加明显。

单元测试是一个很好的理由，但像这样拆分成组件也会使代码更简单，所以我绝对推荐它。