React中避免直接调用组件的方案及组件返回数组报错咨询

一、先解决JSX组件返回数组的报错 #

React组件的返回值必须是单个合法JSX元素，直接返回Element[]会触发类型报错，有两种常用解决方式：

1. 用React.Fragment包裹数组 #

用<>（Fragment短语法）或完整的<React.Fragment>把元素数组包裹起来，让组件返回单个JSX元素：

const RenderedOptions = ({ options }) => {
  return (
    <>
      {options.map(option => (
        <Option key={option.id} value={option.value} />
      ))}
    </>
  );
};

如果需要给Fragment设置key（比如在列表循环中渲染该组件时），必须使用完整的<React.Fragment key={xxx}>，短语法不支持key属性。

2. 用容器元素包裹数组 #

如果不介意多一层DOM节点，直接用div等容器元素包裹数组即可：

const RenderedOptions = ({ options }) => {
  return (
    <div className="options-wrap">
      {options.map(option => (
        <Option key={option.id} value={option.value} />
      ))}
    </div>
  );
};

这种方式实现简单，但会增加DOM层级，可根据实际场景选择。

二、避免额外重渲染的优化 #

改成组件后，还需要针对性优化来避免不必要的重渲染：

1. 用React.memo包裹组件 #

如果RenderedOptions的props没有变化时不需要重渲染，用React.memo包裹组件，它会浅比较props，只有当props引用变化时才触发重渲染：

import { memo } from 'react';

const RenderedOptions = memo(({ options }) => {
  return (
    <>
      {options.map(option => (
        <Option key={option.id} value={option.value} />
      ))}
    </>
  );
});

2. 稳定props的引用 #

如果父组件UglyComponent中的options是每次渲染都会重新生成的数组（比如直接在渲染函数内定义），即使内容不变，memo也会认为props变化导致重渲染。这时可以用useMemo缓存options：

import { useMemo } from 'react';

const UglyComponent = () => {
  // 用useMemo缓存options，仅当依赖项变化时重新生成
  const options = useMemo(() => {
    return [/* 生成选项的逻辑 */];
  }, [/* 依赖项，比如接口返回的数据、筛选条件等 */]);

  return (
    <div>
      <RenderedOptions options={options} />
    </div>
  );
};

3. 对比原函数写法的问题 #

原来的getRenderedOptions如果是在UglyComponent渲染函数内部定义，每次父组件渲染都会重新创建这个函数，导致它生成的子元素每次都是新引用，触发不必要的重渲染。改成独立组件并配合memo和useMemo，能从根源上避免这类问题。

内容的提问来源于stack exchange，提问作者Leo Messi