Skip to content

NocoBase 0.10:第二季度的新特性

Posted on:2023年6月23日 at 07:31

目录

第二季度的新特性

应用升级

Docker 安装的升级

无变化,升级参考 Docker 镜像升级指南

源码安装的升级

v0.10 进行了依赖的重大升级,源码升级时,以防出错,需要删掉以下目录之后再升级

# 删除 .umi 相关缓存
yarn rimraf -rf "./**/{.umi,.umi-production}"
# 删除编译文件
yarn rimraf -rf "packages/*/*/{lib,esm,es,dist,node_modules}"
# 删除依赖
yarn rimraf -rf node_modules

更多详情参考 Git 源码升级指南

create-nocobase-app 安装的升级

建议 yarn create 重新下载新版本,再更新 .env 配置,更多详情参考 大版本升级指南

即将遗弃和可能不兼容的变化

子表格字段组件

不兼容新版,区块字段需要删除重配(只需要 UI 重配)

附件上传接口的变更

除了内置的 attachments 表以外,用户也可以自定义文件表,附件的上传接口由 /api/attachments:upload 变更为 /api/<file-collection>:create,upload 已废弃,依旧兼容 v0.10,但会在下个大版本里移除。

登录、注册接口的变更

nocobase 内核提供了更强大的 auth 模块,用户登录、注册、校验、注销接口变更如下:

/api/users:signin -> /api/auth:signIn
/api/users:signup -> /api/auth:signUp
/api/users:signout -> /api/auth:signOut
/api/users:check -> /api/auth:check

注:以上 users 接口,已废弃,依旧兼容 v0.10,但会在下个大版本里移除。

日期字段筛选的调整

如果之前数据范围里配置了日期相关筛选,需要删掉重新配置。

第三方插件升级指南

依赖升级

v0.10 依赖升级,主要包括

插件的 package.json 相关依赖要更改为最新版,如:

{
  "devDependencies": {
+   "react": "^18".
+   "react-dom": "^18".
+   "react-router-dom": "^6.11.2".
-   "react": "^17".
-   "react-dom": "^17".
-   "react-router-dom": "^5".
  }
}

代码修改

由于 react-router 的升级,代码层面也需要改动,主要变更包括

Layout 布局组件

Layout 布局组件需要使用 <Outlet /> 代替 props.children

import React from 'react';
+ import { Outlet } from 'react-router-dom';

export default function Layout(props) {
  return (
    <div>
-      { props.children }
+      <Outlet />
    </div>
  );
}

使用了 React.cloneElement 方式渲染的路由组件改造,示例:

import React from 'react';
+ import { Outlet } from 'react-router-dom';

export default function RouteComponent(props) {
  return (
    <div>
-      { React.cloneElement(props.children, { someProp: 'p1' }) }
+      <Outlet context={{ someProp: 'p1' }} />
    </div>
  );
}

组件改成从 useOutletContext 取值

import React from 'react';
+ import { useOutletContext } from 'react-router-dom';

- export function Comp(props){
+ export function Comp() {
+   const props = useOutletContext();
  return props.someProp;
}

Redirect

<Redirect> 转为 <Navigate replace />

- <Redirect to="about" />
+ <Navigate to="about" replace />

useHistory

useNavigate 代替 useHistory

- import { useHistory } from 'react-router-dom';
+ import { useNavigate} from 'react-router-dom';

- const history = useHistory();
+ const navigate = useNavigate();

- history.push('/about')
+ navigate('/about')

- history.replace('/about')
+ navigate('/about', { replace: true })

useLocation

useLocation<type>() 改为 useLocation

- const location= useLocation<type>();
+ const location= useLocation();

const { query } = useLocation() 改为 useSearchParams()

- const location = useLocation();
- const query = location.query;
- const name = query.name;
+ const [searchParams, setSearchParams] = useSearchParams();
+ searchParams.get('name');

path

支持下面的 path 方式

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

不再支持如下方式

/tweets/:id(\d+)
/files/*/cat.jpg
/files-*

更多改动和 api 变更,请查阅 react-router@6