react动态增加state_React技巧-动态setState的实现

>在实际开发中我们经常会遇到在点击按钮时去setState的情况，在按钮数量增多且对应的状态的key值不同的情况下，为了实现代码的简洁、优雅，需要我们实现动态的设置setState的key值，本章的内容将就解决了这个问题。

### 传递的which与state的key值相同

需求是我们要根据调用函数时传递的which字段来动态设置跟与which字段名字相同的state，并将value设置为state的值


handleState函数接受一个指向state的标识，该标识与state的key值相同，value接受我们本次要设置的值，通过这样一个纯函数(没有多余的逻辑操作、没有副作用)，我们减少了在页面中不停的手写this.setState({})的次数。

>[danger]类似handleState的函数我们称之为纯函数，在函数式编程中会经常用到(但不同，函数式编程的所用到的函数必须有返回值)。纯函数所做的功能应该尽可能的小，最好只进行一种操作。

在页面中我们会非常频繁的调用纯函数，如果纯函数中有耦合的逻辑，将来这些逻辑的修改会导致整个回归测试的工作量非常大，也脱离了我们抽离出这个函数的本意。

### 传递的which与state的key值不同

#### which与state对应key值有规律

传递字段值与state的值是有规律的，即前半段或者后半段的字符相同，可以通过拼接字符串的方式实现，如下图所示


#### which与state对应key值无规律

可以通过结合前一章讲述的映射关系实现

来实现。

```javascript

const keyObjects = {

title: 'titleModal',

back: 'modalBack',

}

handState = (which, state) => {

const whichState = keyObjects[which];

this.setState({

[whichState]: state,

});

}

```

**映射关系和动态setState可以结合出很多种可能，比如映射关系中在加入一些函数映射，在handle函数中可以再次调用对应的函数去执行一些逻辑操作。同时需要注意的是，代码的优雅不应该成为我们唯一的追求，在代码易读性与代码优雅以及页面性能之前，我们需要做一个平衡，总的来说，三者的关系是按照易读性>性能>优雅来排序的。**