React条件渲染的方式

React 中的条件渲染有以下几种方式：

if 语句
三元操作符(ternary operator)
逻辑 && 操作符
switch.. case.. 语句
枚举(enums)
多层条件渲染(multi-level conditional reandering)
使用高阶组件

1.if 语句

在React中使用if语句条件渲染是最简单的。比如List组件如果没有任何items,可以提前return

function List({ list }) {
  if (!list) {
    return null;
  }
  return (
    <div>
      {list.map(item => <ListItem item={item} />)}
    </div>
  );
}

一个组件如果return null,将不会被渲染出来。如果你想给用户一些反馈，当list为空时，可以采用下面方式：

function List({ list }) {
  // list 为null的情况
  if (!list) {
    return null;
  }

  // list 为空的情况
  if (!list.length) {
    return <p>sorry, the list is empty</p>
  } else {
    return (
      <div>
        {list.map(item => <ListItem item={item} />)}
      </div>
    );
  }
}

if…else 是最基本的条件渲染方式。

2.三元操作符

可以使用三元运算符来代替上面的if…else… 条件渲染。

例如，你想从2种模式(edit, view)中切换，可以使用布尔值来决定那个组件被渲染：

function Item({ item, mode }) {
  const isEditMode = mode === 'EDIT';

  return (
    <div>
      { isEditMode
          ? <ItemEdit item={item} />
          : <ItemView item={item}>
      }
    </div>
  );
}

三元运算符使条件渲染更加的简洁,使得代码可以采用内联(inline)的方式表达出来

3.逻辑 ‘&&’ 操作符

这个是当你想渲染一个组件或者什么也不渲染的情况。

例如，有一个 LoadingIndicator 组件,返回加载文字或者什么也没有。当然可以使用if…else或者三元运算符,如下：

function LoadingIndicator({ isLoading }) {
  if (isLoading) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  } else {
    return null;
  }
}

function LoadingIndicator({ isLoading }) {
  return (
    <div>
      { isLoading
          ? <p>Loading...</p>
          : null
      }
    </div>
  );
}

使用 && 可以使返回 null 的情况的条件渲染更加的简洁：

function LoadingIndicator({ isLoading }) {
  return (
    <div>
      { isLoading && <p>Loading...</p> }
    </div>
  );
}

4.switch…case语句

我们有可能遇到多种条件渲染的情况，例如依据不同的state渲染不同的Component.

例如，Notification 组件根据输入状态可能渲染Error,Warning,Info三种不同的组件。这个时候可以使用switch…case来进行多种条件渲染：

function Notification({ text, state }) {
  switch (state) {
    case 'info':
      return <Info text={text} />;
    case 'warning':
      return <Warning text={text} />;
    case 'info':
      return <Info text={text} />;
    default:
      return null;
  }
}

注意switch…case语句永远要加上default情况，因为React组件要么返回元素，要么返回null

另外值得注意的是，如果组件依据 state 属性渲染时，最后添加上 React.PropTypes,即上面的组件后面添加：

Notification.propTypes = {
  text: React.PropTypes.string,
  state: React.PropTypes.oneOf(['info', 'warning', 'error'])
}

另一种将条件渲染结果内联在switch…case中的方法是，使用立即调用函数

function Notification({ text, state }) {
  return (
    <div>
      {(() => {
          switch (state) {
            case 'info':
              return <Info text={text} />;
            case 'warning':
              return <Warning text={text} />;
            case 'info':
              return <Info text={text} />;
            default:
              return null;
          }
      })()}
    </div>  
  );
}

switch…case帮助我们在多种条件中渲染中使用，但是多种条件渲染最好的方式是枚举

5.枚举(Enums)

在javascript中，对象的键值对可以用作枚举：

const ENUM = {
  a: '1',
  b: '2',
  c: '3'
};

枚举是多种条件渲染中很好的一种方式，上面的 Notification 组件可以写为：

function Notification({ text, state }) {
  return (
    <div>
      {{
        info: <Info text={text} />,
        warning: <Warning text={text} />,
        error: <Error text={text} />
      }[state]}
    </div>
  )
}

上面的 state 属性用于取回对象中的值，这比switch…case可读性更强。

因为对象的值依赖 text 属性，所以我们必须使用内联对象。如果我们不需要text属性，我们可以使用外部静态枚举：

const NOTIFICATION_STATES = {
  info: <Infor />,
  warning: <Warning />,
  error: <Error />,
};

function Notification({ state }) {
  return (
    <div>
      {NOTIFICATION_STATES[state]}
    </div>
  )
}

如果我们需要text属性，我们可以使用函数取回对象的值

const getSpecificNotification = (text) => ({
  info: <Info text={text} />,
  warning: <Warning text={text} />,
  error: <Error text={text} />,
});

function Notification({ state, text }) {
  return (
    <div>
      {getSpecificNotification(text)[state]}
    </div>  
  )
}

对象用作枚举，使用场景很灵活，下面例子：

function FooBarOrFooOrBar({ isFoo, isBar }) {
  const key = `${isFoo}-${isBar}`;
  return (
    <div>
      {{
        ['true-true']: <FooBar />,
        ['true-false']: <Foo />,
        ['false-true']: <Bar />,
        ['false-false']: null,
      }[key]}
    </div>
  );
}
FooBarOrFooOrBar.propTypes = {
  isFoo: React.PropTypes.boolean.isRequired,
  isBar: React.PropTypes.boolean.isRequired
}

6.多层条件渲染

我们有时候可能碰到嵌套条件选择渲染的情况。

例如，List组件可能显示一个list,或者一个empty text提示，或者什么多没有：

function List({ list }) {
  const isNull = !list;
  const isEmpty = !isNull && !list.length;

  return (
    <div>
      { isNull
          ? null
          : ( isEmpty
              ? <p>Sorry, the list is empty</p>
              : <div>{list.map(item => <ListItem item={item} />)}</div>
          )
      }
    </div>
  );
}

// 实例
<List list={null} /> // <div></div>
<List list={[]} /> // <div><p>Sorry, the list is empty</p></div>
<List list={['a', 'b', 'c']} /> // <div><div>a</div><div>b</div><div>c</div></div>
但是最好保持嵌套的层数最小化，这样代码可读性更强。可以将组件划分成更小的组件的方式

function List({ list }) {
  const isList = list && list.length;

  return (
    <div>
      { isList
          ? <div>{list.map(item => <ListItem item={item} />)}</div>
          : <NoList isNull={!list} isEmpty={list && !list.empty} />
      }
    </div>
  );
}

function NoList({ isNull, isEmpty }) {
  return (!isNull && isEmpty) && <p>Sorry, the list is empty</p>
}

7.高阶组件用作条件渲染

HOCs 在React中很适合条件渲染。HOCs的一种使用方式就是改变组件的外观。

例如使用高阶组件来展示一个加载显示器或者一个想要的组件：

function withLoadingIndicator(Component) {
  return function EnhancedComponent({ isLoading, ...props }) {
    if (!isLoading) {
      return <Component { ...props } />;
    }

    return <div><p>Loading...</p></div>;
  }
}

// 使用
const ListWithLoadingIndicator = withLoadingIndicator(List);

<ListWithLoadingIndicator
  isLoading={props.isLoading}
  list={props.list}
/>

这个示例中，List组件能关注渲染list上，而不必担心loading状态，另外，HOCs可以屏蔽list为null或empty的情况。

总结

使用上面的哪一种条件渲染可以根据下面的一些情况而定：

if-else
最简单的条件渲染
适用于新手
使用if,从渲染方法中返回null提前退出函数

三元操作符
比if-else更好，优先使用
比if-else更加简洁
逻辑 ‘&&’ 操作符
不返回元素就返回null时使用

switch…case
比较冗长
可以通过立即调用函数内联使用
使用枚举的方式代替这种方式更好

枚举(enums)
使用于不同的状态使用
超过一种条件选择时使用

多层次条件选择渲染
避免使用这种方式对可读性的影响
将组件划分为更小的组件，小组件自身带有条件选择
偏向于使用高阶组件(HOCs)
HOCs

使用高阶组件而屏蔽条件渲染
组件能关注主要的逻辑目的

React条件渲染的方式

猜你喜欢