ReactNative组件定义的不同方式及用法规范

在React Native中定义自定义组件时,有几种常见的类型声明方式,它们各有特点和适用场景:

React.FC (Function Component):

const MyComponent: React.FC<Props> = (props) => {
  return <View>{props.children}</View>
}

特点:

明确指定这是一个函数组件
自动包含children属性
返回类型为ReactElement

推荐使用场景:当你需要明确指定组件接收的props类型,并且组件可能包含children时[1].

JSX.Element:

const MyComponent = (): JSX.Element => {
  return <View />
}

特点:

明确指定返回JSX
不包含props类型定义

推荐使用场景:当组件不需要props,只需要返回简单的JSX时[1].

ReactNode:

const MyComponent = (): React.ReactNode => {
  return <View />
}

特点:

可以返回多种类型,包括JSX、字符串、数字等
更灵活的返回类型

推荐使用场景:当组件可能返回多种类型,不仅限于JSX时[1].

普通函数或箭头函数:

function MyComponent() {
  return <View />
}

const MyComponent = () => {
  return <View />
}

特点:

简洁
TypeScript可以自动推断返回类型

推荐使用场景:对于简单的组件,不需要明确的类型注解时[1].

总结:

如果需要明确的props类型定义,使用React.FC
如果只返回JSX且不需要props类型,使用JSX.Element
如果返回值类型多样,使用ReactNode
对于简单组件,可以使用普通函数或箭头函数,让TypeScript自动推断类型

补充

在React Native中，除了之前提到的类型定义方式，还有一些其他常用的可扩展类型定义，特别是考虑到children和style等常见需求。以下是一些推荐的类型定义方式：

React.ComponentProps<typeof View>

type MyComponentProps = React.ComponentProps<typeof View> & {
  customProp: string;
};

const MyComponent: React.FC<MyComponentProps> = ({ customProp, ...props }) => {
  return <View {...props}>{customProp}</View>;
};

这种方式可以继承View组件的所有属性，包括style，同时允许添加自定义属性。适用于需要继承原生组件属性的场景。

React.PropsWithChildren

type Props = React.PropsWithChildren<{
  title: string;
}>;

const MyComponent: React.FC<Props> = ({ title, children }) => {
  return (
    <View>
      <Text>{title}</Text>
      {children}
    </View>
  );
};

这种方式明确指定组件接受children属性，适用于需要包含子元素的组件。

StyleProp<ViewStyle>

import { StyleProp, ViewStyle } from 'react-native';

type Props = {
  style?: StyleProp<ViewStyle>;
  content: string;
};

const MyComponent: React.FC<Props> = ({ style, content }) => {
  return <View style={style}>{content}</View>;
};

使用StyleProp<ViewStyle>可以让组件接受样式属性，适用于需要自定义样式的组件。

React.ComponentType

type Props = {
  icon: React.ComponentType<{ size: number }>;
  label: string;
};

const MyComponent: React.FC<Props> = ({ icon: Icon, label }) => {
  return (
    <View>
      <Icon size={24} />
      <Text>{label}</Text>
    </View>
  );
};

这种方式允许传递组件作为prop，适用于需要动态渲染不同组件的场景。

泛型组件

type Props<T> = {
  data: T[];
  renderItem: (item: T) => React.ReactNode;
};

function MyComponent<T>({ data, renderItem }: Props<T>) {
  return (
    <View>
      {data.map((item, index) => (
        <View key={index}>{renderItem(item)}</View>
      ))}
    </View>
  );
}

使用泛型可以创建更灵活的组件，适用于需要处理不同类型数据的场景。

这些类型定义方式可以根据组件的具体需求进行选择和组合。例如，你可以结合使用React.PropsWithChildren和StyleProp<ViewStyle>来创建一个既接受子元素又可自定义样式的组件。选择合适的类型定义可以提高代码的可读性和可维护性，同时提供更好的类型检查和自动补全功能。

React.FC不是自动包含children吗？和React.PropsWithChildren的定义方式有何区别，何时选择何种方法？

React.FC 确实自动包含了 children 属性,但与 React.PropsWithChildren 还是有一些区别。让我来解释一下:

React.FC 的 children 包含:

React.FC 确实自动包含了 children 属性,类型为 React.ReactNode。这意味着使用 React.FC 时,不需要显式声明 children。

const MyComponent: React.FC = ({ children }) => {
  return <div>{children}</div>;
};

React.PropsWithChildren 的使用方式:

React.PropsWithChildren 是一个工具类型,用于为已有的 Props 类型添加 children 属性。

type Props = {
  title: string;
};

const MyComponent: React.FC<React.PropsWithChildren<Props>> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

主要区别:

React.FC 自动包含 children,但不允许你指定 children 的具体类型。
React.PropsWithChildren 允许你更精确地控制 children 的类型。

选择建议:

如果你的组件不需要额外的 props,只需要 children,使用 React.FC 就足够了。
如果你需要为组件定义特定的 props 类型,并且也需要 children,使用 React.PropsWithChildren 更合适。
如果你需要对 children 的类型进行更严格的控制,使用 React.PropsWithChildren 并指定 children 的具体类型。

type Props = {
  title: string;
  children: React.ReactElement; // 只允许单个 React 元素作为 children
};

const MyComponent: React.FC<Props> = ({ title, children }) => {
  // ...
};

总的来说,React.FC 提供了一种简便的方式来包含 children,而 React.PropsWithChildren 提供了更多的类型控制灵活性。根据你的具体需求和类型严格程度来选择合适的方法。

ReactNative组件定义的不同方式及用法规范​

补充​

ReactNative组件定义的不同方式及用法规范

补充