TableDesign API - request 数据源 - 《React技术栈⚛️》

request 请求文档 https://pro-components.antdigital.dev/components/table#request

<ProTable<DataType, Params>
  // params 是需要自带的参数，优先级更高，会覆盖查询表单的参数
  params={params}
  request={async (
    // 第一个参数 params 查询表单和 params 参数的结合
    // 第一个参数中一定会有 pageSize 和  current，这两个参数是 antd 的规范
    params: T & {
      pageSize: number;
      current: number;
    },
    sort,
    filter,
  ) => {
    // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
    // 如果需要转化参数可以在这里进行修改
    const msg = await findAll({
      page: params.current,
      pageSize: params.pageSize,
    });
    return {
      data: msg.result,
      // success 请返回 true，
      // 不然 table 会停止解析数据，即使有数据
      success: boolean,
      // 不传会使用 data 的长度，如果是分页一定要传
      total: number,
    };
  }}
/>

https://juejin.cn/post/6957918287644590117
https://github.com/pmndrs/zustand/blob/main/readme.md 数据流代替 redux
icestore
https://zhuanlan.zhihu.com/p/80065802
https://blog.csdn.net/weixin_44733660/article/details/121926380

做了什么事？
拿到了什么结果？

https://github.com/clauderic/dnd-kit
http://www.webfunny.cn/webfunny/home.html
http://unclechen.github.io/2018/06/24/%E6%8F%AD%E5%BC%80JS%E6%97%A0%E5%9F%8B%E7%82%B9%E6%8A%80%E6%9C%AF%E7%9A%84%E7%A5%9E%E7%A7%98%E9%9D%A2%E7%BA%B1/
一段IIFE形式的、压缩过的js代码，执行完成之后
在head里面插入了一个新的script标签，异步去下载真正的核心SDK代码下来工作。所以并不是基础代码可以根据配置上报行为，而是基础代码会下载一段“更大”的SDK核心代码，这段代码才是SDK真正的功能实现。
解决数据逐层传递问题
Context API 主要包括 3 个部分：

React.createContext：用于传递初始值，返回一个包含 “provider” 和 “consumer” 的对象；
Provide Function：组件树中处于较高层，作为数据的提供方；
Consume Function：组件树中处于数据提供方的下层，是数据的消费方。

AST代码生成，相比于字符串模板拼接外的更高级完善的代码生成方式
mock，支持每一列，快速插入 mock数据
去除无效依赖，减少包体积，
manacoEditor 本身也要套一层 ErrorBoundary，编辑器挂了不要直接白屏
schema版本更新
代码生成技术方案
configPanel基础组件优化
不同的表单形式，如 ModalForm， DrawerForm
不同的表格形式，ExcelTable数据录入
部署
域名，网站，后台服务能力
版本升级
前台功能

用户管理
项目管理
空间管理
配置编辑，存储

统计
复制的次数，使用人数

@ant-design/icons，794个组件

useEvent 代替 useCallback不好用问题
eslint 中，为了防止闭包问题，需要把所有可能产生变更的变量都放入 deps 中
const Demo = ({ sendMessage }) => {
  const onClick = useEvent(() => {
    console.log('Click');
  });
  return <button onClick={onClick} />;
};
useEvent 始终返回相同的 ref，虽然内部会随着每次 render 变化而变化
function useEvent(callback) {
  const callbackRef = useRef();
  callbackRef.current = callback;
  return useCallback((...args) => callbackRef.current(...args), []);
}
实际执行时，render和 onCell完全不同。render返回 props 会导致子节点必然被执行一次
render 需要调渲染 子节点 方法，render 返回 props 下个大版本将被废弃
const columns = [{
  render: () => ({
    children: 'Hello World',
    rowSpan: 2,
    colSpan: 2,
  });
}];
onCell 方法，你也可以这么写
onCell可以无关子节点，只获取 props，以更好的做渲染优化
const columns = [{
  render: () => 'Hello World',
  onCell: () => ({
    rowSpan: 2,
    colSpan: 2,
  });
}];
Upload
按照以下顺序异步触发事件：
1. beforeUpload 检查是否可以上传
2. transformFile 改写文件
3. onStart 开始上传
4. onProgress 更新上传进度
5. onSuccess 上传成功
6. onError 上传失败
antd-icons 抽离出来产生了大约 700+ 的组件
用一个脚本，同一套 ts template 模板生成，替换一下文件名
 React Hooks 的机制是什么？
https://github.com/brickspert/blog/issues/26
● 所有的网络请求，只用 useRequest 就够
umi hooks文档 https://hooks.umijs.org/zh-CN/hooks/async
useSWR
zeit 公司开发的一个专门做网络请求的 Hooks
https://github.com/vercel/swr
logger.info('%s %d', 'aaa', 222);
%s  字符串占位
%d  数字占位
%j json 占位
https://nodejs.org/dist/latest-v14.x/docs/api/util.html#util_util_format_format_args
https://www.cnblogs.com/sexintercourse/p/15269676.html
antd5 修改主题
<ConfigProvider theme={{ components: { Layout: { colorBgHeader: '你希望的颜色' } } }}></ConfigProvider>
<ConfigProvider
  theme={{
    token: {
      colorPrimary: 'orange',
    },
    components: {
      Layout: {
        colorBgHeader: 'white'
      }
    }
  }}
>
  <Header style={{ height: 'auto', }}></Header>
</ConfigProvider>
  grep，Globally search a Regular Expression and Print，g/re/p
正则查找字符串
  https://blog.csdn.net/weixin_45685544/article/details/125328565

https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/scripts/generate.ts
mobx（Reactive）、TypeScript 装饰器（SPI）、抽象与封装、写法示例
抽象整个体系的解决方案:

元件体系: 基于设计语言实现的端基础组件, 目前存在Fusion和AntD两套
组件体系: 基于不同业务域抽象, 抽象成业务控件, 业务布局, 业务场景等, 可直接用于开发, 也能够通过一层scheme的包裹被其他系统消费. 基本各业务场景都有针对自己的业务实现的一套组件体系
模板体系: 将UI逻辑内聚到一个标签内, 对外提供简单的api(组件调用, 逻辑块等), 将前端技术细节屏蔽, 业务开发只需要关注UI的编排, 数据联动等纯逻辑场景
搭建体系: 借助工具, 通过可视化的方式编排构成页面的UI模块, 从而开发页面

以主体维度划分，产品类型可分为
消费级产品，C端产品
企业级产品，B端产品
客户，就是付费的那类人；
用户，就是使用的那类人；企业级产品，付费的和使用的不是同一类人
产品类型可分为“工具类“、“社交类”、“生活类“、“信息类”、“娱乐类”、“游戏类“六种
https://www.zhihu.com/question/320673863/answer/1308509542
全局样式
布局
导航
按钮
表单
列表和表格
可视化图表
帮助和引导
容器
内容
SpreadSheet 交叉表

touch-action: none;
AXIOS
https://circleci.com/blog/making-http-requests-with-axios

host代理只适用于80端口或443端口的机子，系统代理可以适用于所有客户端的机子
https://hoppscotch.io/https://github.com/hoppscotch/hoppscotch https://blog.csdn.net/weixin_45583710/article/details/124475874
https://www.knowledgehut.com/blog/it-service-management/itil-v5
https://github.com/ant-design/ant-design-pro/releases