原文地址：https://github.com/SmallStoneSK/Blog/issues/2
1. 前言
由於最近接到一個需要支援拖拽選擇日期的日曆需求，做出來感覺體驗和效果都還不錯，所以今天想跟大家分享一下封裝這個日曆元件的過程。
2. 調研開始
正所謂“磨刀不誤砍柴工”，既然要做一個日曆，那麼先讓我們來看看最終想要做成什麼樣：
由於之前吃過RN在安卓上效能表現不佳的虧，深深地懷疑這東西做出來能在安卓上跑麼，尤其是日期要實時地隨著手指滑動的位置發生變化。還有這牽涉到了手勢系統，之前又沒搗鼓過，誰知道有沒有什麼天坑在等著我。。。
唉，不管了，先把最簡單的樣式實現了再考慮這些吧~
But! 正所謂“巧婦難為無米之炊”，沒有相應的日曆資料，怎麼畫日曆！So, let's do it first.
2.1 日曆資料
Q1：如何確定日曆要渲染哪些天的資料？
仔細觀察先前的示意圖，我們可以發現日曆中有些天是暗的，有些是高亮的。也就是說日曆上所渲染出來的這些格子，是有available/unavailable區別的。為此，我們可以支援兩種方式通過props傳入：
- 呼叫方指定fullDateRange和availableDateRange。fullDateRange是起始月份第一天到終止月份最後一天，availableDateRange是使用者可選範圍第一天到最後一天。
- 呼叫方指定maxDays。也就是今天是availableDateRange的第一天，而今天+maxDays是availableDateRange的最後一天；fullDateRange則是今天所在月份的第一天到今天+maxDays所在月份的最後一天。
理清了思路，我們來看看程式碼實現：
export class DraggableCalendar extends Component {
constructor(props) {
super(props);
this.state = {
calendarData: this._genCalendarData()
};
}
_genCalendarData({fullDateRange, availableDateRange, maxDays}) {
let startDate, endDate, availableStartDate, availableEndDate;
// if the exact dateRange is given, use availableDateRange; or render [today, today + maxDays]
if(fullDateRange) {
[startDate, endDate] = fullDateRange;
[availableStartDate, availableEndDate] = availableDateRange;
} else {
const today = Helper.parseDate(new Date(), 'yyyy-MM-dd');
availableStartDate = today;
availableEndDate = Helper.addDay(today, maxDays);
startDate = new Date(new Date(today).setDate(1));
endDate = Helper.getLastDayOfMonth(availableEndDate.getFullYear(), availableEndDate.getMonth());
}
// TODO: realize _genDayData function
return this._genDayData({startDate, endDate, availableStartDate, availableEndDate});
}
// ...
}
複製程式碼Q2：calendarData的結構怎麼設計比較好？
經過上一步，我們已經知曉了哪些day是需要渲染的，接下來我們再看看資料結構應該怎麼設計：
- 首先，每個月份的資料其實是相似的，無非就是包括了有哪些天。因此，我們可以用一個map物件來儲存，key就是year-month組成的字串，value就是這個月份相對應的資料。這樣既能利用年月作為特殊標誌符彼此區分，還能根據給定的年月資訊快速定位到相應的days資料。
- 再來看day的資料結構，我們可以先給它定義幾個基礎屬性：date、available、status。其中，status代表該日期當前的狀態，主要是用以區分使用者在拖拽操作日曆時，有沒有選中該日期。
我們再來看看相應的程式碼應該如何實現：
const DAY_STATUS = {
NONE: 0,
SINGLE_CHOSEN: 1,
RANGE_BEGIN_CHOSEN: 2,
RANGE_MIDDLE_CHOSEN: 3,
RANGE_END_CHOSEN: 4
};
_genDayData({startDate, endDate, availableStartDate, availableEndDate}) {
let result = {}, curDate = new Date(startDate);
while(curDate <= endDate) {
// use `year-month` as the unique identifier
const identifier = Helper.formatDate(curDate, 'yyyy-MM');
// if it is the first day of a month, init it with an array
// Note: there are maybe several empty days at the first of each month
if(!result[identifier]) {
result[identifier] = [...(new Array(curDate.getDay() % 7).fill({}))];
}
// save each day's data into result
result[identifier].push({
date: curDate,
status: DAY_STATUS.NONE,
available: (curDate >= availableStartDate && curDate <= availableEndDate)
});
// curDate + 1
curDate = Helper.addDay(curDate, 1);
}
// there are several empty days in each month
Object.keys(result).forEach(key => {
const len = result[key].length;
result[key].push(...(new Array((7 - len % 7) % 7).fill({})));
});
return result;
}
複製程式碼生成日曆資料就這樣大功告成啦，貌似還挺容易的嘛~ 我們來打個log看看長什麼樣：
2.2 日曆樣式
其實樣式這個環節，倒是最容易的，主要是對日曆的內容進行合適的拆解。
- 首先，我們可以拆分為renderHeader和renderBody。其中，header是上方的周幾資訊，body則是由多個月份組成的主體內容。
- 其次，每個月份由又可以拆分成renderMonthHeader和renderMonthBody。其中，monthHeader展示相應的年月資訊，monthBody則是這個月的日期資訊。（PS: 有一點可以取巧的是monthBody部分，我們可以用FlatList的numColumns這個屬性實現，只要設定成7就行。）
- 最後，我們可以用renderDay來渲染每個日期的資訊。需要注意的是，每個Day可能有5種不同的狀態(NONE, SINGLE_CHOSEN, RANGE_BEGIN_CHOSEN, RANGE_MIDDLE_CHOSEN, RANGE_END_CHOSEN)，所以需要不同的相應樣式來對應。
除此之外，還有一點就是一定要考慮該日曆元件的可擴充套件性，樣式方面肯定是可以讓呼叫方可自定義啦。為此，程式碼方面我們可以這麼寫：
export class DraggableCalendar extends Component {
// ...
_renderHeader() {
const {headerContainerStyle, headerTextStyle} = this.props;
return (
<View style={[styles.headerContainer, headerContainerStyle]}>
{['日', '一', '二', '三', '四', '五', '六'].map(item => (
<Text key={item} style={[styles.headerText, headerTextStyle]}>{item}</Text>
))}
</View>
);
}
_renderBody() {
const {calendarData} = this.state;
return (
<ScrollView>
{Object
.keys(calendarData)
.map((key, index) => this._renderMonth({identifier: key, data: calendarData[key], index}))
}
</ScrollView>
);
}
_renderMonth({identifier, data, index}) {
return [
this._renderMonthHeader({identifier}),
this._renderMonthBody({identifier, data, index})
];
}
_renderMonthHeader({identifier}) {
const {monthHeaderStyle, renderMonthHeader} = this.props;
const [year, month] = identifier.split('-');
return (
<View key={`month-header-${identifier}`}>
{renderMonthHeader ?
renderMonthHeader(identifier) :
<Text style={[styles.monthHeaderText, monthHeaderStyle]}>{`${parseInt(year)}年${parseInt(month)}月`}</Text>
}
</View>
);
}
_renderMonthBody({identifier, data, index}) {
return (
<FlatList
ref={_ => this._refs['months'][index] = _}
data={data}
numColumns={7}
bounces={false}
key={`month-body-${identifier}`}
keyExtractor={(item, index) => index}
renderItem={({item, index}) => this._renderDay(item, index)}
/>
);
}
_renderDay(item, index) {
const {
renderDay, dayTextStyle, selectedDayTextStyle, dayContainerStyle,
singleDayContainerStyle, beginDayContainerStyle, middleDayContainerStyle, endDayContainerStyle
} = this.props;
let usedDayTextStyle = [styles.dayText, dayTextStyle];
let usedDayContainerStyle = [styles.dayContainer, dayContainerStyle];
if(item.status !== DAY_STATUS.NONE) {
const containerStyleMap = {
1: [styles.singleDayContainer, singleDayContainerStyle],
2: [styles.beginDayContainer, beginDayContainerStyle],
3: [styles.middleDayContainer, middleDayContainerStyle],
4: [styles.endDayContainer, endDayContainerStyle]
};
usedDayTextStyle.push(styles.selectedDayText, selectedDayTextStyle);
usedDayContainerStyle.push(...(containerStyleMap[item.status] || {}));
}
return (
<View key={`day-${index}`} style={{flex: 1}}>
{renderDay ?
renderDay(item, index) :
<View style={usedDayContainerStyle}>
{item.date && (
<Text style={[...usedDayTextStyle, !item.available && {opacity: .6}]}>
{item.date.getDate()}
</Text>
)}
</View>
}
</View>
);
}
render() {
const {style} = this.props;
return (
<View style={[styles.container, style]}>
{this._renderHeader()}
{this._renderBody()}
</View>
);
}
}
複製程式碼
2.3 實現拖拽
呼~ 長吁一口氣，萬里長征終於邁出了第一步，接下來就是要實現拖拽了。而要實現拖拽，我們可以通過大致以下流程：
- 獲得所有日曆中所有日期的佈局資訊，和手指觸控的實時座標資訊；
- 根據手指當前所在的座標資訊，計算出手指落在哪個日期上，也就是當前選中的日期；
- 比較前後的選中日期資訊，如果不同，更新state，觸發render重新渲染。
為此，我們來逐一解決各個問題：
2.3.1 獲取相關佈局和座標資訊
獲取相關佈局：
在RN中，有兩種方法可以獲取一個元素的佈局資訊。一個是onLayout，還有一個就是UIManager.measure。講道理，兩種方法都能實現我們的需求，但是通過UIManager.measure，我們這裡的程式碼可以更優雅。具體程式碼如下：
export class DraggableCalendar extends Component {
constructor(props) {
// ...
this._monthRefs = [];
this._dayLayouts = {};
}
componentDidMount() {
Helper.waitFor(0).then(() => this._genLayouts());
}
_getRefLayout(ref) {
return new Promise(resolve => {
UIManager.measure(findNodeHandle(ref), (x, y, width, height, pageX, pageY) => {
resolve({x, y, width, height, pageX, pageY});
});
});
}
_genDayLayout(identifier, layout) {
// according to the identifier, find the month data from calendarData
const monthData = this.state.calendarData[identifier];
// extract info from layout, and calculate the width and height for each day item
const {x, y, width, height} = layout;
const ITEM_WIDTH = width / 7, ITEM_HEIGHT = height / (monthData.length / 7);
// calculate the layout for each day item
const dayLayouts = {};
monthData.forEach((data, index) => {
if(data.date) {
dayLayouts[Helper.formatDate(data.date, 'yyyy-MM-dd')] = {
x: x + (index % 7) * ITEM_WIDTH,
y: y + parseInt(index / 7) * ITEM_HEIGHT,
width: ITEM_WIDTH,
height: ITEM_HEIGHT
};
}
});
// save dayLayouts into this._layouts.days
Object.assign(this._dayLayouts, dayLayouts);
}
_genLayouts() {
// after rendering scrollView and months, generates the layout params for each day item.
Promise
.all(this._monthRefs.map(ref => this._getRefLayout(ref)))
.then((monthLayouts) => {
// according to the month's layout, calculate each day's layout
monthLayouts.forEach((monthLayout, index) => {
this._genDayLayout(Object.keys(this.state.calendarData).sort()[index], monthLayout);
});
console.log(Object.keys(this._dayLayouts).map(key => this._dayLayouts[key].y));
});
}
_renderMonthBody({identifier, data, index}) {
return (
<FlatList
ref={_ => this._monthRefs[index] = _}
data={data}
numColumns={7}
bounces={false}
key={`month-body-${identifier}`}
keyExtractor={(item, index) => index}
renderItem={({item, index}) => this._renderDay(item, index)}
/>
);
}
// ...
}
複製程式碼通過給UIManager.measure封裝一層promise，我們可以巧妙地利用Promise.all來知道什麼時候所有的month元素都已經渲染完畢，然後可以進行下一步的dayLayouts計算。但是，如果使用onLayout方法就不一樣了。由於onLayout是非同步觸發的，所以沒法保證其呼叫的先後順序，更是不知道什麼時候所有的month都渲染完畢了。除非，我們再額外加一個計數器，當onLayout觸發的次數（計數器的值）等於month的個數，這樣才能知道所有month渲染完畢。不過相比於前一種方法，肯定是前一種更優雅啦~
獲取手指觸控的座標資訊：
重頭戲終於要來啦！在RN中，有一個手勢系統封裝了豐富的手勢相關操作，相關文件可以戳這裡。
首先我們來思考這麼個問題，由於日曆的內容是用ScrollView包裹起來的，因此我們正常的上下拖動操作會導致ScrollView內容上下滾動。那麼問題就來了，我們應該怎麼區分這個上下拖動操作，是應該讓內容上下滾動，還是選中不同的日曆範圍呢？
在這裡，我採用的解決方案是用兩個透明的View蓋在ScrollView上層，然後把手勢處理系統加在這層View上。由於手指是觸控在View上，並不會導致ScrollView滾動，因此完美地規避了上面這個問題。
不過，如果用這種方法會有另外一個問題。因為透明的View是採用的絕對定位佈局，left和top值是當前選中日期的座標資訊。但是當ScrollView上下發生滾動時，這層透明View也要跟著動，也就是在onScroll事件中改變其top值，並重新整理當前元件。我們來看看具體程式碼是怎麼實現的：
export class DraggableCalendar extends Component {
constructor(props) {
// ...
this._scrollY = 0;
this._panResponder = {};
this._onScroll = this._onScroll.bind(this);
}
componentWillMount() {
this._initPanResponder();
}
_initPanResponder() {
// TODO
}
_genDraggableAreaStyle(date) {
if(!date) {
return null;
} else {
if(Helper.isEmptyObject(this._dayLayouts)) {
return null;
} else {
const {x, y, width, height} = this._dayLayouts[Helper.formatDate(date, 'yyyy-MM-dd')];
return {left: x, top: y - this._scrollY, width, height};
}
}
}
_onScroll(e) {
this._scrollY = Helper.getValue(e, 'nativeEvent:contentOffset:y', this._scrollY);
clearTimeout(this.updateTimer);
this.updateTimer = setTimeout(() => {
this.forceUpdate();
}, 100);
}
_renderBody() {
const {calendarData} = this.state;
return (
<View style={styles.bodyContainer}>
<ScrollView scrollEventThrottle={1} onScroll={this._onScroll}>
{Object
.keys(calendarData)
.map((key, index) => this._renderMonth({identifier: key, data: calendarData[key], index}))
}
</ScrollView>
{this._renderDraggableArea()}
</View>
);
}
_renderDraggableArea() {
const {startDate, endDate} = this.state;
if(!startDate || !endDate) {
return null;
} else {
const isSingleChosen = startDate.getTime() === endDate.getTime();
return [
<View
key={'drag-start'}
{...this._panResponder.panHandlers} style={[styles.dragContainer, this._genDraggableAreaStyle(startDate)]}
/>,
<View
key={'drag-end'}
{...this._panResponder.panHandlers}
style={[styles.dragContainer, this._genDraggableAreaStyle(endDate), isSingleChosen && {height: 0}]}
/>
];
}
}
// ...
}
複製程式碼注意：state中的startDate和endDate是當前選中時間範圍的第一天和最後一天。由於現在都還沒有值，所以目前看不出效果。
接下來，我們再實現最重要的_initPanResponder方法。PanResponder提供了很多回撥，在這裡，我們主要用到的就只有5個：
- onStartShouldSetPanResponder：開始的時候申請成為響應者；
- onMoveShouldSetPanResponder：移動的時候申請成為響應者；
- onPanResponderGrant：開始手勢操作；
- onPanResponderMove：移動中；
- onPanResponderRelease：手指放開，手勢操作結束。
除此之外，以上的回撥函式都會攜帶兩個引數：event和gestureState，它們中包含了非常重要的資訊。在這裡，我們主要用到的是：
event.nativeEvent:
- locationX: 觸控點相對於父元素的橫座標
- locationY: 觸控點相對於父元素的縱座標
gestureState:
- dx: 從觸控操作開始時的累計橫向路程
- dy: 從觸控操作開始時的累計縱向路程
因此，我們可以在onPanResponderGrant記錄下一開始手指的座標，然後在onPanResponderMove中獲取deltaX和deltaY，相加之後就得到當前手指的實時座標。一起來看下程式碼：
export class DraggableCalendar extends Component {
constructor(props) {
// ...
this.state = {
startDate: new Date(2018, 5, 7, 0, 0, 0),
endDate: new Date(2018, 5, 10, 0, 0, 0),
calendarData: this._genCalendarData({fullDateRange, availableDateRange, maxDays})
};
this._touchPoint = {};
this._onPanGrant = this._onPanGrant.bind(this);
this._onPanMove = this._onPanMove.bind(this);
this._onPanRelease = this._onPanRelease.bind(this);
}
_initPanResponder() {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: this._onPanGrant,
onPanResponderMove: this._onPanMove,
onPanResponderRelease: this._onPanRelease
});
}
_onPanGrant(evt) {
// save the initial position
const {locationX, locationY} = evt.nativeEvent;
this._touchPoint.x = locationX;
this._touchPoint.y = locationY;
}
_onPanMove(evt, gesture) {
// save the delta offset
const {dx, dy} = gesture;
this._touchPoint.dx = dx;
this._touchPoint.dy = dy;
// console for test
console.log('(x, y):', this._touchPoint.x + dx, this._touchPoint.y + dy);
}
_onPanRelease() {
// clear the saved info
this._touchPoint = {};
}
// ...
}
複製程式碼我們給state中的startDate和endDate隨意加個值，並給draggableArea加個半透明的紅色來測試下，我們的手勢操作到底有沒有起作用。
咦~ 怎麼console得到的值看起來好像不太對。列印出來的(x, y)像是相對draggableArea的座標，而不是整個ScrollView的座標。不過這也好辦，因為我們知道draggableArea的left和top值，所以加上就好了。我們可以在onTouchStart這個函式中做這件事，同時還可以區分當前手指觸控的是選中時間範圍內的第一天還是最後一天。程式碼如下：
export class DraggableCalendar extends Component {
constructor(props) {
// ...
this._pressEnd = false;
this._pressStart = false;
}
_onTouchStart(type, date) {
const pressMap = {start: '_pressStart', end: '_pressEnd'};
this[pressMap[type]] = true;
if(this._pressStart || this._pressEnd) {
const dateStr = Helper.formatDate(date, 'yyyy-MM-dd');
this._touchPoint.x += Helper.getValue(this, `_dayLayouts:${dateStr}:x`, 0);
this._touchPoint.y += Helper.getValue(this, `_dayLayouts:${dateStr}:y`, 0);
}
}
_renderDraggableArea() {
const {startDate, endDate} = this.state;
if(!startDate || !endDate) {
return null;
} else {
const isSingleChosen = startDate.getTime() === endDate.getTime();
return [
<View
key={'drag-start'}
{...this._panResponder.panHandlers}
onTouchStart={() => this._onTouchStart('start', startDate)}
style={[styles.dragContainer, this._genDraggableAreaStyle(startDate)]}
/>,
<View
key={'drag-end'}
{...this._panResponder.panHandlers}
onTouchStart={() => this._onTouchStart('end', endDate)}
style={[styles.dragContainer, this._genDraggableAreaStyle(endDate), isSingleChosen && {height: 0}]}
/>
];
}
}
// ...
}
複製程式碼2.3.2 座標資訊轉換成日期資訊
根據上面的步驟，我們已經成功地獲取到了當前手指觸控的實時座標。所以，接下來就是把該座標轉換成落在哪個日期上，從而可以判斷出選中日期是否發生變化。
這一步，說簡單也簡單，要想複雜那也可以複雜。簡單來看。我們的this._dayLayouts儲存了所有Day的layout，我們只需要進行遍歷，判斷手指座標有沒有落在某個Day的範圍當中即可。複雜來講，就是減少不必要的比較次數。不過，我們還是先實現功能為主，優化步驟在後面介紹。實現程式碼如下：
// Helper.js
export const Helper = {
// ...
positionToDate(position, dayLayouts) {
let date = null;
Object.keys(dayLayouts).forEach(key => {
const {x, y} = position, layout = dayLayouts[key];
if(
x >= layout.x &&
x <= layout.x + layout.width &&
y >= layout.y &&
y <= layout.y + layout.height
) {
date = Helper.parseDate(key);
}
});
return date;
}
}
// DraggableCalendar.js
export class DraggableCalendar extends Component {
// ...
_onPanMove(evt, gesture) {
// ...
// for test
console.log('cur date:', Helper.positionToDate({x: this._touchPoint.x + dx, y: this._touchPoint.y + dy}, this._dayLayouts));
}
}
複製程式碼2.3.3 對比前後選中日期，觸發渲染
經過上一步的positionToDate，我們知道了當前手指落在哪一天上。接下來，就是比較當前新的選中日期和拖動之前舊的選中日期，看看有沒有發生變化。
**特別注意：**假如我們一開始手指是觸控在start上，但是拖動之後手指停留的日期已經大於end上的日期；或者反過來，一開始觸控在end上，拖動之後手指停留的日期小於start上的日期。這種特殊情況下，pressStart和pressEnd其實發生了變化，所以需要特殊處理。我們來看看程式碼是怎麼寫的：
// Helper.js
export const Helper = {
getDayStatus(date, selectionRange = []) {
let status = DAY_STATUS.NONE;
const [startDate, endDate] = selectionRange;
if(!startDate || !endDate) {
return status;
}
if(startDate.getTime() === endDate.getTime()) {
if(date.getTime() === startDate.getTime()) {
return DAY_STATUS.SINGLE_CHOSEN;
}
} else {
if(date.getTime() === startDate.getTime()) {
return DAY_STATUS.RANGE_BEGIN_CHOSEN;
} else if(date > startDate && date < endDate) {
return DAY_STATUS.RANGE_MIDDLE_CHOSEN;
} else if(date.getTime() === endDate.getTime()) {
return DAY_STATUS.RANGE_END_CHOSEN;
}
}
return status;
}
};
// DraggableCalendar.js
export class DraggableCalendar extends Component {
_updateDayStatus(selectionRange) {
const {calendarData} = this.state;
Object.keys(calendarData).forEach(key => {
// set a flag: if status has changed, it means this month should be re-rendered.
let hasChanged = false;
calendarData[key].forEach(dayData => {
if(dayData.date) {
const newDayStatus = Helper.getDayStatus(dayData.date, selectionRange);
if(dayData.status !== newDayStatus) {
hasChanged = true;
dayData.status = newDayStatus;
}
}
});
// as monthBody is FlatList, the data should be two objects. Or it won't be re-rendered
if(hasChanged) {
calendarData[key] = Object.assign([], calendarData[key]);
}
});
this.setState({calendarData});
}
_updateSelection() {
const {x, dx, y, dy} = this._touchPoint;
const touchingDate = Helper.positionToDate({x: x + dx, y: y + dy}, this._dayLayouts);
// if touchingDate doesn't exist, return
if(!touchingDate) return;
// generates new selection dateRange
let newSelection = [], {startDate, endDate} = this.state;
if(this._pressStart && touchingDate.getTime() !== startDate.getTime()) {
if(touchingDate <= endDate) {
newSelection = [touchingDate, endDate];
} else {
this._pressStart = false;
this._pressEnd = true;
newSelection = [endDate, touchingDate];
}
} else if(this._pressEnd && touchingDate.getTime() !== endDate.getTime()) {
if(touchingDate >= startDate) {
newSelection = [startDate, touchingDate];
} else {
this._pressStart = true;
this._pressEnd = false;
newSelection = [touchingDate, startDate];
}
}
// if selection dateRange changes, update it
if(newSelection.length > 0) {
this._updateDayStatus(newSelection);
this.setState({startDate: newSelection[0], endDate: newSelection[1]});
}
}
_onPanMove(evt, gesture) {
// ...
this._updateSelection();
}
}
複製程式碼這裡需要對_updateDayStatus函式進行稍加解釋：
我們在renderMonthBody用的是FlatList，由於FlatList是純元件，所以只有當props發生變化時，才會重新渲染。雖然我們在_updateDayStatus中更新了calendarData，但其實是同一個物件。所以，分配給renderMonthBody的data也會是同一個物件。為此，我們在更新Day的status時用一個flag來表示該月份中是否有日期的狀態發生變化，如果發生變化，我們會用Object.assign來複制一個新的物件。這樣一來，狀態發生變化的月份會重新渲染，而沒有發生變化的月份不會，這反而算是一個效能上的優化吧。
2.4 其他
其實，上面我們已經實現了基本的拖拽操作。但是，還有一些遺留的小問題：
- 使用者點選非選中時間段的日期，應該重置當前選中日期；
- 使用者手指停留的日期是unavailable（即不可操作的）時，該日期不應該被選中；
- 元件應支援在初始化的時候選中props中指定的一段時間範圍；
- 手指在滑動到月初/月末空白區域時，也能響應選中月初/月末；
...
當然了，上面的這些問題都是細節問題，考慮篇幅原因，就不再詳述了。。。
但是！效能優化問題是肯定要講的！因為，就目前做出來的這東西在ios上表現還可以，但是在android上拖動的時候，會有一點卡頓感。尤其是在效能差的機子上，卡頓感就更明顯了。。。
3. 效能優化
我們都知道，react效能上的優化很大程度上得益於其強大的DomDiff，通過它可以減少dom操作。但是過多的DomDiff也是一個消耗，所以怎麼減少無謂的DomDiff呢？答案是正確地使用shouldComponentUpdate函式，不過我們還是得首先找出哪些是無謂的DomDiff。
為此，我們可以在我們寫的所有_renderXXX函式中打一個log，在手指拖動的時候，都有哪些元件一直在render？
經過試驗，可以發現每次選中日期發生變化的時候，_renderMonth，_renderMonthHeader，_renderMonthBody和_renderDay這幾個函式會觸發很多次。原因很簡單，當選中日期發生變化時，我們通過setState更新了clendarData，從而觸發了整個日曆重新render。因此，每個month都會重新渲染，相應的這幾個render函式都會觸發一遍。
3.1 減少renderMonth的DomDiff
既然源頭已經找到，我們就可以對症下藥了。其實也簡單，我們每次只要更新狀態發生變化的月份就可以，其他的月份可以省略其DomDiff過程。
但是！！！這個解決方案有一個弊端，就是需要維護changingMonth這個變數。每次手指拖動操作的時候，我們都得計算出哪些月份是發生狀態變化的；手指釋放之後，又得重置changingMonth。而且，現在這個元件的操作邏輯相對來說還比較簡單，如果互動邏輯往後變得越來越複雜，那這個維護成本會繼續上升。。。
所以，我們可以換個思路~ month不是每次都會DomDiff嗎？沒關係，我把month中的子元件封裝成PureComponent，這樣子元件的DomDiff過程是會被優化掉的。所以，即使每次渲染month，也會大大減少無謂的DomDiff操作。而_renderMonthBody用的是FlatList，這已經是純元件了，所以已經起到一定的優化效果，不然_renderDay的觸發次數會更多。因此，我們要做的只是把_renderMonthHeader改造成純元件就好了。來看看程式碼：
// MonthHeader.js
export class MonthHeader extends PureComponent {
render() {
const {identifier, monthHeaderTextStyle, renderMonthHeader} = this.props;
const [year, month] = identifier.split('-');
return (
<View>
{renderMonthHeader ?
renderMonthHeader(identifier) :
<Text style={[styles.monthHeaderText, monthHeaderTextStyle]}>
{`${parseInt(year)}年${parseInt(month)}月`}
</Text>
}
</View>
);
}
}
// DraggableCalendar.js
export class DraggableCalendar extends Component {
// ...
_renderMonthHeader({identifier}) {
const {monthHeaderTextStyle, renderMonthHeader} = this.props;
return (
<MonthHeader
key={identifier}
identifier={identifier}
monthHeaderTextStyle={monthHeaderTextStyle}
renderMonthHeader={renderMonthHeader}
/>
);
}
}
複製程式碼3.2 減少renderDay的DomDiff
根據前面的試驗結果，其實我們可以發現每次渲染月份的時候，這個月份中的所有DayItem都會被渲染一遍。但實際上只需要狀態發生變化的DayItem重新渲染即可。所以，這又給了我們優化的空間，可以進一步減少無謂的DomDiff。
上面的例子已經證明PureComponent是再好不過的優化利器了~ 所以，我們繼續把_renderDay改造成純元件，來看程式碼：
// Day.js
export class Day extends PureComponent {
_genStyle() {
const {
data, dayTextStyle, selectedDayTextStyle,
dayContainerStyle, singleDayContainerStyle,
beginDayContainerStyle, middleDayContainerStyle, endDayContainerStyle
} = this.props;
const usedDayTextStyle = [styles.dayText, dayTextStyle];
const usedDayContainerStyle = [styles.dayContainer, dayContainerStyle];
if(data.status !== DAY_STATUS.NONE) {
const containerStyleMap = {
1: [styles.singleDayContainer, singleDayContainerStyle],
2: [styles.beginDayContainer, beginDayContainerStyle],
3: [styles.middleDayContainer, middleDayContainerStyle],
4: [styles.endDayContainer, endDayContainerStyle]
};
usedDayTextStyle.push(styles.selectedDayText, selectedDayTextStyle);
usedDayContainerStyle.push(...(containerStyleMap[data.status] || {}));
}
return {usedDayTextStyle, usedDayContainerStyle};
}
render() {
const {data, renderDay} = this.props;
const {usedDayTextStyle, usedDayContainerStyle} = this._genStyle();
return (
<View style={{flex: 1}}>
{renderDay ?
renderDay(data) :
<View style={usedDayContainerStyle}>
{data.date && (
<Text style={[...usedDayTextStyle, !data.available && {opacity: .6}]}>
{data.date.getDate()}
</Text>
)}
</View>
}
</View>
);
}
}
// DraggableCalendar.js
export class DraggableCalendar extends Component {
// ...
_renderDay(item, index) {
const styleKeys = [
'dayTextStyle', 'selectedDayTextStyle',
'dayContainerStyle', 'singleDayContainerStyle',
'beginDayContainerStyle', 'middleDayContainerStyle', 'endDayContainerStyle'
];
return (
<Day
key={`day-${index}`}
data={item}
status={item.status}
{...styleKeys.map(key => this.props[key])}
/>
);
}
}
複製程式碼3.3 減少positionToDate的查詢次數
經過上面兩步，已經減緩了一部分的DomDiff開銷了。那還有什麼可以優化的呢？還記得前文提到的positionToDate函式麼？目前我們是通過遍歷的方式將座標轉換成日期的，時間複雜度是O(n)，所以這裡還有優化的空間。那麼又該怎麼優化呢？
這時以前學的演算法是終於有用武之地了，哈哈~ 由於日曆中的日期排版很有規律，從左到右看，都是遞增的；從上到下看，也是遞增的。so~ 我們可以用二分查詢來減少這個查詢次數，將時間複雜度降到O(nlog2)。不過，在這個case中，我們應當如何使用二分呢？
其實，我們可以使用3次二分：
- 因為Month垂直方向上是遞增的，縱座標y也是遞增的，所以先用二分定位到當前手指落在哪個月份中；
- 同一個月內，水平方向上橫座標x是遞增的，所以再用一次二分定位到當前手指落在周几上；
- 同一個月內，垂直方向上縱座標y是遞增的，可以再用一次二分定位到當前手指落在哪天上。
思路已經有了，可是我們的this._dayLayouts是一個物件，沒法操作。所以，我們需要做一層轉換，姑且就叫索引吧，這樣顯得洋氣~~~ 來看程式碼：
// Helper.js
export const Helper = {
// ...
arrayTransform(arr = []) {
if(arr.length === 0) return [];
let result = [[]], lastY = arr[0].y;
for(let i = 0, count = 0; i < arr.length; i++) {
if(arr[i].y === lastY) {
result[count].push(arr[i]);
} else {
lastY = arr[i].y;
result[++count] = [arr[i]];
}
}
return result;
},
buildIndexItem({identifier, dayLayouts, left, right}) {
const len = dayLayouts.length;
return {
identifier,
boundary: {
left, right, upper: dayLayouts[0].y,
lower: dayLayouts[len - 1].y + dayLayouts[len - 1].height
},
dayLayouts: Helper.arrayTransform(dayLayouts.map((item, index) => {
const date = `${identifier}-${index + 1}`;
if(index === 0){
return Object.assign({date}, item, {x: left, width: item.x + item.width - left});
} else if (index === len - 1) {
return Object.assign({date}, item, {width: right - item.x});
} else {
return Object.assign({date}, item);
}
}))
};
}
};
// DraggableCalendar.js
export class DraggableCalendar extends Component {
constructor(props) {
// ...
this._dayLayoutsIndex = [];
}
_genDayLayout(identifier, layout) {
// ...
// build the index for days' layouts to speed up transforming (x, y) to date
this._dayLayoutsIndex.push(Helper.buildIndexItem({
identifier, left: x, right: x + width,
dayLayouts: Object.keys(dayLayouts).map(key => dayLayouts[key])
}));
}
// ...
}
複製程式碼
從上面列印出來的索引結果中，我們可以看到建立索引的過程主要是幹了兩件事：
- 儲存下了每個月的上下左右邊界，這樣就可以用二分快速找到當前手指落在哪個月份中了；
- 將原本一維的dayLayouts轉換成了二維陣列，與日曆的展示方式保持一致，目的也是為了方便二分查詢。
接下來再看看二分查詢的程式碼：
// Helper.js
export const Helper = {
binarySearch(data=[], comparedObj, comparedFunc) {
let start = 0;
let end = data.length - 1;
let middle;
let compareResult;
while(start <= end) {
middle = Math.floor((start + end) / 2);
compareResult = comparedFunc(data[middle], comparedObj);
if(compareResult < 0) {
end = middle - 1;
} else if(compareResult === 0) {
return data[middle];
} else {
start = middle + 1;
}
}
return undefined;
},
positionToDate(position, dayLayoutsIndex) {
// 1. use binary search to find the monthIndex
const monthData = Helper.binarySearch(dayLayoutsIndex, position, (cur, compared) => {
if(compared.y < cur.boundary.upper) {
return -1;
} else if(compared.y > cur.boundary.lower) {
return 1;
} else {
return 0;
}
});
// 2. use binary search to find the rowData
if(monthData === undefined) return null;
const rowData = Helper.binarySearch(monthData.dayLayouts, position, (cur, compared) => {
if(compared.y < cur[0].y) {
return -1;
} else if(compared.y > cur[0].y + cur[0].height) {
return 1;
} else {
return 0;
}
});
// 3. use binary search to find the result
if(rowData === undefined) return null;
const result = Helper.binarySearch(rowData, position, (cur, compared) => {
if(compared.x < cur.x) {
return -1;
} else if(compared.x > cur.x + cur.width) {
return 1;
} else {
return 0;
}
});
// 4. return the final result
return result !== undefined ? Helper.parseDate(result.date) : null;
}
// ...
};
複製程式碼我們來絕歌例子看看優化的效果：假如渲染的日曆資料有6個月的內容，也就是180天。最壞的情況下，原先需要查詢180次才有結果。而現在呢？月份最多3次能確定，row最多3次能確定，col最多3次能確定，也就是最多9次就能找到結果。
啊哈~ 簡直是文美~ 再看看手指拖拽時的效果，絲毫沒有卡頓感，媽媽再也不用擔心RN在android上的效能效果啦~
4. 實戰
費了那麼大勁兒，又是封裝元件，又是優化效能的，現在終於可以能派上用場啦~ 為了應對產品變化多端的需求，我們早就對日曆的樣式做了可配置化。
來看看效果咋樣：
5. 寫在最後
看著眼前的這個demo，也算是收穫不小，既接觸了RN的手勢系統，還漲了一波元件的優化經驗，甚至還用到了二分查詢~ 嘿嘿嘿，美滋滋~
老規矩，本文程式碼地址：