🎉 React Suite 4.0 发布
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
新学期又是一个全新的开始。React Suite迎来了 4.0 版本的发布。自 2019 年 3 月 V4 版本设计以来，经过六个多月的开发、测试、讨论和争论，我终于完成了所有的计划。
在这个收获的季节，我们为大家准备了一系列更新，你们准备好了吗？
1. 从 Flow 迁移到 TypeScript
首先，感谢 Flow 对整个 V3 版本的支持，使得组件库能够轻松实现静态类型检查。随着 TypeScript 的广泛应用以及 Flow 暴露出的问题，我们在本版本中放弃了 Flow，并使用 TypeScript 重构了所有代码，以提高代码的可读性和可维护性。
2、无障碍设施改进
为了支持新的浏览器特性，我们在之前的 V3 版本中放弃了对 IE9 的支持。但我们仍然希望使用 React Suite 开发的 Web 应用能够被尽可能多的人使用，并且用户体验会越来越好。我们致力于提升应用的可访问性，让更多用户受益。
2.1 色彩对比度提升
世界上有很多视力障碍人士，他们使用的显示器往往对比度不均，文本与背景的对比度成了用户最基本的需求问题。作为一个用心打造的UI组件库，怎能忽视用户的眼睛呢？
根据《Web 内容无障碍指南 (WCAG)》的要求，我们改进了文本颜色、字体粗细，提高了对比度，并调整了色板算法，目的是让您的产品更易于访问。
2.2 支持深色模式
在我们周围的电子产品中，从操作系统到浏览器、编辑器和各种阅读器，都支持夜间模式。它是一种高对比度或反色显示模式。如果您的用户需要长时间使用您的产品，夜间模式可以有效缓解眼部疲劳，使阅读更加轻松。
深色模式主题已添加到默认主题中，并提供完全自定义选项。开发时，您只需导入相应的样式文件即可：
import 'rsuite/lib/styles/themes/dark/index.less';
有关主题设置的更多信息，请参阅：自定义主题
3、添加了一些组件
组件是 React Suite 提供的最小单元。随着 Web 应用程序变得越来越丰富多样，我们将继续提供更丰富的组件集。
3.1 对列表的支持
列表组件在移动端应用广泛，但在中后端产品中，它一直是一个缺乏标准化的组件。不同业务场景下对列表的呈现方式各不相同，因此我们在此版本中实现了列表功能。除了支持自定义每个列表项的内容外，我们还默认提供拖放排序功能。
3.2 对占位符的支持
在前端行业，几乎人人都知道“骨架屏”这个词。它的功能类似于加载器（Loader），是在应用程序尚未加载完成时向用户显示的一种状态，告知用户当前数据正在加载。骨架屏的优势在于，它能在数据加载完成前为用户提供页面的大致结构，从而提升用户体验。
占位符组件用于提供数据的大致结构。内容区域的总体结构可以用线条、矩形和圆形轮廓来绘制。
3.3 对日历的支持
日历面板是一个简单的日历面板，用于显示日历数据。它提供了两种使用场景：一种是默认显示一个包含多个容器的大型日历面板，可以显示一个月的数据；另一种是提供一个小型、紧凑的日历面板，类似于某些系统侧边栏中常见的用于数据筛选的面板。
3.4 支持头像和徽章
4、重大变更
我们希望每次更新都能与历史版本保持高度兼容。但仍然存在一些重大变更，例如使用新的 React 特性，或改进之前不合理的设计。
4.1 不支持 React 16.6 以下版本。
此版本使用了 React 的一些新特性。例如，新的 Context API（在 React 16.6.0 中开始支持 Class 组件的静态 contextType 属性#13728）就使用了这一特性。因此，要使用 React Suite 4.0，您必须将 react 和 react-dom 升级到 16.6 或更高版本。
4.2 兼容性变更较少
在此版本中，已支持深色主题，并Less调整了文件的引入地址。
3.x 版本
import 'rsuite/styles/less/index.less';
4.x 版本
import 'rsuite/lib/styles/themes/default/index.less'
// or
// import 'rsuite/lib/styles/index.less';
需要将版本Less升级到 >=3.0 版本。
4.3 TreePicker 和 CheckTreePicker 会丢弃 expandAll 属性
该TreePicker组件和该CheckTreePicker组件弃用了该expandAll属性，并添加了该expandItemValues属性以展开指定的节点。
Dropdown4.4 调整了、Whisper、 以及所有Picker组件placement属性的值
该placement属性是配置选择器打开后显示的位置。为了使参数更易于阅读，其值调整如下：
type Placement4 = 'top' | 'bottom' | 'right' | 'left';
type Placement8 =
| 'bottomStart'
| 'bottomEnd'
| 'topStart'
| 'topEnd'
| 'leftStart'
| 'rightStart'
| 'leftEnd'
| 'rightEnd';
type PlacementAuto =
| 'auto'
| 'autoVerticalStart'
| 'autoVerticalEnd'
| 'autoHorizontalStart'
| 'autoHorizontalEnd';
兼容 3.x 版本
5、错误修复和改进
5.1 所有 Picker 组件均支持大小
我们在数据输入组件中提供了一套非常完整的选择器组件，除了用于表单之外，它还常用于一些数据筛选列。考虑到输入框和按钮组件都具有可调整大小的尺寸属性，我们也为所有选择器组件添加了尺寸属性，以适应更多应用场景。
5.2 Whisper 和 Picker 组件的溢出保护
所有 Picker 组件和 Whisper 组件都是在指定位置弹出的浮动图层，但有时由于浮动图层的大小超出容器范围，部分浮动图层不会被遮挡。preventOverfow此时可以设置一个属性，根据容器的可用空间调整浮动图层的相对位置，使其尽可能多地显示在页面上。
5.3 FormControl 组件只读和纯文本
FormControl新增了 2 个属性支持：
readOnly使表单组件变为只读且不可编辑。plaintext允许以纯文本形式显示表单组件。
当在表单组件上设置这两个属性时，表单中的所有表单组件都会被全局设置。很多情况下，我们需要在已完成的表单中添加数据详情页。此时，我们需要添加一个新模块来显示数据。为了提高代码复用性，您可以通过在表单组件上设置 plaintext 属性，将表单转换为数据详情面板。
5.4 DatePicker 和 DateRangePicker 支持显示周数
<DatePicker showWeekNumbers />
<DateRangePicker showWeekNumbers />
如果您需要查看业务中的周数，可以showWeekNumbers在日历上设置该属性，当前行的周数将显示在日历的左侧。
5.5Form组合Schema支持异步检查
异步验证是一项基本要求，在此版本中，Schema 开始支持 Promise。以下是表单的一些改进：
- 设置需要异步验证的
checkAsync属性。<FormControl> - 异步验证的验证规则通过“addRule schema”添加一个返回值为 Promise 的对象
method of。 checkAsync可以通过调用和checkForFieldAsync来手动触发检查<Form>。
模型
在这个示例中，我们需要异步验证服务器上是否已存在某个电子邮件地址。向 Modal 添加规则时，我们会通过 addRule 方法返回一个 Promise 对象。
`js
function asyncCheckEmail(email) {
return new Promise(resolve => {
// 异步处理逻辑
// resolve(true);
});
}
const model = SchemaModel({
email: StringType()
.isEmail('请输入正确的电子邮件地址')
.addRule((value, data) => {
return asyncCheckEmail(value);
}, '电子邮件地址已存在') } )
;
表单
设置已声明的模型，并为需要异步验证的组件Form设置属性。checkAsync
`js
const formRef = React.createRef();
function render(){
return (
)
}
`
Form默认情况下提供该check()方法，checkAsync()如果是异步检查，则会调用该方法。
`js
formRef.current.checkAsync().then(result => {
console.log(result);
})
;
5.6 警报和通知支持关闭方法
两者Alert都Notification支持 `close()`close和closeAll`close()` 方法，分别用于关闭最后一条消息和关闭所有消息。在某些业务场景下，您可能需要在执行操作后关闭页面上的警告消息。您可以执行以下操作：
`ts
Alert.close();
Alert.closeAll();
Notification.close();
Notification.closeAll()
;
5.7 FlexboxGrid 支持响应式布局
Col布局中的组件可Grid配置为响应式布局，但缺少一些 Flex 布局的功能。为了将两种布局融合在一起，我们可以创建一个FlexboxGrid.Item组合Col布局，结合FlexboxGridFlex 布局功能和响应式配置相关的属性。
html
<FlexboxGrid.Item componentClass={Col} md={6}>
content
</FlexboxGrid.Item>
5.8 所有 Picker 新增的打开和关闭方法
在某些情况下，您需要Picker通过执行操作来打开或关闭一个 Picker。例如：在级联操作中，您希望在关闭 Picker 后快速选择下一个选项，默认情况下会放置一个 Next Picker。我们提供了一个 `on`open和close`on` 方法Picker：
`ts
const pickerRef = React.createRef();
function render() {
return ;
}
// 打开
pickerRef.current.open();
// 关闭
pickerRef.current.close()
;
5.9 其他修复
- 修复了上传大于 1GB 的文件时出现的显示问题。
- 修复了IE浏览器显示输入框的兼容性问题。
- 修复了键盘上的 InputPicker 按下删除键会清除输入值的问题。
- 修复了下拉菜单设置背景样式错误的问题
toggleComponentClass={Button}。 - 修复了按需引入样式时样式缺失的问题。
- 修复了 DatePicker 禁用日期与禁用月份不一致的问题。
- 修复了表格数据更新后滚动条位置未更新的问题。
- 修复了表格属性 expandedRowKeys 更新值不受控制的问题。
- 修复了 Table 属性 onRowClick 事件的回调参数缺失的问题。
- 修复了表单组件对焦点事件的支持。
- 修改了面包屑导航的默认分隔符。
- 修复了滑块从隐藏状态变为显示状态后，手柄位置未更新的问题。
6、最后
我希望我们的发展能为更多开发者带来更好的体验。如果您喜欢 React Suite，可以通过以下方式表达您的支持：
这个项目能够成功，全赖所有贡献者的付出。
