>在實際開發中我們經常會遇到在點擊按鈕時去setState的情況,在按鈕數量增多且對應的狀態的key值不同的情況下,為了實現代碼的簡潔、優雅,需要我們實現動態的設置setState的key值,本章的內容將就解決了這個問題。
<br />
### 傳遞的which與state的key值相同
需求是我們要根據調用函數時傳遞的which字段來動態設置跟與which字段名字相同的state,并將value設置為state的值

handleState函數接受一個指向state的標識,該標識與state的key值相同,value接受我們本次要設置的值,通過這樣一個純函數(沒有多余的邏輯操作、沒有副作用),我們減少了在頁面中不停的手寫this.setState({})的次數。
>[danger]類似handleState的函數我們稱之為純函數,在函數式編程中會經常用到(但不同,函數式編程的所用到的函數必須有返回值)。純函數所做的功能應該盡可能的小,最好只進行一種操作。
在頁面中我們會非常頻繁的調用純函數,如果純函數中有耦合的邏輯,將來這些邏輯的修改會導致整個回歸測試的工作量非常大,也脫離了我們抽離出這個函數的本意。
<br />
### 傳遞的which與state的key值不同
<br />
#### which與state對應key值有規律
傳遞字段值與state的值是有規律的,即前半段或者后半段的字符相同,可以通過拼接字符串的方式實現,如下圖所示

<br />
#### which與state對應key值無規律
可以通過結合前一章講述的映射關系實現
來實現。
```javascript
const keyObjects = {
title: 'titleModal',
back: 'modalBack',
}
handState = (which, state) => {
const whichState = keyObjects[which];
this.setState({
[whichState]: state,
});
}
```
<br />
**映射關系和動態setState可以結合出很多種可能,比如映射關系中在加入一些函數映射,在handle函數中可以再次調用對應的函數去執行一些邏輯操作。同時需要注意的是,代碼的優雅不應該成為我們唯一的追求,在代碼易讀性與代碼優雅以及頁面性能之前,我們需要做一個平衡,總的來說,三者的關系是按照易讀性>性能>優雅來排序的。**