>在实际开发中我们经常会遇到在点击按钮时去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函数中可以再次调用对应的函数去执行一些逻辑操作。同时需要注意的是，代码的优雅不应该成为我们唯一的追求，在代码易读性与代码优雅以及页面性能之前，我们需要做一个平衡，总的来说，三者的关系是按照易读性>性能>优雅来排序的。**
