javascript - 如下方式定义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的一种类型