如下方式定义React组件有什么好处呢？

Question

我看到一个react组件的ts文件内容如下：

import services from '@/services/demo';
...
const { addUser, queryUserList, deleteUser, modifyUser } =
  services.UserController;

/**
 * 添加节点
 * @param fields
 */
const handleAdd = async (fields: API.UserInfo) => {
  const hide = message.loading('正在添加');
  ...
};

/**
 * 更新节点
 * @param fields
 */
const handleUpdate = async (fields: FormValueType) => {
  const hide = message.loading('正在配置');
  ...
  } catch (error) {
    hide();
    message.error('配置失败请重试！');
    return false;
  }
};

/**
 *  删除节点
 * @param selectedRows
 */
const handleRemove = async (selectedRows: API.UserInfo[]) => {
  ...
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

const TableList: React.FC<unknown> = () => {
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);

  return (
    <PageContainer
      ...
    </PageContainer>
  );
};

export default TableList;

我有2个问题想要请教一下：
1、在此文件中：这里把添加节点、更新节点、删除节点三个方法放在组件TableList定义 之外的，是否可以放在组件内部呢？放在组件定义之外有什么好处呢？

2、我们看到定义组件是这样定义：

const TableList: React.FC<unknown> = () => {...}

<unknown> 在这里有什么用呢？它的作用是什么？如果不加会出现什么问题？

Answer 1

第一个问题缺少相关上下文无法作答
第二问题：
这里的unknown是一种“偷懒”的写法，因为TaleList没有接收任何的props所以可以这么写，unknown是TS的一种类型

Answer 2

1. 放在组件内部，如果不是放在 useMemo 里面的话，每次组件 rerender 的时候，这个组件又回重新声明一次。这是没必要的开销
2. 这里的 unknown 是 typescript 泛型参数

Answer 3

1. 当你的函数不依赖组件内数据或可以通过参数的形式传递，推荐放在组件外。因为组件内的所有内容都会在每次渲染的时候重新计算，包括函数的创建。
2. <unknown> 没有明确作用，可以不加，甚至 React.FC 也可以不要。当你在定义组件 props 类型时，才需要在 React.FC 中提供 props 的类型定义。