開學了，又是一個新的起點。伴著絲絲涼爽的秋風，React Suite 迎來了 4.0 版本的發布。從 2019 年 3 月份開始設計 V4 版本，經歷了 6 個多月的開發與測試，討論與爭執，終於完成了所有的計劃。
春種一粒粟，秋收萬顆子，在這個收穫的季節，我們為大家準備了一系列的更新，準備好了嗎? 嘟嘟嘟嘟...
一、從 Flow 遷移到 TypeScript首先，感謝 Flow 任教了整個 V3 版本，讓組件庫能夠方便的擁有靜態類型檢查。隨著我們在 TypeScript 的應用上更加廣泛，以及 Flow 陸續暴露的一些問題後，在本次版本中 Flow 離開了我們的課堂，而採用 TypeScript 重構了所有代碼。每一次破碎的重構都是一次重生，就是要讓代碼更具可讀性和可維護性。
二、可訪問性改進為支持新的瀏覽器特性，我們在上一個版本 V3 就放棄了 IE9。但我們任然希望用 React Suite 開發的 Web 應用儘可能有更多的人使用，更好的使用。我們在可訪問性上儘量去覆蓋更多的人群。
2.1 顏色對比度改進
在全世界存在很多弱視人群，而這部分用戶使用的顯示器往往又是參差不齊，文字與背景的對比度就成了用戶最基礎的功能問題。作為一個貼心的 UI 組件庫，怎麼能不照顧用戶的眼睛呢？
按照 《Web Content Accessibility Guidelines (WCAG) 》的要求，文字的顏色，字體的粗細，我們在對比度上都做了改進，調整了色板的算法，目的就是讓您的產品更具有可訪問性。
2.2 新增 Dark Mode（夜間模式）主題
在我們周圍的電子產品中，從作業系統到瀏覽器、編輯器、以及各種閱讀器都開始支持夜間模式。它是一種高對比度，或者反色模式的顯示模式，如果您的用戶需要長時間使用您的產品，擁有夜間模式能夠有效的緩解眼疲勞，更易於閱讀。
我們在您的夜裡製作了一個美夢，在默認的主題基礎上新增了 Dark Mode 主題，並提供了充分可以定製的選項，開發時候，只需要引入對應的樣式文件：
import 'rsuite/lib/styles/themes/dark/index.less';
更多關於主題相關的設置可以參考：自定義主題
三、新增組件組件是 React Suite 提供的最小單元。隨著 Web 應用原來越豐富，越來越多樣性，我們會陸續提供更豐富的組件。
3.1 支持 List 組件
List 組件在移動端使用的非常多，但在中後臺產品中，一直是一個不太好標準化的組件，在不同的業務場景下要求的表現形式都會存在差異，以至於我們在這個版本才實現它。List 除了可以自定義每一項的內容以外, 我們默認提供了拖拽排序功能。
3.2 支持 Placeholder 組件
在前端業內大家都知道「骨架屏」這個詞，它的作用其實和 Loader 類似，都是在應用未加載完成前，顯示給用戶的一個狀態，告訴用戶當前數據正在加載中。而 「骨架屏」 的優點，是在數據尚未加載前提前先給用戶看到頁面的大致結構，提升感官上的體驗。
Placeholder 就是這麼一個提供數據大致結構的組件。可以通過線條、矩形、圓形概要的繪製出內容區域的大致結構。
3.3 支持 Calendar 組件
Calendar 是一個簡單的日曆面板，可以針對日程顯示數據。提供了兩種使用場景，一種就是默認的顯示一個撐滿容器的大日曆面板，可以顯示一個月內的數據。另外一種是提供了一個小的緊湊的小日曆面板，在一些系統的側邊欄我們經常遇到，用於數據的篩選。
3.4 支持 Avatar 與 Badge 組件
支持 Avatar 組件，用於展示一個頭像或者商標。
支持 Badge 組件，用於按鈕、圖標旁的數字或狀態標記。
四、破壞性的變更
每一次的更新我們都希望對歷史版本做最大程度的兼容，但還是會存在一些破壞性的變更，比如使用了 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 兼容性變更
在本次版本中開始支持 Dark 主題，對 Less 文件的引入地址進行了調整。
3. 版本*
import 'rsuite/styles/less/index.less';
4. 版本*
import 'rsuite/lib/styles/themes/default/index.less'// 或者// import 'rsuite/lib/styles/index.less';
同時 Less 的版本需要升級至 >=3.0 版本。
4.3 TreePicker 與 CheckTreePicker 廢棄 expandAll 屬性
TreePicker 組件與 CheckTreePicker 組件廢棄了 expandAll 屬性，同時添加了 expandItemValues 屬性，用於展開指定節點。
4.4 調整了 Dropdown、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.* 版本
五、修復及改進5.1 所有的 Picker 組件支持設置大小
我們在數據錄入組件中有非常完善的 Picker 系列組件，除在可以在表單中使用以外，在一些數據過濾欄中也經常用到。考慮到 Input 和 Button 組件有 size 屬性可以調整大小，所以對所有 Picker 也添加了 size 屬性，滿足更多場景的組合使用。
5.2 Whisper、Picker 組件的防溢出處理
所有的 Picker 組件與 Whisper 組件都是彈出一個指定位置的浮層，但有時候會因為浮層的大小超出容器的範圍導致一部分浮層別擋住看不到，這個時候您可以設置一個 preventOverfow 屬性，會根據容器的空閒空間調整浮層顯示的相對位置，儘量讓浮層完全展示在頁面中。
5.3 FormControl 組件設置表單只讀
FormControl 新增兩個屬性支持：
readOnly 讓表單組件為只讀狀態，不可編輯。 plaintext 讓表單組件以純文本方式展示。當這兩個屬性設置 Form 組件上，將對表單內所有的表單組件進行全局設置。在很多情況下我們需要給錄入完成的表單添加一個數據詳細頁面，這個時候需要單獨新增一個模塊再把數據排版顯示出來。為了提高代碼的復用性，在這裡您可以通過給 Form 組件設置一個 plaintext 屬性，就把一個表單變成了數據詳細面板。
5.4 DatePicker 與 DateRangePicker 支持顯示周數
<DatePicker showWeekNumbers /><DateRangePicker showWeekNumbers />
如果在您的業務中需要查看周數，可以通過設置 showWeekNumbers 屬性，日曆選擇器的左側就會顯示當前行的周數。
5.5 Form 組合 Schema 支持異步校驗
異步校驗是一個基礎的需求，在本次版本中 Schema 開始支持 Promise。以下是表單改進的幾個內容：
在需要異步校驗的 <FormControl> 上設置 checkAsync 屬性。 異步校驗的驗證規則通過 schema 的 addRule 方法添加一個返回值為 Promise 的對象。 通過調用 <Form> 的 checkAsync 與 checkForFieldAsync 的訪問，可以手動觸發校驗。Model
示例中我們需要異步驗證一個郵箱地址是否在服務端已經存在，在給 Modal 添加規則的時候，通過 addRule 方法返回一個 Promise 對象。
function asyncCheckEmail(email) { return new Promise(resolve => { // 異步處理邏輯 resolve(true); });}const model = SchemaModel({ email: StringType() .isEmail('Please input the correct email address') .addRule((value, data) => { return asyncCheckEmail(value); }, 'Email address already exists')});
Form 把聲明好的 model 設置到對應的 Form 上，同時需要給需要異步校驗的組件設置一個 checkAsync 屬性。
const formRef = React.createRef();function render(){ return ( <Form model={model} ref={formRef}> <FormControl checkAsync name="email"/> </Form> )}
Form 默認提供了 check() 方法，如果是異步檢查需要調用 checkAsync() 方法。
formRef.current.checkAsync().then(result => { console.log(result);});
5.6 Alert 與 Notification 支持手動關閉
Alert 與 Notification 都支持 close 與 closeAll 方法，分別關閉最後一個消息和關閉所有消息。在某些業務情況下，需要在進行某個操作後關閉掉頁面上的警告信息，可以通過以下方法操作：
Alert.close();Alert.closeAll();Notification.close();Notification.closeAll();
5.7 FlexboxGrid 支持響應式
Grid 布局中的 Col 組件是可以針對響應式布局進行配置，但是它不具備 Flex 布局得一些特性，為了能夠讓兩種布局融合，我們可以讓 FlexboxGrid.Item 可以和 Col 組合使用，組合後 FlexboxGrid 及擁有了 Flex 布局得特性，同時擁有響應式配置相關的屬性。
<FlexboxGrid.Item componentClass={Col} md={6}> content</FlexboxGrid.Item>
5.8 所有的 Picker 新增打開和關閉方法
在某些情況下，需要通過執行某個操作後去打開或者關閉一個 Picker。例如：一個級聯操作，在關閉一個 Picker 後希望快速選擇，默認打個下一個 Picker。我們在 Picker 上提供了一個 open 與 close 方法：
const pickerRef = React.createRef();function render() { return <SelectPicker ref={pickerRef} />;}// 打開pickerRef.current.open();// 關閉pickerRef.current.close();
5.9 其他修復
修復了 Uploader 上傳文件大於 1GB 顯示問題。 修復了 Input 在 IE 瀏覽器顯示上的兼容性問題。 修復了 InputPicker 在鍵盤 Delete 鍵會清除輸入值得問題。 修復了 Dropdown 設置 toggleComponentClass={Button} 背景樣式錯誤的問題。 修復了按需引入時候樣式缺失的問題。 修復了 DatePicker 禁用日與禁用月不一致的問題。 修復了 Table 數據更新後滾動條位置不更新的問題。 修復了 Table 屬性 expandedRowKeys 更新值不受控。 修復了 Table 屬性 onRowClick 的回調參數缺少 event。 修復了 Form 組件對 focus 事件的支持。 修改了 Breadcrumb 的默認分隔符. 修復了 Slider 在從隱藏到顯示狀態變化後，手柄的位置不更新的問題。六、最後希望我們的成長，能給更多的開發者帶來更好的體驗。如果您喜歡 React Suite，可以通過以下方式支持我們：
這個項目的存在歸功於所有貢獻者。
國內交流群, 添加 React Suite 小助手，備註 rsuite， 邀請入群。