React Native 复杂条件渲染设计模式答案

【问题标题】：React Native complex conditional rendering design patternReact Native 复杂条件渲染设计模式
【发布时间】：2020-02-16 00:02:21
【问题描述】：

我的应用中有一条路线，该路线可能会根据传递给它的状态而有很大差异。例如，假设我们有 3 个状态：state1、state2 和 state3。在每种状态下都会呈现一些功能组件（例如页眉和页脚，但它们的内容可能会有所不同）。我还有其他组件只能在 state1 中呈现，其他组件只能在 state2 中呈现，等等。

我的问题是，在此路径中设置条件渲染以保持代码可扩展性和可维护性的最佳方法是什么？

当前实施： 目前，我将状态传递给每个下游组件，并根据给定的状态处理每个组件内部的条件渲染，通常使用 switch 语句。我已经开始遇到这样一个问题，即添加另一个状态或修改我想要为某个状态呈现的内容会成为一个耗时且混乱的过程。

选项一： 我一直在考虑的第一个模式是为每个状态创建不同的视图。这些特定于状态的视图将仅包含我希望为该特定状态呈现的组件。然后我可以将所有视图包装在一个更高阶的组件中，该组件将根据传递的状态呈现正确的视图。我觉得这个选项将是可扩展/可维护的，但是我认为它也会导致大量重复代码。例如：

switch (currentState) {
  case "state1":
    return <State1Component />
  case "state2":
    return <State2Component />
  ...
}

State1Component 看起来像这样：

class State1Component extends Component {
  state = {
    headerText: "lorem ipsum",
    componentText: "..."
    ...
  }
  
  render() {
    return (
      <View>
        <Header headerText={headerText} />
        ...
      </View>
    )
  }
}

第二个选项： 我想到的另一个选择是创建一个单独的高级对象，其中包含每个不同状态下每个下游组件所需的所有信息。该对象将包含在主路由中。例如，

stateObject = {
  state1: {
    header: {
      renderComponent: true,
      text: "Welcome to state1"
    },
    component1: {
      renderComponent: false,
    },
    ...
  },
  state2: {
  ...
  }
  ...
}

现在，我可以根据传入的状态轻松提取我需要的所有信息，并且可以通过 props 向下传递信息。我觉得这个选项有利于减少重复代码，但是我认为路由组件会因此变得繁忙/复杂。

【问题讨论】：

如果你想根据你的状态值渲染特定的组件，你可以像{if (this.state.value == 'state1') <State1 /> else if (this.state.value == 'state2') <State2 /> else ..}这样进行内联条件渲染

标签： reactjs performance react-native design-patterns scalability

【解决方案1】：

我做了一个应用程序，情况类似，很多州，太麻烦了。所以你在第二种方法中建议的更好。拥有全局组件并根据您想要的状态进行渲染总是好的。假设您有 2 个状态并且想要显示 2 个不同的组件。

创建两个文件 X.js 和 Y.js，您想分别在 state1 和 state2 上呈现它们。

2.创建一个 Home.js 类，用于跟踪状态，并在其中导入上述两个组件并根据条件进行渲染：

import X from 'X.js'
import Y from 'Y.js'

class Home extends Component {

constructor(props){
super(props)
this.state={
state1:false,
state2:true
}
}


render(){

return(
<View>
{this.state.state1?<X />:<View />}
{this.state.state2?<Y />:<View />}
</View>

)
}

}

这不仅增加了代码的可读性，而且您实际上遵循了分解每个组件的分形文件夹结构。

如有任何疑问，请随时提出。

【讨论】：