>在實際開發中我們經常會遇到在點擊按鈕時去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函數中可以再次調用對應的函數去執行一些邏輯操作。同時需要注意的是，代碼的優雅不應該成為我們唯一的追求，在代碼易讀性與代碼優雅以及頁面性能之前，我們需要做一個平衡，總的來說，三者的關系是按照易讀性>性能>優雅來排序的。**
