React 渲染不同的组件答案

【问题标题】：React Rendering Different ComponentsReact 渲染不同的组件
【发布时间】：2017-05-31 05:50:41
【问题描述】：

假设我正在构建一个反应应用程序，该应用程序通过以这种方式单击按钮（单击相同的按钮）来更改框内的内容：

Click 1: Component 1
Click 2: Component 2
Click 3: Component 3
Click 4: Component 1
Click 5: Component 2
Click 6: Component 3

因此，显而易见的方法是通过状态，并在渲染方法中根据状态呈现您想要的组件。但我不希望重新渲染每个组件。也就是说，在单击按钮时，我只想让之前的组件变得不可见，并显示新元素。

这在简单的普通 HTML/CSS/JS 中很容易做到：

display:none;

但是如何在反应中解决这个问题，为什么它会比正常执行更好/更有效？

不一定要找完整的代码，更多的是了解要做什么。

提前致谢！

【问题讨论】：

点击 2 表示点击按钮 2 或两次点击同一个按钮？
@MayankShukla 两次单击同一个按钮。只有按钮，很抱歉造成混乱。我将编辑问题。
维护一个计数器作为状态并在每次点击时递增它，基于该路由器，您可以有条件地向组件添加样式，例如onClick={() => {this.setState((prevState) => ({counter: (prevState.counter + 1)%3)}))}}，然后在您需要在内部应用的组件样式中组件最外层 div <Component1 style={(this.state.counter == 0)? {display: 'block'}: {display: 'none'}}/>
@ShubhamKhatri 但是我为什么要使用 React 来做这件事，用 react 来做这件事会让操作更有效率吗？此外，如果您愿意，您也可以将您的评论作为答案。谢谢！
我通常会做的不是加载所有组件并隐藏它们，而是有条件地呈现它们，是的，我会将其添加为答案

标签： javascript css reactjs state web-deployment

【解决方案1】：

将计数器保持为状态并在每次点击时递增，基于该值，您可以有条件地向组件添加样式，例如

 onClick={() => {
     this.setState((prevState) => (
            {counter: (prevState.counter + 1)%3)}
             )
    )}
 }

然后在你需要在组件最外层div内部应用的组件样式中

<Component1 style={(this.state.counter == 0)? {display: 'block'}: {display: 'none'}}/>

在 Component1 中

render() {
    return <div style={this.props.style}>{/* Content Here */}</div>
}

另外，由于 React 维护了一个 Virtual DOM 来进行更新，它在渲染内容时更加高效和快速

【讨论】：

【解决方案2】：

希望这会有所帮助。如果您需要任何解释，请告诉我...

class Container extends React.Component {
  constructor(props) {
    super(props);
  }
  
  getContainer() {
    switch (this.props.id) {
      case 1:
        return (<div>First Container</div>);
      case 2:
        return (<div>Second Container</div>);
      case 3:
        return (<div>Third Container</div>);
      case 4:
        return (<div>4th Container</div>);
      case 5:
        return (<div>5th Container</div>);
      case 6:
        return (<div>6th Container</div>);
      case 7:
        return (<div>7th Container</div>);
      case 8:
        return (<div>8th Container</div>);
      default:
        return (<div>don't have a Container</div>);
    }
  }
  
  render() {
    return (
      <div>
        {this.getContainer()}
      </div>
      );
  }
};

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    };
    this.test = this.test.bind(this);
  }
  
  test() {
    this.setState(prevState => ({
      count: this.state.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        <button onClick={this.test}> click me {this.state.count}</button>
        <Container id={this.state.count}/>
      </div>
    );
  }
}

ReactDOM.render( <
  Test / > ,
  document.getElementById('main')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="main"></div>

【讨论】：

这不是 OP 问题的答案，因为他要求解决方案而不重新渲染组件。他只是想隐藏不应该显示的组件。

【解决方案3】：

使用状态并在 1 和 6 之间循环计数器，并按照您的想象使用计数器。渲染函数中的简单逻辑，或者后续的子组件都可以映射到你要展示的6个展示组件。

由于 react 会区分它们的 shadow DOM 以最大限度地减少重新渲染时的更改，因此与更改 HTML 标记显示或类相比，您通常可以节省大量渲染开销，同时创建更具表现力的代码。

从大局来看，我想说的是使用您在文档中看到的设计模式将它放在 React 中，除非/直到遇到问题，否则不要担心进一步的优化。通常你的渲染瓶颈将是一个写得很糟糕的循环函数，而不是 React 对组件的重新渲染。

编辑：

我想补充一点，您仍然可以通过可用的 HTML/CSS/JS 属性来定位 HTML 元素，方法是将 onClick 属性添加到调用 React 类中定义的函数的 React 渲染元素。通过这种方式，您仍然可以更改显示或类属性，同时保留 React 库和通用设计模式的其他好处。过去，我用它来开始对组件或其他功能进行自动对焦。在渲染组件的情况下，我仍然建议你相信 React 的优化，除非/直到给你一个不这样做的理由。

【讨论】：

【解决方案4】：

如果不管理状态和重新渲染，您将无法在 React 中完成此操作。如果您想使用 display: none 渲染除一张幻灯片之外的所有幻灯片，您必须在某处管理状态，并在组件更改时使用新样式重新渲染。

React 范式的核心部分是它的声明式方法。这意味着具有相同属性和状态的组件将始终呈现相同的视图。你要求的是

1) 为相同的 props/state 渲染不同视图的组件

或

2) 从 React 组件内部访问 DOM 并更改元素的样式

这两种方法在 React 中都不可行，而且在设计上也是如此。

至于在 React 中构建这是否有意义，没有一个直接的答案。如果您只想要一个静态轮播和一些其他静态内容，那么 vanilla JS 或 jQuery 可能是有效的选项。如果你想构建一个动态轮播，调用服务器端 API 来填充来自 CMS 的内容，或者尝试构建一个可重用的组件，可以集成到应用程序的各个部分，那么 React 可能是要走的路。

【讨论】：