什么时候在 React 中添加条件变得太多了？答案

【问题标题】：When does adding conditionals becomes too much in React?什么时候在 React 中添加条件变得太多了？
【发布时间】：2020-07-16 08:41:44
【问题描述】：

本题以 React Native 为例，但一般适用于 React。

给定一个 FlatList 组件，它根据用户选择的列表呈现不同的列表，何时为该组件中的特定列表添加条件会变得太多？

例如，在整个组件中添加它只是为了获得该特定列表的行为：

if (this.props.list = 'groceryList') {
  do this...
}

这个检查可以在ComponentDidMountComponentDidUpdate调用其他函数并进行仅与“groceryList”相关的冗长计算。

只为这个列表创建一个组件是否更好，因为它正在添加这些检查并添加卷积？感觉就像在组件内部编写组件，而不是按照最初的预期使用组件。

【问题讨论】：

"...几乎就像在组件内部编写组件..." 喜欢组件组合？非常模式反应推荐并适用于？当然！你能分享一些实际的组件代码吗？什么（如果有的话）不起作用？基本上，首先确定是否有问题需要解决。诸如性能不佳、代码不可读等之类的事情。

标签： javascript reactjs react-native conditional-statements

【解决方案1】：

您可以在组件、父组件中使用条件，并根据列表类型呈现每种类型的子组件。这完全是一个很好的模式。

   function Greeting(props) {
      const isLoggedIn = props.isLoggedIn;
      if (isLoggedIn) {
        return <UserGreeting />;
      }
      return <GuestGreeting />;
    }

    ReactDOM.render(
      // Try changing to isLoggedIn={true}:
      <Greeting isLoggedIn={false} />,
      document.getElementById('root')
    );

您也可以使用内联条件运算符，或在渲染方法中使用逻辑运算符。

    render() {
      const isLoggedIn = this.state.isLoggedIn;
      return (
        <div>
          {isLoggedIn
            ? <LogoutButton onClick={this.handleLogoutClick} />
            : <LoginButton onClick={this.handleLoginClick} />
          }
        </div>
      );
    }

这种模式称为条件渲染。 https://reactjs.org/docs/conditional-rendering.html

https://reactpatterns.com/[搜索条件渲染部分]

【讨论】：