javascript - 不需要渲染组件时的最佳实践

Question

我对 React 有点陌生，所以我的问题是关于我正在尝试做的事情的最佳实践。我可能不会“思考 react ”，所以我需要你的帮助。

我参与了一个与体育相关的非常大的项目。为了尽量减少我需要创建的组件数量，我尝试使用一个组件来处理多项运动。

我将尝试绘制一个基本场景，它将与我正在尝试做的类似事情相匹配。

-----------------------------------
|  module: Scoreboard             |
|                                 |
|  -----------------------------  |
|  | module: scores            |  |
|  |   Sydney 1 x 0 Melbourne  |  |
|  -----------------------------  |
|                                 |
|  -----------------------------  |
|  | module: results           |  |
|  -----------------------------  |
|                                 |
|  -----------------------------  |
|  | module: Footer            |  |
|  -----------------------------  |
|                                 |
-----------------------------------

考虑到这种情况，请注意所有 Prop 都是在组件加载时或通过父级加载的。

我需要在我的脚本中做两件事。

1 - 如果存在由 this.props.footer 表示的页脚，则仅显示组件 footer 2 - 如果存在由 this.props.results 表示的结果，则仅显示组件 results

现在我有一些可以在这里做的用户案例。

用户案例(家长控制)

在我的render 方法中，我可以做类似的事情(不要介意 {...this.props} 我只是放在那里表示我正在传递变量)

案例 1:

render: function() {
    var results, footer;

    if (this.props.results) {
        results = (<results {...this.props} />)
    }

    if (this.props.footer) {
        results = (<footer {...this.props} />)
    }

    return (
       <div class="scoreboard">
           <scores {...this.props} />
           {results}
           {footer}
       </div>
    );
}

我在这里看到的缺点是渲染中的 ifs 数量。可读性不是很好，特别是如果我们有超过 2 个组件做同样的事情

案例 2:

render: function() {
    return (
       <div class="scoreboard">
           <scores {...this.props} />
           {this.props.results ? <results {...this.props} /> : ''}
           {this.props.footer ? <footer {...this.props} /> : ''}
       </div>
    );
}

虽然我更喜欢这种情况，但有时我的组件需要大量属性，这些属性可能会遇到上述相同的问题(可读性)。请记住，我正在使用 {...this.props} 来简化示例

用户案例( child 控制)

我更喜欢这种情况。将所有逻辑放在它自己的组件中。

问题是我不知道如何停止第一次渲染。而且我也不想在页面上放置一个“显示: block ”以避免在不需要的地方添加不必要的标记，所以我的想法是如果不需要的话根本不要渲染组件。 如果我做错了，或者这是一个反模式，我想对它有一些了解，就像我说的，我是所有这些 react 的新手，欢迎任何评论。

基本上，就像我说的，我无法阻止它渲染。

让我们以结果组件为例，假设有一个表，里面有大约 10 行标记。我们来画个案例:

在我的render 方法中，我可以做类似的事情

module: SCOREBOARD 

render: function() {
    return (
       <div class="scoreboard">
           <scores {...this.props} />
           <results {...this.props} isVisible={this.props.results} />
           <footer {...this.props} isVisible={this.props.footer}  />
       </div>
    );
}

module: RESULTS

render: function() {
    return this.props.isVisible ? (
       <div class="results">
             <table>
                ....
             </table>
       </div>
    ) : null;
}

我会使用属性 isVisible 来控制渲染的返回。默认它总是假的。还没有找到一篇关于它的好文章，但我认为这不是一种优雅的方式。

我知道我们有一个 shouldComponentUpdate，但这不会停止页面上的第一次呈现，这将显示我们示例中的一些表格。

我想知道是否有人有一些见解、有效的论据或解决方案来完成我正在尝试做的事情。请记住，这是一个大项目，所以我试图避免创建数百个组件，而是不得不使用一个组件，其中有几个变量我可以或不可以在页面上显示该组件。

Answer 1

如果你有这个:

render: function() {
    return (
       <div class="scoreboard">
           <scores {...this.props} />
           {this.props.results ? <results {...this.props} /> : ''}
           {this.props.footer ? <footer {...this.props} /> : ''}
       </div>
    );
}

您可以将其重写为不同的方法:

render: function() {
    return (
       <div class="scoreboard">
           <scores {...this.props} />
           {this.props.results ? this.renderResults() : ''}
           {this.props.footer ? this.renderFooter() : ''}
       </div>
    );
},
renderResults(){
    return (
        <results {...this.props} />
    );
},
renderFooter(){
    return (
        <footer {...this.props} />
    );
},

这样条件部分就不会随着更多的 Prop 变大，但是 您仍然可以使用完整的子渲染。

---

To minimise the number of components I need to create, I'm trying to use one single component to deal with multiple sports

有很多组件也不错。你可以有很多微小的组件。在决定边界时考虑这些(根据明天的需求变化)。

对于 sibling (具有相似 api 的多个组件，未嵌套):

• 我需要一次性更新这些组件吗？合并
  • 示例:主按钮是您想要更改一次并影响所有内容的按钮
• 我需要区分这些组件吗？ split
  • 示例:计分板可能有显着的显示差异

对于 parent / child :

• 拆分是否使测试更容易？ split
  • 例子。输入列表，测试一个输入的事件比测试输入列表更简单
• 它是否通过拆分降低了复杂性？拆分
• 拆分会导致毫无意义的小组件吗？合并

avoiding to add unnecessary markup

有不必要的标记是 React 中经常发生的事情。这是一个权衡，但通常不会导致问题。

I would control the return of the render with a property isVisible

这是一个反模式。除非您在每个组件中都这样做，否则您是在对组件的用户做出假设，这会使您的代码模块化程度较低且更难以维护。除非你有充分的理由不这样做，否则在父级中进行条件渲染。